快捷導(dǎo)航

JavaScript中合并Object的三種基本方法小結(jié)

更新時(shí)間：2023年08月29日 08:34:23 作者：編程三昧

在開(kāi)發(fā)過(guò)程中,我們經(jīng)常會(huì)遇到合并對(duì)象的需求,今天我們就來(lái)了解一下合并對(duì)象的幾種基本方法,文中通過(guò)代碼示例介紹的非常詳細(xì),感興趣的小伙伴跟著小編一起來(lái)看看吧

Object.assign()

Object.assign() 方法可以將一個(gè)或多個(gè)源對(duì)象的屬性復(fù)制到目標(biāo)對(duì)象中。如果源對(duì)象有自己的屬性，那么它們的值將被保留。

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

Object.assign() 是淺拷貝，如果源對(duì)象中有值的引用，合并后在目標(biāo)對(duì)象中修改值引用，同時(shí)會(huì)修改源對(duì)象的值引用。

const o1 = { a: 1 };
const o2 = { b: {
    name: "b"
} };
const obj = Object.assign({}, o1, o2);
obj.b.name = "new_b";
console.log(o2.b); // {name: 'new_b'}

解構(gòu)賦值

使用解構(gòu)賦值可以將對(duì)象的屬性復(fù)制到一個(gè)新的對(duì)象中。

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const obj = { ...o1, ...o2 };
console.log(obj); // {a: 1, b: 2, c: 2}

可以看出，使用結(jié)構(gòu)賦值合并對(duì)象時(shí)，后面對(duì)象的屬性值會(huì)覆蓋前面已有屬性值。

使用遞歸方法

我們可以通過(guò)遞歸的方法將對(duì)象中的嵌套對(duì)象合并到一個(gè)新的對(duì)象中。

/** @format */
function mergeObjects(obj1, obj2) {
    const mergedObj = Object.assign({}, obj1, obj2);
    // 遞歸處理嵌套對(duì)象
    Object.keys(mergedObj).forEach((key) => {
        if (typeof mergedObj[key] === "object" && obj1[key] && obj2[key]) {
            mergedObj[key] = mergeObjects(obj1[key], obj2[key]);
        }
    });
    return mergedObj;
}
const obj1 = { a: 1, b: { c: 2, d: 3, e: { name: "e" } } };
const obj2 = { a: 2, b: { c: 3, d: 4, e: { age: 18 } } };
const mergedObj = mergeObjects(obj1, obj2);
console.log(mergedObj);
// {a:2,b:{c:3,d:4,e:{name:e,age:18}}}