剖析JavaScript深拷贝的奥秘：三种方法任你选！

2023-10-21 04:24:20

在JavaScript中，对象是一个非常重要的数据类型，它允许我们存储和组织复杂的数据结构。对象可以包含各种各样的属性，包括字符串、数字、布尔值、数组、函数等。当我们需要复制一个对象时，可以使用浅拷贝或深拷贝两种方式。浅拷贝只复制对象本身，而深拷贝会复制对象及其所有属性，包括嵌套的对象和数组。

浅拷贝与深拷贝的对比

为了更好地理解深拷贝，我们首先需要了解浅拷贝的概念。浅拷贝只复制对象本身，而不会复制其属性。当我们使用浅拷贝时，如果对象包含对其他对象的引用，则这些引用也会被复制到新对象中。这意味着对新对象所做的任何更改都会影响到原始对象，反之亦然。

深拷贝则不同，它不仅复制对象本身，还会复制其所有属性，包括嵌套的对象和数组。当我们使用深拷贝时，新对象与原始对象完全独立，对新对象所做的任何更改都不会影响到原始对象。

三种JavaScript深拷贝方法

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

JSON.parse(JSON.stringify())是一种非常简单但非常有效的深拷贝方法。它通过将对象转换为JSON字符串，然后将JSON字符串解析回对象来实现深拷贝。这种方法适用于大多数情况，但它也有一个缺点，就是它不能复制函数和Symbol值。

const originalObject = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

const copiedObject = JSON.parse(JSON.stringify(originalObject));

console.log(copiedObject);

2. 递归

递归是一种将问题分解成更小的子问题，然后逐个解决这些子问题的技术。我们可以使用递归来实现深拷贝，方法是遍历对象及其所有属性，并为每个属性创建一个新的副本。

function deepCopy(object) {
  if (typeof object !== 'object' || object === null) {
    return object;
  }

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

  const copiedObject = {};
  for (const key in object) {
    copiedObject[key] = deepCopy(object[key]);
  }

  return copiedObject;
}

3. 扩展运算符

扩展运算符(...)是ES6中引入的一项新特性，它可以将一个数组或对象展开为一个列表。我们可以使用扩展运算符来实现深拷贝，方法是将对象展开为一个列表，然后创建一个新的对象并将其复制到列表中。

const originalObject = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

const copiedObject = {...originalObject};

console.log(copiedObject);