[Medium] 手寫 cloneDeep (深拷貝)

2024年3月8日

💎 加入 E+ 成長計畫 與超過 500+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源

題目描述

在 JavaScript 複製值時,當複製的是非原始型別 (primitive type) 的資料型別時,例如:物件(object)、陣列 (array) 等,會遇到淺拷貝 (shallow copy) 和深拷貝 (deep copy) 的差異。在面試時被很常會要你當場手寫深拷貝,也就是手寫 Lodash 常見的 cloneDeep

所謂的深拷貝是指在拷貝時,物件 A 與物件 B 不同,兩者在原型鏈上僅是結構相同,但其屬性實際的地址不同。在拷貝值時,有可能會遇到變數是多層的情境,例如是一個物件裡還有物件,深拷貝的定義會是每一層的值都不會共享址 (reference)。

具體來說,以 lodash 這個套件提供的效用函式為例,有分成  clone  和  cloneDeep  兩種不同效用函式,clone  只用於淺拷貝(第一層拷貝),但  cloneDeep  可用於深拷貝。下面的例子說明兩者的區別:

// lodash 的淺拷貝 clone
var objects = [{ a: 1 }, { b: 2 }];
var shallow = _.clone(objects);
console.log(objects === shallow); // false
console.log(shallow[0] === objects[0]); // true

// lodash 的深拷貝 cloneDeep
var objects = [{ a: 1 }, { b: 2 }];
var deep = _.cloneDeep(objects);
console.log(objects === deep); // false
console.log(deep[0] === objects[0]); // false

本題解答

以下是本題的解答,詳細解題思路可以在 E+ 成長計畫看到。如果想練習更多題目,推薦可以到 GreatFrontEnd 上練習

解法一

let objA = {
  a: 1,
  b: { c: 3 },
};

function cloneDeep(item) {
  return JSON.parse(JSON.stringify(item));
}

let objB = deepCopy(objA);

console.log(objA === objB); // false
console.log(objA.b === objB.b); // false

解法二

let objA = {
  a: 1,
  b: { c: 3 },
};

let objB = structuredClone(objA);

console.log(objA === objB); // false
console.log(objA.b === objB.b); // false

解法三

function deepClone(obj, cache = new WeakMap()) {
  if (cache.has(obj)) {
    return cache.get(obj);
  }

  if (obj === null || typeof obj !== "object" || typeof value === "function") {
    return obj;
  }

  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);

  const result = Array.isArray(obj)
    ? []
    : Object.create(Object.getPrototypeOf(obj));

  cache.set(obj, result);

  for (const key of Reflect.ownKeys(obj)) {
    const value = obj[key];
    result[key] = deepClone(value, cache);
  }

  return result;
}
🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們