Object.assign()和扩展运算符（...）是浅拷贝还是深拷贝？在 JavaScript 中，Object.as

在 JavaScript 中，Object.assign() 和扩展运算符（...）是常用的对象合并和拷贝方法。虽然它们在某些方面具有相似性，但在处理对象拷贝时，它们都进行的是浅拷贝，而非深拷贝。下面将详细介绍 Object.assign() 和扩展运算符的区别、使用场景以及为什么它们进行的是浅拷贝。

Object.assign()

Object.assign() 方法用于将源对象的所有可枚举属性复制到目标对象中。这个方法可以用于对象的合并和拷贝操作。

语法：

Object.assign(target, ...sources)

• 参数：

  • target：目标对象，将会接收源对象的属性。
  • sources：一个或多个源对象，从中复制属性到目标对象。

• 返回值：

  • 返回目标对象。

示例代码：

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

const result = Object.assign(target, source);
console.log(result); // 输出: { a: 1, b: 2, c: 3 }
console.log(target); // 输出: { a: 1, b: 2, c: 3 }

在这个例子中，Object.assign() 将 source 对象的属性合并到 target 对象中。

扩展运算符（Spread Operator）

扩展运算符（...）用于将一个对象的所有可枚举属性拷贝到一个新对象中。它也可以用于对象的合并和拷贝操作。

语法：

const newObj = { ...source }

示例代码：

const source = { a: 1, b: 2, c: 3 };
const newObj = { ...source };

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

在这个示例中，扩展运算符将 source 对象的属性拷贝到一个新对象 newObj 中。

浅拷贝与深拷贝

浅拷贝 是指创建一个新对象，但只复制对象的引用而非实际的值。对于嵌套的对象或数组，浅拷贝只复制引用，内部对象的更改会影响到原始对象。

深拷贝 是指创建一个新对象，并递归地复制所有嵌套的对象或数组。这样，新对象和原始对象是完全独立的，修改新对象不会影响原始对象。

浅拷贝示例：

const original = {
  a: 1,
  b: {
    c: 2
  }
};

const shallowCopy = Object.assign({}, original);
shallowCopy.b.c = 3;

console.log(original.b.c); // 输出: 3

在这个例子中，Object.assign() 只进行了浅拷贝。修改 shallowCopy 中嵌套对象的属性，也会影响到 original 对象。

扩展运算符的浅拷贝示例：

const original = {
  a: 1,
  b: {
    c: 2
  }
};

const shallowCopy = { ...original };
shallowCopy.b.c = 3;

console.log(original.b.c); // 输出: 3

这里，扩展运算符同样只进行了浅拷贝，对嵌套对象的更改也会影响到原始对象。

使用场景

1. 对象合并：

   • Object.assign() 和 扩展运算符 都可以用于将多个对象合并为一个对象。例如，合并多个配置对象：

     const defaults = { theme: 'light', fontSize: 14 };
     const userSettings = { fontSize: 16 };
     
     const settings = { ...defaults, ...userSettings };
     console.log(settings); // 输出: { theme: 'light', fontSize: 16 }
     

2. 对象拷贝：

   • Object.assign() 和 扩展运算符 都可以用于创建对象的浅拷贝。这在需要避免直接修改原始对象时非常有用：

     const original = { a: 1, b: 2 };
     const copy = { ...original };
     console.log(copy); // 输出: { a: 1, b: 2 }
     

3. 避免引用副作用：

   • 在需要避免修改原始对象的场景时，可以使用这些方法创建浅拷贝。但是，注意它们不会处理嵌套对象的拷贝。如果需要深拷贝，可以使用递归拷贝函数或第三方库（如 Lodash 的 cloneDeep）。

总结

• Object.assign() 和 扩展运算符（Spread Operator） 都用于对象的合并和浅拷贝。
• 浅拷贝 只复制对象的引用，对于嵌套对象的更改会影响原始对象。
• 深拷贝 需要递归复制对象的所有层级，常用工具或自定义实现。

了解这些方法的特点和使用场景可以帮助你更好地管理和操作 JavaScript 对象，避免不必要的副作用。