Javascript 中动态合并两个对象的属性

不畏惧失败是创造力的一个基本要素。——<艾尔文·兰德博士>

介绍

在 JavaScript 中，对象被定义为键值对的集合。对象也是一种非原始数据类型。

您经常需要将对象合并为一个，其中包含其组成部分的所有单独属性。此操作称为合并。执行此操作的两种最常见方法是：

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

在本教程中，我们将看看如何在 JavaScript 中动态合并两个对象。

之后，我们将介绍浅合并和深合并之间的区别，因为这对于完全理解对象合并至关重要。

使用扩展运算符合并 JavaScript 对象

我们可以使用 扩展运算符(...) 将不同的对象合并为一个。这也是合并两个或多个对象的最常用方法。

这是合并两个对象的不可变方法，即用于合并对象的起始两个对象不会因副作用而以任何方式改变。最后，您得到了一个新对象，由两者构建而成，而它们仍然完好无损。

让我们创建两个对象并合并它们

onst person = {
    name: "John Doe",
    age: 24
}
const job = {
    title: "Full stack developer",
    location: "Remote"
}

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

console.log(employee);
// {
//     name: "John Doe", 
//     age: 24, 
//     title: "Full stack developer", 
//     location: "Remote"
// }

注意：如果这两个对象之间存在共同的属性，例如它们都有一个 location ，则第二个对象 (job) 的属性将覆盖第一个对象 ( person)的属性：

const person = {
    name: "John Doe",
    location: "Remote"
}
const job = {
    title: "Full stack developer",
    location: "Office"
}
const employee = {...person, ...job}

console.log(employee);
// {
//   name: 'John Doe',
//   location: 'Office',
//   title: 'Full stack developer'
// }

如果要合并两个以上的对象，则最右侧的对象会覆盖左侧的对象。

使用 Object.assign() 合并 JavaScript 对象

合并两个或多个对象的另一种常用方法是使用内置Object.assign()方法：

1	Object.assign(target, source1, source2, ...);

此方法将一个或多个源对象的所有属性复制到目标对象中。就像扩展运算符一样，在覆盖时，使用最右边的值：

const person = {
    name: "John Doe", 
    age: 24,
    location: "U.S.A"
}
const job = {
    title: "Full stack developer",
    location: "Remote"
}

const employee = Object.assign(person, job);

console.log(employee);
// {
//     name: "John Doe", 
//     age: 24,
//     location: "Remote",
//     title: "Full stack developer"
// }

同样，请记住，employee 引用的对象是一个全新的对象，并且不能与 person 或 job 引用的对象相链接。

浅合并与深合并

在浅合并的情况下，如果源对象上的一个属性是另一个对象，则目标对象包含对源对象中存在的同一对象的引用。在这种情况下不会创建新对象。

让我们调整前一个 person 对象，并 location 为自己创建一个对象：

const person = {
    name: "John Doe",
    location: {
        city: "London", 
        country: "England"
    }
}
const job = {
    title: "Full stack developer"
}

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

console.log(employee.location === person.location); // true

我们可以看到 person 和 employee 对象中对 location 对象的引用是相同的。实际上，扩展操作符(...) 和 Object.assign() 都执行浅合并。

JavaScript 没有现成的深度合并支持。然而，有第三方模块和库支持它，比如 Lodash 的 _.merge。
https://www.npmjs.com/package/lodash.merge

总结

在本教程中，我们介绍了如何在JavaScript中合并两个对象。我们已经研究了 扩展操作符(...)和 Object.assign() 方法，它们都执行两个或多个对象的浅合并。

参考

https://stackabuse.com/merge-properties-of-two-objects-dynamically-in-javascript

关注【公众号】，了解更多。

赏

支付宝打赏

微信打赏

赞赏一下坚持原创技术分享，您的支持将鼓励我继续创作！

介绍

使用扩展运算符合并 JavaScript 对象

使用 Object.assign() 合并 JavaScript 对象

浅合并与深合并

总结

参考

FEATURED TAGS

FRIENDS