JavaScript中Object.assign用法详解

想要轻松合并JavaScript对象？`Object.assign()`方法绝对是你的好帮手！本文将深入探讨`Object.assign()`的用法、性能优化、深浅拷贝问题以及与扩展运算符的区别，助你彻底掌握这一实用技巧。`Object.assign()`能将一个或多个源对象的属性复制到目标对象，实现对象合并。但需要注意的是，它执行的是浅拷贝，且在处理大量对象时性能可能下降。如何避免修改原始对象？如何进行深拷贝？`Object.assign()`与扩展运算符又有哪些差异？阅读本文，你将找到答案，写出更高效、更优雅的JavaScript代码！

Object.assign()用于合并对象，通过将源对象属性复制到目标对象实现。1. 它修改目标对象并返回，如不想修改可传空对象作为新目标；2. 性能方面，在处理大量对象时效率下降，优化方式包括减少对象数量、避免冗余属性复制、使用手动赋值或第三方库；3. Object.assign执行浅拷贝，若需深拷贝可用JSON.parse(JSON.stringify())、递归实现或Lodash的cloneDeep；4. 与扩展运算符区别在于Object.assign会修改原对象，而扩展运算符生成新对象，两者均是浅拷贝且覆盖同名属性，但扩展运算符处理null/undefined时转为空对象。

Object.assign() 方法通过复制一个或多个源对象的所有可枚举自有属性到目标对象，来合并对象。它会修改目标对象，并返回修改后的目标对象。简单来说，就是把几个东西拼到一起。

Object.assign(target, ...sources)

解决方案

Object.assign() 接收两个或多个参数。第一个参数 target 是目标对象，后续的参数 sources 是源对象，可以有多个。Object.assign() 会将 sources 中的属性复制到 target 中。

举个例子：

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target); // 输出: { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // 输出: { a: 1, b: 4, c: 5 }

注意，target 对象本身被修改了，并且 returnedTarget 实际上就是 target。 如果不想修改原始的 target 对象，可以创建一个新的空对象作为 target：

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const newTarget = Object.assign({}, target, source);

console.log(target); // 输出: { a: 1, b: 2 }  (未修改)
console.log(newTarget); // 输出: { a: 1, b: 4, c: 5 }

这样，target 对象就不会被修改了。

Object.assign的性能如何？合并大量对象时有什么优化技巧？

Object.assign 在处理少量对象时性能尚可，但合并大量对象时，性能会明显下降。这主要是因为每次复制属性都需要遍历源对象。

优化技巧：

1. 减少对象数量： 尽量减少需要合并的对象数量。如果可以将多个小对象预先合并成一个大对象，就先做这一步。

2. 避免不必要的属性复制： 如果某些属性不需要合并，就不要包含在源对象中。可以使用 delete 操作符移除不需要的属性，或者在创建源对象时就避免添加这些属性。

3. 使用循环和手动赋值： 在某些情况下，使用 for...in 循环和手动赋值可能比 Object.assign 更快。但这通常只在非常极端的情况下才有效，并且代码可读性会降低。例如：

   function customAssign(target, ...sources) {
       for (const source of sources) {
           for (const key in source) {
               if (Object.prototype.hasOwnProperty.call(source, key)) {
                   target[key] = source[key];
               }
           }
       }
       return target;
   }

   需要注意的是，这种方法需要处理原型链上的属性，所以需要使用 hasOwnProperty 进行判断。

4. 使用第三方库： 一些第三方库提供了更高效的对象合并方法。例如，Lodash 的 _.merge 函数在某些情况下可能比 Object.assign 更快。

深拷贝与浅拷贝：Object.assign是深拷贝还是浅拷贝？如何实现深拷贝？

Object.assign 执行的是浅拷贝。这意味着它只会复制源对象的属性值，而不会复制属性值指向的对象。如果属性值是一个对象，那么 target 对象和 source 对象中的该属性将指向同一个对象。修改其中一个对象，另一个对象也会受到影响。

深拷贝是指创建一个完全独立的副本，修改副本不会影响原始对象。

实现深拷贝的方法：

1. JSON.parse(JSON.stringify(obj))： 这是最简单的一种深拷贝方法，但有一些限制：

   • 不能拷贝函数。
   • 不能拷贝 RegExp、Date、Set、Map 等特殊对象。
   • 会忽略 undefined。
   • 如果对象中存在循环引用，会报错。

    const obj = { a: 1, b: { c: 2 } };
    const deepCopy = JSON.parse(JSON.stringify(obj));
   
    deepCopy.b.c = 3;
   
    console.log(obj.b.c); // 输出: 2
    console.log(deepCopy.b.c); // 输出: 3

2. 递归实现深拷贝： 这种方法可以处理更复杂的情况，但需要手动处理循环引用。

    function deepClone(obj, map = new WeakMap()) {
        if (typeof obj !== 'object' || obj === null) {
            return obj;
        }
   
        if (map.has(obj)) {
            return map.get(obj); // 处理循环引用
        }
   
        const newObj = Array.isArray(obj) ? [] : {};
        map.set(obj, newObj);
   
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                newObj[key] = deepClone(obj[key], map);
            }
        }
   
        return newObj;
    }

   这个函数使用 WeakMap 来存储已经拷贝过的对象，以防止循环引用导致无限递归。

3. 使用第三方库： Lodash 的 _.cloneDeep 函数提供了更强大和可靠的深拷贝功能。

Object.assign与扩展运算符（...）在对象合并上的区别？

Object.assign 和扩展运算符 (...) 都可以用于对象合并，但它们之间有一些区别：

• 修改目标对象： Object.assign 会修改目标对象，而扩展运算符会创建一个新的对象。
• 浅拷贝： 它们都执行浅拷贝。
• 属性覆盖： 如果源对象和目标对象有相同的属性，Object.assign 会用源对象的属性值覆盖目标对象的属性值，扩展运算符也是如此。
• 处理 null 和 undefined： Object.assign 会跳过 null 和 undefined 源对象，而扩展运算符会将它们转换为对象 {}。

示例：

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

// 使用 Object.assign
const assignedTarget = Object.assign({}, target, source);
console.log(assignedTarget); // 输出: { a: 1, b: 4, c: 5 }

// 使用扩展运算符
const spreadTarget = { ...target, ...source };
console.log(spreadTarget); // 输出: { a: 1, b: 4, c: 5 }

总的来说，如果需要修改原始对象，可以使用 Object.assign。如果需要创建一个新的对象，可以使用扩展运算符。扩展运算符通常更简洁易读。

今天关于《JavaScript中Object.assign用法详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！