JavaScript 中的淺拷貝 (shallow copy) 和深拷貝 (deep copy) 差別是什麼？要如何實踐？

核心差別

	淺拷貝	深拷貝
第一層屬性	複製值	複製值
巢狀物件/陣列	共用參考	遞迴複製新物件
修改巢狀內容	會影響原物件	不會影響原物件

淺拷貝（Shallow Copy）

方法一：Object.assign()

const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);

copy.b.c = 99;
console.log(original.b.c); // 99（原物件被影響！）

方法二：Spread 運算子

const copy = { ...original };
const arrCopy = [...originalArr];

方法三：Array.prototype.slice()

const copy = originalArr.slice();

深拷貝（Deep Copy）

方法一：JSON.parse(JSON.stringify())（最簡單，但有限制）

const original = { a: 1, b: { c: [1, 2, 3] } };
const deep = JSON.parse(JSON.stringify(original));

deep.b.c.push(4);
console.log(original.b.c); // [1, 2, 3]（不受影響）

限制：

• 無法處理 undefined、function、Symbol
• 無法處理循環引用（會報錯）
• 無法處理 Date、Map、Set 等特殊物件

方法二：structuredClone()（ES2022，推薦）

const deep = structuredClone(original);

支援更多資料型別，可處理循環引用。

方法三：遞迴手動實現

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (Array.isArray(obj)) return obj.map(deepClone);
  
  return Object.fromEntries(
    Object.entries(obj).map(([k, v]) => [k, deepClone(v)])
  );
}

方法四：第三方函式庫

import cloneDeep from 'lodash/cloneDeep';
const deep = cloneDeep(original);