手写JS深拷贝与浅拷贝全攻略，你还在用Object.assign()吗？

浅拷贝与深拷贝：JavaScript 中数据拷贝的奥秘

简介

在 JavaScript 开发中，数据拷贝是一个常见的操作。理解浅拷贝和深拷贝之间的区别至关重要，它们决定了在不同场景下如何正确处理数据。

浅拷贝

浅拷贝只复制对象的引用，而不是复制实际值。这意味着对浅拷贝进行的任何更改也会反映在原始对象上。

何时使用浅拷贝？

• 当您不想修改原始数据时，例如传递数据给函数或组件。
• 当您需要创建对象的副本而又不影响原始对象时。

手写实现浅拷贝

function shallowCopyObject(obj) {
  const newObj = {};
  for (const key in obj) {
    newObj[key] = obj[key];
  }
  return newObj;
}

function shallowCopyArray(arr) {
  const newArr = [];
  for (const item of arr) {
    newArr.push(item);
  }
  return newArr;
}

深拷贝

深拷贝复制对象的实际值，包括所有嵌套对象和数组。这意味着对深拷贝进行的任何更改都不会影响原始对象。

何时使用深拷贝？

• 当您需要修改数据但不希望影响原始数据时。
• 当您需要创建一个对象的完全独立副本时。

手写实现深拷贝

function deepCopyObject(obj) {
  const newObj = {};
  for (const key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      newObj[key] = deepCopyObject(obj[key]);
    } else {
      newObj[key] = obj[key];
    }
  }
  return newObj;
}

function deepCopyArray(arr) {
  const newArr = [];
  for (const item of arr) {
    if (typeof item === 'object' && item !== null) {
      newArr.push(deepCopyObject(item));
    } else {
      newArr.push(item);
    }
  }
  return newArr;
}

总结

浅拷贝和深拷贝是 JavaScript 中处理数据拷贝时必备的工具。浅拷贝适用于不修改原始数据的情况，而深拷贝适用于需要修改数据且不想影响原始数据的情况。通过理解这些概念和实现方法，您可以提升 JavaScript 开发技能，并高效地处理数据拷贝任务。

常见问题解答

• Q：何时使用浅拷贝？

  • A：浅拷贝适用于传递数据给函数或组件，以及创建对象的副本但不影响原始对象时。

• Q：何时使用深拷贝？

  • A：深拷贝适用于修改数据但不希望影响原始数据时，以及创建对象的完全独立副本时。

• Q：如何判断是否需要深拷贝？

  • A：如果您需要修改对象或数组及其嵌套结构，则需要深拷贝。

• Q：浅拷贝和深拷贝的性能差异是什么？

  • A：浅拷贝的性能优于深拷贝，因为深拷贝需要遍历整个数据结构。

• Q：使用浅拷贝和深拷贝时有哪些需要注意的事项？

  • A：使用浅拷贝时，请确保您不希望修改原始数据。使用深拷贝时，请注意性能开销，尤其是对于大型数据结构。