JS 中如何实现深拷贝

在 JavaScript 中，深拷贝是指创建一个与原始对象具有相同属性值的新对象，但同时修改新对象的属性值不会影响到原始对象。浅拷贝则是创建一个新对象，但只复制原始对象的引用。

关于深拷贝的实现方法，我将提供以下几种解决方案和建议：

使用 JSON#

JSON.parse() 和 JSON.stringify() 这是实现深拷贝的最简单方法，但它有一些限制： - 仅适用于包含简单JSON格式数据的对象 - 不能处理函数、RegExp、Date等对象类型 - 不能处理对象中存在循环引用的情况

使用方法：

const deepClone = (obj) => JSON.parse(JSON.stringify(obj));

递归实现深拷贝#

递归实现深拷贝是一种更通用的方法，可以解决 JSON.parse 和 JSON.stringify 方法的一些限制。具体实现如下：

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null) return obj;
  if (typeof obj !== 'object') return obj;
  if (obj instanceof RegExp) return new RegExp(obj);
  if (obj instanceof Date) return new Date(obj);

  if (hash.has(obj)) return hash.get(obj);

  const result = new obj.constructor();

  hash.set(obj, result);

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = deepClone(obj[key], hash);
    }
  }

  return result;
}

使用 lodash 的 _.cloneDeep () 方法#

如果你已经使用了 lodash 这个库，那么可以很方便地使用它的 _.cloneDeep () 方法来实现深拷贝。

import _ from 'lodash';

const clonedObj = _.cloneDeep(originalObj);

这样的实现方法显然是建立在你已经导入 lodash 库的情况下。

使用库 deepmerge（适用于 React 和 Vue）
deepmerge 是一个适用于前端框架（如 React 和 Vue）的库，它可以帮助你方便地进行深拷贝。

首先，通过 npm 或 yarn 安装 deepmerge:

npm install deepmerge

或

yarn add deepmerge

然后在你的代码中导入并使用：

import deepmerge from 'deepmerge';

const newObj = deepmerge(obj1, obj2);

这里有很多种实现深拷贝的方法，根据你的实际情况选择合适的方法。如果你想要一个简单的解决方案且能处理循环引用的问题，推荐使用递归实现。如果你已经在项目中使用了 lodash 或需要兼容前端框架（如 React 和 Vue），那么使用库是一个更加方便的选择。