揭秘手写浅拷贝与深拷贝方法，攻克JavaScript复制对象难题

2023-02-17 06:11:20

浅拷贝与深拷贝：对象复制的艺术

在 JavaScript 开发中，对象拷贝是一种常见的操作，它允许我们在不修改原始对象的情况下创建其副本。这在多种场景下非常有用，例如避免意外修改或将对象作为函数参数传递。在 JavaScript 中，有两种主要的拷贝方法：浅拷贝和深拷贝。

浅拷贝：仅复制一层

浅拷贝只复制对象的第一层属性，忽略所有嵌套对象或数组。这使得浅拷贝既快速又简单，但也会带来风险，因为对副本的修改可能会影响原始对象。

浅拷贝方法：

Object.assign() 方法 ：Object.assign() 方法是浅拷贝的常用方法。它将一个或多个源对象的属性复制到目标对象中。

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

扩展运算符（...） ：扩展运算符也可用于浅拷贝。它将一个对象的属性复制到另一个对象中。

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

深拷贝：复制一切

深拷贝会递归地复制对象的所有属性和嵌套对象，创建一个独立于原始对象的全新副本。这确保了对副本的修改不会影响原始对象。

深拷贝方法：

JSON.parse(JSON.stringify(obj)) 方法 ：此方法利用 JSON.stringify() 和 JSON.parse() 函数来创建深拷贝。它将对象转换为 JSON 字符串，然后将其解析回对象。

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

递归拷贝方法 ：递归拷贝方法通过使用递归函数来复制对象的属性和嵌套对象。它为每个嵌套对象调用自身，直到复制整个对象。

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

  const newObj = Array.isArray(obj) ? [] : {};

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

  return newObj;
}

const obj1 = { name: 'John', age: 30, address: { city: 'New York' } };
const obj2 = deepCopy(obj1);

手写浅拷贝与深拷贝方法的比较

特性	浅拷贝	深拷贝
速度	更快	更慢
深度	只拷贝一层属性	拷贝所有属性和嵌套对象
方法	Object.assign()，扩展运算符（...）	JSON.parse(JSON.stringify(obj))，递归拷贝方法
场景	不需要复制嵌套对象	需要复制所有属性和嵌套对象