JavaScript 中如何实现浅拷贝？

推荐答案

在 JavaScript 中，实现浅拷贝的常见方法有以下几种：

1. 使用 Object.assign()：

   const original = { a: 1, b: { c: 2 } };
   const copy = Object.assign({}, original);

2. 使用展开运算符 (...)：

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

3. 使用 Array.prototype.slice()（适用于数组）：

   const originalArray = [1, 2, { a: 3 }];
   const copyArray = originalArray.slice();

4. 使用 Array.from()（适用于数组）：

   const originalArray = [1, 2, { a: 3 }];
   const copyArray = Array.from(originalArray);

本题详细解读

浅拷贝的概念

浅拷贝是指创建一个新对象或数组，并将原始对象或数组的属性值复制到新对象或数组中。如果属性值是基本类型（如 number、string、boolean），则直接复制值；如果属性值是引用类型（如 object、array），则复制的是引用地址，而不是实际的对象或数组。

浅拷贝的实现方式

1. Object.assign()：

   • Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象。
   • 它只会复制源对象的自身属性，不会复制原型链上的属性。
   • 如果源对象的属性值是对象，则复制的是引用地址。

   const original = { a: 1, b: { c: 2 } };
   const copy = Object.assign({}, original);
   console.log(copy); // { a: 1, b: { c: 2 } }

2. 展开运算符 (...)：

   • 展开运算符可以将一个对象的属性展开到另一个对象中，从而实现浅拷贝。
   • 与 Object.assign() 类似，它也只复制对象的自身属性，并且对于引用类型的属性，复制的是引用地址。

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

3. Array.prototype.slice()：

   • slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝。
   • 对于数组中的引用类型元素，复制的是引用地址。

   const originalArray = [1, 2, { a: 3 }];
   const copyArray = originalArray.slice();
   console.log(copyArray); // [1, 2, { a: 3 }]

4. Array.from()：

   • Array.from() 方法从一个类似数组或可迭代对象创建一个新的数组实例。
   • 对于数组中的引用类型元素，复制的是引用地址。

   const originalArray = [1, 2, { a: 3 }];
   const copyArray = Array.from(originalArray);
   console.log(copyArray); // [1, 2, { a: 3 }]

注意事项

• 浅拷贝只复制对象的第一层属性，如果对象的属性值是引用类型，则复制的是引用地址，修改拷贝对象中的引用类型属性会影响原始对象。
• 如果需要深层次的拷贝，需要使用深拷贝方法，如递归复制、JSON.parse(JSON.stringify()) 或使用第三方库如 lodash 的 cloneDeep 方法。