JavaScript 合并对象

摘要：在本教程中，您将学习如何将两个或多个 JavaScript 对象合并，并创建一个包含所有合并对象属性的新对象。

要将 对象 合并到一个包含所有 属性 的新对象中，您有两个选择

• 使用扩展运算符 ( ...)
• 使用 Object.assign() 方法

使用扩展运算符 (...) 合并对象

ES6 引入了 扩展运算符 (...)，它可用于合并两个或多个对象，并创建一个包含合并对象属性的新对象。

以下示例使用扩展运算符 (...) 将 person 和 job 对象合并到 employee 对象中

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};


let job = {
    jobTitle: 'JavaScript Developer',
    location: 'USA'
};

let employee = {
    ...person,
    ...job
};

console.log(employee);
Code language: JavaScript (javascript)

输出

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

如果对象具有相同的名称的属性，则最右侧对象的属性将覆盖之前的属性。例如

let job = {
    jobTitle: 'JavaScript Developer',
    country: 'USA'
};

let location = {
    city: 'London',
    country: 'England'
};

let remoteJob = {
    ...job,
    ...location
};

console.log(remoteJob);
Code language: JavaScript (javascript)

输出

{
    jobTitle: 'JavaScript Developer',
    country: 'England',
    city: 'London'
}
Code language: CSS (css)

在此示例中，job 和 location 具有相同的属性 country。当我们合并这些对象时，结果对象 (remoteJob) 具有 country 属性，其值来自第二个对象 (location)。

使用 Object.assign() 方法合并对象

Object.assign() 方法允许您将一个或多个源对象的所有可枚举自身属性复制到目标对象，并返回目标对象

Object.assign(target, sourceObj1, sourceObj2, ...);
Code language: JavaScript (javascript)

与扩展运算符 ( ...) 类似，如果源对象具有相同的属性名，则后面的对象将覆盖前面的对象。请参见以下示例

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};


let job = {
    jobTitle: 'JavaScript Developer',
    country: 'USA'
};


let employee = Object.assign(person, job);
console.log(employee);
Code language: JavaScript (javascript)

输出

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    country: 'USA'
}
Code language: CSS (css)

浅层合并

扩展运算符 ( ...) 和 Object.assign() 方法都执行浅层合并。这意味着如果对象具有引用另一个对象的属性，则原始对象和结果目标对象的属性将引用同一个对象。例如

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    contact: {
        phone: '408-989-8745',
        email: '[email protected]'
    }
};


let job = {
    jobTitle: 'JavaScript Developer',
    location: 'USA'
};

let employee = { ...person,  ...job };

console.log(employee.contact === person.contact);
Code language: JavaScript (javascript)

输出

true
Code language: JavaScript (javascript)

在此示例中，person 对象具有引用对象的 contact 属性。合并后，person 和 employee 对象具有引用同一个对象的 contact 属性。

深层合并

要递归地将源对象的自身和继承的可枚举字符串键属性合并到目标对象，您可以使用 Lodash ._merge() 方法

_.merge(object, [sources])
Code language: CSS (css)

在本教程中，您已经学习了如何使用扩展运算符 (...) 和 Object.assign() 方法在 JavaScript 中合并对象。