在开发前端项目时，我们经常需要合并对象的属性，而 ECMAScript 2021 规范中的 Object.assign() 方法就是解决这个问题的一种通用方法。本文将深入探讨 Object.assign() 方法的使用说明以及坑点，并附带示例代码，希望能对前端开发者有所帮助。
Object.assign() 方法的用法
语法
Object.assign(target, ...sources)
参数
- target：目标对象，即要合并到的对象。
- sources：源对象，即要从中复制属性的对象。
返回值
- 返回目标对象。
基本用法
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const result = Object.assign(target, source);
console.log(result); // { a: 1, b: 4, c: 5 }
console.log(target); // { a: 1, b: 4, c: 5 }在上面的例子中，我们将 source 对象的属性合并到 target 对象中，并将结果赋值给了 result。由于 target 对象已经存在属性 b，所以 source 对象中的属性 b 覆盖了 target 对象中的属性 b。最终输出了合并后的对象。
多个源对象合并
const target = { a: 1, b: 2 };
const source1 = { b: 4, c: 5 };
const source2 = { c: 6, d: 7 };
const result = Object.assign(target, source1, source2);
console.log(result); // { a: 1, b: 4, c: 6, d: 7 }
console.log(target); // { a: 1, b: 4, c: 6, d: 7 }在上面的例子中，我们传递了多个源对象参数。Object.assign() 方法会从左到右依次将源对象中的属性复制到目标对象中。如果多个源对象中存在相同的属性，后面的源对象会覆盖前面的源对象。
深拷贝
// javascriptcn.com 代码示例
const deepClone = (obj) => JSON.parse(JSON.stringify(obj));
const target = { a: { b: 1 } };
const source = { a: { c: 2 } };
const result = Object.assign(target, deepClone(source));
console.log(result); // { a: { c: 2 } }
console.log(target); // { a: { c: 2 } }在上面的例子中，我们使用了深拷贝的方法复制了源对象，以免将原源对象的属性修改。如果使用浅拷贝，操作源对象时，目标对象也会发生变化。
Object.assign() 方法的坑点
第一个参数必须是对象
const result = Object.assign(null, { a: 1 });
// Uncaught TypeError: Cannot convert undefined or null to object在上面的例子中，我们将第一个参数传递了 null。由于 null 和 undefined 都无法转换为对象，因此会报错。
数组作为目标对象
const target = [1, 2, 3];
const source = { a: 4, b: 5 };
const result = Object.assign(target, source);
console.log(result); // [1, 2, 3, a: 4, b: 5]在上面的例子中，我们选择将数组 target 作为目标对象，而源对象 source 是一个普通对象。在这种情况下，Object.assign() 方法会将数组 target 转换为对象，并导致结果不符合预期。
为了避免这种情况，我们可以使用扩展运算符将数组展开为参数。
const target = [1, 2, 3];
const source = { a: 4, b: 5 };
const result = Object.assign([], target, source);
console.log(result); // [1, 2, 3, a: 4, b: 5]在上面的例子中，我们创建了一个空数组作为目标对象，然后将数组 target 和源对象 source 展开为参数，最终得到了我们期望的结果。
总结
Object.assign() 方法是 ECMAScript 2021 规范中的一种对象属性合并的通用方法，可用于合并对象及属性的多个源对象。但是需要注意，合并的目标对象必须是一个对象，否则会报错，而合并的源对象中不应该包含数组。在实际开发中如果需要深拷贝，应该使用深拷贝的方法，避免原对象属性的改变导致目标对象属性的错误输出。
（完）
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f6e467d4982a6eb8fd5b0