JavaScript 中的浅拷贝和深拷贝

目录

浅拷贝

定义

特点

示例

使用场景

实现方法

深拷贝

定义

特点

示例

使用场景

实现方法

浅拷贝

定义

浅拷贝是指仅复制对象的第一层属性。如果对象的属性是基本类型（如字符串、数字、布尔值），则会复制这些值；如果属性是引用类型（如对象、数组），则只会复制指向这些对象的引用，而不是对象本身。

特点

• 只复制对象的第一层属性。
• 引用类型属性的拷贝实际上是引用的拷贝，而不是值的拷贝。

示例

let obj1 = {
  a: 1,
  b: { c: 2 }
};

let obj2 = Object.assign({}, obj1); // 浅拷贝

// 修改原始对象的引用类型属性
obj1.b.c = 3;

console.log(obj1); // 输出: { a: 1, b: { c: 3 } }
console.log(obj2); // 输出: { a: 1, b: { c: 3 } } （b属性的c值也被改变了）

使用场景

• 当你只需要复制对象的第一层属性时。
• 当你不需要关心对象内部的变化时。 

实现方法

• 使用 Object.assign

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

• 使用扩展运算符 (...)

let obj2 = { ...obj1 };

深拷贝

定义

深拷贝是指不仅复制对象的第一层属性，还会递归地复制所有层级的属性。对于引用类型，会创建新的对象并将原对象内的属性也复制过去。

特点

• 递归复制所有层级的属性。
• 引用类型属性会被复制为新的对象实例。

示例

let obj1 = {
  a: 1,
  b: { c: 2 }
};

// 使用 JSON.parse 和 JSON.stringify 实现深拷贝
let obj2 = JSON.parse(JSON.stringify(obj1));

// 修改原始对象的引用类型属性
obj1.b.c = 3;

console.log(obj1); // 输出: { a: 1, b: { c: 3 } }
console.log(obj2); // 输出: { a: 1, b: { c: 2 } } （b属性的c值没有被改变）

使用场景

•  当你需要复制整个对象及其所有内部属性时。
• 当你需要确保对象内部的变化不会影响到副本时。

实现方法

• 使用 JSON.parse 和 JSON.stringify：适用于大多数情况下的深拷贝，但有一些限制，比如无法处理循环引用和函数属性。

let obj2 = JSON.parse(JSON.stringify(obj1));

• 使用第三方库：例如 lodash 提供了 _.cloneDeep 方法来实现深拷贝。

let _ = require('lodash');
let obj2 = _.cloneDeep(obj1);

注意：使用 JSON.parse 和 JSON.stringify 进行深拷贝有一些限制，比如无法处理循环引用和函数属性。