JavaScriptObject.assign使用方法详解

**JavaScript Object.assign 用法详解：对象合并的利器与陷阱** `Object.assign()` 是 JavaScript 中用于合并对象属性的常用方法，它通过浅拷贝的方式将源对象的可枚举属性复制到目标对象，并返回修改后的目标对象。本文将深入解析 `Object.assign()` 的用法，包括如何避免修改原始对象、理解浅拷贝的特性及其局限性、以及深拷贝的实现方案。此外，还会探讨 `Object.assign()` 在处理 Symbol 类型属性和 `null`/`undefined` 值时的行为。掌握这些细节，能帮助开发者更高效、安全地使用 `Object.assign()`，避免潜在的错误，提升代码质量。无论是前端开发还是 Node.js 开发，理解并掌握 `Object.assign()` 都是必不可少的。

Object.assign() 是浅拷贝，用于合并对象属性，但不修改原始对象的方法是使用空对象作为目标；其执行的是浅拷贝，不会复制嵌套对象的引用；深拷贝可通过 JSON.parse(JSON.stringify(obj))、递归函数或第三方库如 lodash 的 _.cloneDeep 实现；它仅复制可枚举的自有属性，包括可枚举的 Symbol 属性；当目标为 null 或 undefined 时会抛出错误，而源对象为 null 或 undefined 时则被忽略。1. 使用 Object.assign({}, obj1, obj2) 可避免修改原对象；2. 它是浅拷贝，嵌套对象会被引用而非复制；3. 深拷贝方法包括 JSON 转换、递归实现和第三方库；4. 仅复制可枚举的自有属性；5. 目标不能为 null 或 undefined，否则抛出 TypeError，源为 null 或 undefined 则跳过。

Object.assign() 方法通过复制一个或多个源对象的所有可枚举的自有属性到目标对象，然后返回修改后的目标对象。它是一种浅拷贝的方式，可以用来合并对象，但需要注意一些细节。

解决方案

Object.assign() 的基本语法是 Object.assign(target, ...sources)。其中，target 是目标对象，也是修改后的对象将要返回的。sources 是一个或多个源对象，它们的属性将被复制到目标对象。

例如：

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 }
console.log(target === returnedTarget); // 输出: true

在这个例子中，source 对象的属性 b 和 c 被复制到 target 对象。由于 target 对象已经有属性 b，所以 source 对象的 b 属性覆盖了 target 对象的 b 属性。Object.assign 直接修改了 target 对象，并且返回了修改后的 target 对象。

如何避免修改原始对象？

Object.assign 会直接修改目标对象。如果不想修改原始对象，可以先创建一个空对象作为目标对象：

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

const mergedObj = Object.assign({}, obj1, obj2, obj3);

console.log(mergedObj); // 输出: { a: 1, b: 2, c: 3 }
console.log(obj1); // 输出: { a: 1 } (obj1 未被修改)

这样，mergedObj 将会是一个新的对象，包含了 obj1、obj2 和 obj3 的所有属性，而原始对象 obj1、obj2 和 obj3 不会被修改。

Object.assign 是深拷贝还是浅拷贝？

Object.assign 执行的是浅拷贝。这意味着如果源对象的属性值是一个对象，那么只会复制对象的引用，而不会创建一个新的对象。

看下面的例子：

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { d: 3 };

const mergedObj = Object.assign({}, obj1, obj2);

console.log(mergedObj); // 输出: { a: 1, b: { c: 2 }, d: 3 }

obj1.b.c = 4; // 修改 obj1 的 b 属性的 c 属性

console.log(mergedObj); // 输出: { a: 1, b: { c: 4 }, d: 3 }

在这个例子中，mergedObj.b 和 obj1.b 指向的是同一个对象。所以，当我们修改 obj1.b.c 的值时，mergedObj.b.c 的值也会被修改。这就是浅拷贝的特性。

如何进行深拷贝？

如果需要进行深拷贝，可以使用以下方法：

1. JSON.parse(JSON.stringify(obj))：这种方法简单粗暴，但是有一些限制。例如，它不能拷贝函数、undefined 和 Symbol 类型的属性。

   const obj1 = { a: 1, b: { c: 2 }, d: function() {} };
   const clonedObj = JSON.parse(JSON.stringify(obj1));
   
   console.log(clonedObj); // 输出: { a: 1, b: { c: 2 } } (函数 d 丢失)

2. 递归实现深拷贝：这种方法可以处理更复杂的情况，但是需要编写更多的代码。

   function deepClone(obj) {
     if (typeof obj !== 'object' || obj === null) {
       return obj;
     }
   
     const clonedObj = Array.isArray(obj) ? [] : {};
   
     for (let key in obj) {
       if (obj.hasOwnProperty(key)) {
         clonedObj[key] = deepClone(obj[key]);
       }
     }
   
     return clonedObj;
   }
   
   const obj1 = { a: 1, b: { c: 2 }, d: function() {} };
   const clonedObj = deepClone(obj1);
   
   console.log(clonedObj); // 输出: { a: 1, b: { c: 2 }, d: function() {} } (函数 d 被正确拷贝，但引用不同)
   
   obj1.b.c = 4;
   console.log(obj1); // 输出: { a: 1, b: { c: 4 }, d: function() {} }
   console.log(clonedObj); // 输出: { a: 1, b: { c: 2 }, d: function() {} } (clonedObj 未被修改)

3. 使用第三方库：例如 lodash 的 _.cloneDeep() 方法。

   const _ = require('lodash');
   
   const obj1 = { a: 1, b: { c: 2 }, d: function() {} };
   const clonedObj = _.cloneDeep(obj1);
   
   console.log(clonedObj); // 输出: { a: 1, b: { c: 2 }, d: function() {} }
   
   obj1.b.c = 4;
   console.log(obj1); // 输出: { a: 1, b: { c: 4 }, d: function() {} }
   console.log(clonedObj); // 输出: { a: 1, b: { c: 2 }, d: function() {} } (clonedObj 未被修改)

Object.assign 的性能如何？

Object.assign 的性能通常是可以接受的，但在处理大量对象或大型对象时，性能可能会成为一个问题。在这种情况下，可以考虑使用其他方法，例如手动循环复制属性，或者使用专门的库来优化性能。

Object.assign 可以合并 Symbol 类型的属性吗？

Object.assign 可以合并 Symbol 类型的属性，但是只有可枚举的 Symbol 类型的属性才会被复制。

const obj1 = {
  a: 1,
  [Symbol('foo')]: 2
};

const obj2 = {
  b: 3,
  [Symbol('bar')]: 4
};

Object.defineProperty(obj2, Symbol('bar'), {
  value: 5,
  enumerable: false // 设置为不可枚举
});

const mergedObj = Object.assign({}, obj1, obj2);

console.log(mergedObj); // 输出: { a: 1, b: 3, [Symbol(foo)]: 2 } (只有可枚举的 Symbol 属性被复制)

Object.assign 如何处理 null 和 undefined？

当 target 是 null 或 undefined 时，Object.assign 会抛出 TypeError 错误。当 source 是 null 或 undefined 时，Object.assign 会跳过这些源对象，不会抛出错误。

try {
  Object.assign(null, { a: 1 }); // 抛出 TypeError
} catch (e) {
  console.log(e); // 输出: TypeError: Cannot convert undefined or null to object
}

const obj = Object.assign({}, null, { a: 1 }, undefined, { b: 2 });

console.log(obj); // 输出: { a: 1, b: 2 }

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScriptObject.assign使用方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。