為什麼推薦用 structuredClone 在 JavaScript 做深拷貝？

什麼是 structuredClone？

structuredClone() 是瀏覽器和 Node.js（v17+）內建的深拷貝 API，使用 Structured Clone Algorithm 實作。

const original = { a: 1, b: { c: [1, 2, 3] }, d: new Date() };
const clone = structuredClone(original);

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

為什麼推薦 structuredClone？

與 JSON.parse(JSON.stringify()) 相比

特性	JSON 方法	structuredClone
Date	轉成字串（破壞）	✅ 正確複製
undefined	遺失	✅ 保留
Map / Set	轉成 {} / []	✅ 正確複製
RegExp	轉成 {}	✅ 正確複製
ArrayBuffer	無法處理	✅ 正確複製
循環引用	拋出錯誤	✅ 正確處理
function	遺失	❌ 無法複製
Symbol	遺失	❌ 無法複製

範例：Date 處理

const obj = { date: new Date() };

// JSON 方法（有問題）
const bad = JSON.parse(JSON.stringify(obj));
console.log(bad.date instanceof Date); // false（變成字串）

// structuredClone（正確）
const good = structuredClone(obj);
console.log(good.date instanceof Date); // true

範例：循環引用

const a = { name: 'circular' };
a.self = a; // 循環引用

// JSON 方法
JSON.parse(JSON.stringify(a)); // TypeError: Converting circular structure to JSON

// structuredClone
const clone = structuredClone(a); // 正確處理！

限制

• 無法複製函式（function）
• 無法複製 Symbol
• 無法複製 DOM 節點
• 無法複製 class 實例的方法（只複製 own properties）

瀏覽器支援

現代瀏覽器（Chrome 98+、Firefox 94+、Node.js 17+）均已支援。舊版環境需使用 lodash.cloneDeep 等替代方案。