JavaScript 深浅拷贝解析：理解赋值和引用的区别

2023-10-30 06:04:25

今天，让我们深入了解 JavaScript 中深浅拷贝和浅拷贝之间的区别，并探讨每种方法的优缺点。

理解赋值和引用

在 JavaScript 中，变量名引用存储在堆内存中的对象或数组。当您将一个变量赋值给另一个变量时，新变量会引用与原始变量相同的内存地址。这意味着对一个变量的更改也会影响另一个变量。

浅拷贝

浅拷贝创建一个新对象或数组，该对象或数组包含对原始对象或数组中每个属性的引用。这意味着新对象或数组对原始对象的属性的更改也会反映在原始对象中，反之亦然。

浅拷贝通常使用 Object.assign() 或扩展运算符 (...) 进行。

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

shallowCopy.name = 'Jane';

console.log(originalObject); // { name: 'Jane', age: 30 }

深拷贝

与浅拷贝不同，深拷贝创建一个新对象或数组，其中包含原始对象或数组中每个属性的副本。这意味着对新对象或数组的属性所做的任何更改都不会影响原始对象或数组，反之亦然。

实现深拷贝通常需要递归算法，该算法会遍历对象或数组并为每个属性创建副本。

以下是一个使用递归实现深拷贝的示例：

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

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

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

  return newObject;
};