巧解 JS 中对象深拷贝谜题

前端

2023-09-30 12:47:55

在 JavaScript 的世界中，变量赋值往往会让我们迷惑不解。当涉及到对象时，简单的等号 (=) 可能会带来浅层拷贝的陷阱，导致后续操作意外影响源对象。那么，如何绕开这个陷阱，实现对象的深拷贝呢？

浅尝辄止的浅层拷贝

当我们使用等号 (=) 给对象赋值时，JavaScript 并没有创建对象的新副本，而只是将对原始对象的引用复制到新变量。这意味着对新变量所做的任何更改都会直接反映在原始对象上，反之亦然。

这种浅层拷贝在某些情况下很方便，但在其他情况下可能会带来问题，尤其是在处理嵌套对象或复杂数据结构时。

深入理解深拷贝

深拷贝，顾名思义，是创建对象的新副本，其中包含原始对象的所有数据以及嵌套对象的副本。这样一来，对新副本的修改不会影响原始对象。

在 JavaScript 中，有多种方法可以实现深拷贝：

使用扩展运算符（...）： 这种方法适用于简单对象，它将对象展开并创建新的对象。然而，对于包含引用类型的嵌套对象，它仍然会造成浅层拷贝。
使用 JSON.parse() 和 JSON.stringify()： 此方法通过将对象转换为 JSON 字符串，然后将其解析回对象来创建副本。但是，它可能会遗漏一些不可序列化的属性，例如函数和符号。
使用递归函数： 这种方法涉及编写一个递归函数，该函数遍历对象并创建新副本。它可以复制嵌套对象的引用类型。

实战指南

以下是使用递归函数实现深拷贝的步骤：

function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;  // 如果不是对象，直接返回
  }

  if (obj instanceof Array) {
    return obj.map(deepCopy);  // 如果是数组，使用 map 递归拷贝
  }

  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);  // 遍历对象，递归拷贝属性
  }
  return newObj;
}