理解浅拷贝与深拷贝：前端开发的深克隆精要

2023-09-29 15:19:48

JavaScript 中的浅拷贝与深拷贝

在 JavaScript 中，浅拷贝和深拷贝是两种不同的对象复制方式。浅拷贝只复制对象的属性值，而深拷贝则会复制对象的所有属性值，包括嵌套的对象。

浅拷贝：

const obj1 = {
  name: "John",
  age: 25,
  address: {
    street: "Main Street",
    city: "New York",
  },
};

const obj2 = {...obj1};

console.log(obj2.address === obj1.address); // true

输出结果为true，表示obj2的地址属性和obj1的地址属性是同一个对象。这意味着对obj2的地址属性进行修改，也会影响obj1的地址属性。

深拷贝：

const obj1 = {
  name: "John",
  age: 25,
  address: {
    street: "Main Street",
    city: "New York",
  },
};

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

console.log(obj2.address === obj1.address); // false

输出结果为false，表示obj2的地址属性和obj1的地址属性是不同的对象。这意味着对obj2的地址属性进行修改，不会影响obj1的地址属性。

深拷贝的实现方法

在 JavaScript 中，有几种实现深拷贝的方法：

JSON.parse(JSON.stringify(obj))：这种方法利用JSON.stringify()函数将对象转换为JSON字符串，然后使用JSON.parse()函数将JSON字符串解析回对象。
使用递归函数：这种方法使用递归函数来遍历对象及其属性，并创建新的对象和属性。
使用库函数：JavaScript中有一些库函数可以实现深拷贝，例如Lodash的cloneDeep()函数。