js 深拷贝与浅拷贝方式

是的，JavaScript 中有 深拷贝（deep copy） 和 浅拷贝（shallow copy） 的概念，它们的区别在于如何处理对象或数组中的嵌套数据。

浅拷贝（Shallow Copy）

浅拷贝是指只复制对象的第一层属性。如果属性值是引用类型（如数组、对象等），则复制的是引用，而不是数据本身。也就是说，拷贝后的对象和原对象共享同一个嵌套对象。

浅拷贝的方法

1. Object.assign()

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

        2. 展开运算符（...）

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { ...obj1 };
obj2.b.c = 3;
console.log(obj1.b.c); // 输出: 3
console.log(obj2.b.c); // 输出: 3

        3. 数组的 slice() 和 concat() 方法（针对数组） 

const arr1 = [1, 2, { a: 3 }];
const arr2 = arr1.slice(); // 或 arr1.concat()
arr2[2].a = 4;
console.log(arr1[2].a); // 输出: 4
console.log(arr2[2].a); // 输出: 4

深拷贝的方法

1. JSON.parse() 和 JSON.stringify()

这是最常用的深拷贝方法，但它有一些限制，比如不能拷贝函数、undefined、Symbol、循环引用等。

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

        2. 自定义深拷贝函数 

如果需要深拷贝更复杂的对象，或者不希望使用 JSON.parse() 和 JSON.stringify()，可以编写自定义的深拷贝函数。

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) return obj;
  const copy = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = deepCopy(obj1);
obj2.b.c = 3;
console.log(obj1.b.c); // 输出: 2
console.log(obj2.b.c); // 输出: 3

浅拷贝和深拷贝的总结

特性	浅拷贝	深拷贝
拷贝的层次	只拷贝对象的第一层属性	完全拷贝对象及其嵌套的所有层次
引用类型的处理	仅拷贝引用类型的引用（共享同一个引用）	递归拷贝引用类型，创建新对象（不共享引用）
常见方法	Object.assign(), 展开运算符 ...	JSON.parse(JSON.stringify()), 自定义递归方法

 

总结

• 浅拷贝：复制对象的第一层，如果属性是引用类型，则复制引用。
• 深拷贝：递归复制对象及其嵌套的所有层次，创建全新的对象，避免共享引用。
• 使用 JSON.parse(JSON.stringify()) 进行深拷贝时有一些限制，适用于简单的对象或数组拷贝。
• 自定义深拷贝函数可以解决复杂情况，但需要更复杂的代码。

你可以根据具体需求选择合适的拷贝方式。