如何在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），那麼使用庫是一個更加方便的選擇。