面试题：JavaScript中浅拷贝的实现方式及原理

Question

请简述JavaScript中浅拷贝常见的实现方式，如使用`Object.assign()`和展开运算符`...`进行浅拷贝，并解释其背后的原理，同时举例说明浅拷贝可能出现的问题。

Answer 1

1. 使用 Object.assign() 进行浅拷贝

• 实现方式：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它返回目标对象。例如：

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

• 原理：Object.assign() 会遍历源对象自身的可枚举属性，并将它们复制到目标对象。对于基本数据类型，它会直接复制值；对于引用数据类型，它会复制引用地址，而不是创建一个新的对象。

2. 使用展开运算符 ... 进行浅拷贝

• 实现方式：在对象字面量中使用展开运算符 ... 可以创建一个新对象，新对象包含原对象的所有可枚举属性。例如：

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

• 原理：展开运算符会遍历对象的可枚举属性，并将它们逐个添加到新对象中。同样，对于基本数据类型是值的复制，对于引用数据类型是引用地址的复制。

3. 浅拷贝可能出现的问题

浅拷贝对于引用数据类型只是复制了引用地址，这会导致当原对象中的引用数据类型的值发生改变时，通过浅拷贝得到的新对象中的对应值也会改变。例如：

const source = { a: 1, b: { c: 2 } };
const newObj = {...source };
source.b.c = 3;
console.log(newObj.b.c); 
// 3，因为 newObj.b 和 source.b 指向同一个对象

这表明浅拷贝在处理嵌套对象或数组时，如果需要独立修改内部的引用数据类型，可能会出现不符合预期的结果，需要使用深拷贝来解决此类问题。