让前端开发更轻松：js对象深拷贝方法精讲

前端

2024-01-07 20:45:46

掌握 JavaScript 对象深拷贝：创建独立新对象的秘诀

在前端开发中，您经常需要处理复杂的数据结构，其中包含嵌套对象和数组。在这样的情况下，对 JS 对象进行深拷贝至关重要，因为它可以创建完全独立的新对象，而不会对原始对象造成任何影响。

什么是深拷贝？

与传统的浅拷贝不同，深拷贝会递归地复制对象的所有属性，包括嵌套对象和数组。这种方法确保新对象包含原始对象的完整副本，而不只是对原始对象的引用。

为什么深拷贝很重要？

深拷贝在以下场景中非常有用：

防止意外修改： 在编辑新对象时，您不会意外修改原始对象。
创建独立的新对象： 新对象与原始对象完全分离，可以进行独立的更改。
确保数据完整性： 当处理涉及敏感数据的复杂对象时，深拷贝有助于保持数据完整性。

深拷贝方法

有多种方法可以实现 JS 对象深拷贝：

1. Object.assign()

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

const copiedObject = Object.assign({}, originalObject);

此方法接受两个参数：目标对象和源对象。它将源对象的所有属性复制到目标对象中。

2. JSON.parse() 和 JSON.stringify()

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

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

此方法将 JS 对象转换为 JSON 字符串，然后将其解析回 JS 对象。

3. 递归函数

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

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

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

  return newObj;
}