structuredClone สำหรับสำเนาเชิงลึก

ปัญหาของสำเนาแบบลึก

เหตุใดการกระจายจึงไม่เพียงพอ

const original = { user: { name: 'Ada' } };
const shallow = { ...original };

shallow.user.name = 'Grace';
console.log(original.user.name);

structuredClone เข้ามาช่วยแก้ปัญหา

const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);

deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);

อ็อบเจ็กต์ที่ซ้อนกันเป็นอิสระต่อกัน

const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);

console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);

การทำสำเนาอาร์เรย์

const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);

clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);

รองรับ Map และ Set

const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);

clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);

รองรับการอ้างอิงแบบวนรอบ

const node = { name: 'root' };
node.self = node;

const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);

สิ่งที่ไม่สามารถทำสำเนาได้

try {
  structuredClone({ fn: () => 1 });
} catch (e) {
  console.log(e.name);
}

ต้นแบบจะไม่ถูกเก็บรักษาไว้

class Point {
  constructor(x) { this.x = x; }
  show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);

console.log(clone.x);
console.log(clone instanceof Point);

structuredClone เทียบกับเทคนิค JSON

const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);

console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);

เหตุใดเรื่องนี้จึงสำคัญ

const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน: structuredClone