如何使用 ES8 的 Object.assign() 解决 JavaScript 对象合并问题

在日常的前端开发中，经常会遇到需要将多个对象合并为一个新对象的情况。这时候需要一个高效、简单的方法来完成任务，ES8 中新增的 Object.assign() 方法正是一个不错的选择。

ES8 中的 Object.assign() 方法

Object.assign() 方法接受一个目标对象和一个或多个源对象作为参数，将源对象的属性和方法复制到目标对象中并返回目标对象，如果有重复的属性和方法，则后面的会覆盖前面的。

let target = { a: 1 };
let source1 = { b: 2 };
let source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target); // { a: 1, b: 2, c: 3 }

对象合并问题

在日常工作中，我们常常需要将多个对象进行合并，从而得到一个新的对象。而在 JavaScript 中，对象的合并可以通过 ES8 中新增的 Object.assign() 方法来实现。

考虑以下例子：

let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let obj3 = { e: 5, f: 6 };
let mergedObj = Object.assign({}, obj1, obj2, obj3);
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }

在上面的例子中，我们通过 Object.assign() 方法，成功将 obj1、obj2 和 obj3 这三个对象合并成一个新的对象 mergedObj。

使用 Object.assign() 合并数组中的对象

除了合并多个对象外，Object.assign() 还可以合并数组中的对象。考虑以下例子：

let arr1 = [{ a: 1 }, { b: 2 }];
let arr2 = [{ c: 3 }, { d: 4 }];
let mergedArr = Object.assign([], arr1, arr2);
console.log(mergedArr); // [{ a: 1 }, { b: 2 }, { c: 3 }, { d: 4 }]

在上面的例子中，我们通过 Object.assign() 方法，成功将 arr1 和 arr2 中的对象合并成一个新的数组 mergedArr。

注意事项

使用 Object.assign() 方法进行对象合并时，需要注意以下几点：

1. 当源对象中有相同的属性（或方法）时，后面的会覆盖前面的。

2. Object.assign() 方法只能复制源对象自身的属性，不能复制继承的属性。

3. Object.assign() 方法不会复制源对象的访问器属性（getter 和 setter）。

4. Object.assign() 方法不会复制源对象的不可枚举属性。

总结

本文介绍了在前端开发中如何使用 ES8 的 Object.assign() 方法来解决 JavaScript 对象合并问题。通过实例演示，我相信读者已经掌握了 Object.assign() 的使用方法和注意事项。在实际开发中，我们可以根据自身需求，灵活运用 Object.assign() 方法，提升开发效率，减少重复代码的编写。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e2b98add4f0e0ff73ba55