JavaScript 浅拷贝与深拷贝详解

2024-01-20 17:31:33

什么是浅拷贝和深拷贝？

在 JavaScript 中，对象是一种复合数据类型，可以包含多个属性。当我们创建一个新对象时，可以使用浅拷贝或深拷贝的方式复制原有对象的数据。

浅拷贝 ：浅拷贝只复制对象的第一层属性，而不会复制其嵌套的对象或数组。这意味着新对象中的属性指向与原有对象中的属性相同的内存地址。
深拷贝 ：深拷贝会递归复制对象的所有层级的数据，创建一个全新的对象。这意味着新对象中的属性不会指向与原有对象中的属性相同的内存地址。

浅拷贝的实现方法

1. Object.assign()

Object.assign() 方法是 JavaScript 中实现浅拷贝的一种简单方法。该方法可以将一个或多个源对象的属性复制到目标对象中。

const obj1 = { name: 'John', age: 30 };
const obj2 = Object.assign({}, obj1);

console.log(obj2); // { name: 'John', age: 30 }

2. in运算符

in运算符可以检查一个属性是否存在于对象中。我们可以使用 in运算符来遍历原有对象的属性，并将这些属性的值复制到新对象中。

const obj1 = { name: 'John', age: 30 };
const obj2 = {};

for (let key in obj1) {
  obj2[key] = obj1[key];
}

console.log(obj2); // { name: 'John', age: 30 }

深拷贝的实现方法

1. JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。我们可以使用 JSON.stringify() 方法将对象转换为 JSON 字符串，然后使用 JSON.parse() 方法将 JSON 字符串解析为对象。

const obj1 = { name: 'John', age: 30 };
const obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj2); // { name: 'John', age: 30 }

2. MessageChannel

MessageChannel 是 HTML5 中的一种通信机制。我们可以使用 MessageChannel 来实现深拷贝。

const obj1 = { name: 'John', age: 30 };
const obj2 = {};

const channel = new MessageChannel();
channel.port1.onmessage = (event) => {
  obj2 = event.data;
};

channel.port2.postMessage(obj1);

console.log(obj2); // { name: 'John', age: 30 }

3. 闭包 + 递归

我们可以使用闭包和递归来实现深拷贝。

const obj1 = { name: 'John', age: 30 };
const obj2 = {};

const deepCopy = (obj) => {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  if (Array.isArray(obj)) {
    return obj.map((item) => deepCopy(item));
  }

  const newObj = {};
  for (let key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }

  return newObj;
};

console.log(deepCopy(obj1)); // { name: 'John', age: 30 }