• ما هو StructuredClone()؟

  • StructuredClone() هي وظيفة عالمية تم تقديمها في عام 2022 تتيح الاستنساخ العميق لكائنات JavaScript. على عكس الطرق التقليدية مثل JSON.stringify() وJSON.parse()، التي تواجه صعوبات في التعامل مع الهياكل المعقدة والمراجع الدائرية، فإن StructuredClone() تتعامل مع هذه التحديات دون عناء.

• لماذا يغير قواعد اللعبة؟

  • إنها أداة قوية لإنشاء نسخ عميقة حقيقية، والحفاظ على سلامة الكائنات المتداخلة والمراجع الدائرية دون الحاجة إلى منطق إضافي أو حلول بديلة. بالإضافة إلى ذلك، فهو متوفر في البيئات الحديثة، بما في ذلك Web Workers.

1. استنساخ كائن بسيط: الأساسيات

• استخدام {...obj} (نسخة سطحية)

  const original = { name: "Alice", details: { age: 25 } };
  const shallowCopy = { ...original };

  shallowCopy.details.age = 30;

  console.log(original.details.age); // 30
  console.log(shallowCopy.details.age); // 30

• ماذا يحدث؟

  • يقوم عامل الانتشار {...obj} بإنشاء نسخة سطحية فقط. لم يتم استنساخ كائن التفاصيل بعمق، لذا فإن التغييرات التي يتم إجراؤها على tinyCopy.details تؤثر على التفاصيل الأصلية أيضًا.
  • استخدام JSON.stringify() JSON.parse() (نسخة عميقة)

  const original = { name: "Alice", details: { age: 25 } };
  const deepCopy = JSON.parse(JSON.stringify(original));

  deepCopy.details.age = 30;

  console.log(original.details.age); // 25
  console.log(deepCopy.details.age); // 30

• ماذا يحدث؟

  • تنشئ هذه الطريقة نسخة عميقة، ولكن لها قيود: لا يمكنها التعامل مع الوظائف أو المراجع غير المحددة أو الدائرية.
  • استخدام StructuredClone() (نسخة عميقة)

  const original = { name: "Alice", details: { age: 25 } };
  const clone = structuredClone(original);

  clone.details.age = 30;

  console.log(original.details.age); // 25
  console.log(clone.details.age); // 30

• ماذا يحدث؟
  • يُنشئ StructuredClone() نسخة عميقة، ويحافظ على البنية دون أي من قيود JSON.stringify() ويتعامل مع أنواع البيانات المعقدة مثل المراجع الدائرية وغير المحددة.

2. التعامل مع المراجع الدائرية: التحدي

• مرجع دائري مع {...obj}

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• ماذا يحدث؟

  • لا يستطيع {...obj} التعامل مع المراجع الدائرية، مما يؤدي إلى حدوث خطأ.
  • مرجع دائري مع JSON.stringify()

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const jsonCopy = JSON.parse(JSON.stringify(original)); // TypeError: Converting circular structure to JSON

• ماذا يحدث؟

  • يفشل JSON.stringify() أيضًا مع المراجع الدائرية، مما يؤدي إلى حدوث خطأ.
  • مرجع دائري مع StructuredClone()

  const original = { name: "Alice" };
  original.self = original;

  const clone = structuredClone(original);

  console.log(clone !== original); // true
  console.log(clone.self === clone); // true

• ماذا يحدث؟
  • يتعامل StructuredClone()‎ مع المراجع الدائرية بسلاسة، مما يؤدي إلى إنشاء نسخة عميقة مناسبة بدون أخطاء.

3. الاستنساخ بوظائف وغير محددة: اختبار آخر

• استخدام {...obj}

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const shallowCopy = { ...original };

  console.log(shallowCopy.greet()); // "Hello!"
  console.log(shallowCopy.value); // undefined

• ماذا يحدث؟

  • يقوم {...obj} بنسخ الوظائف وغير المحددة كما هو متوقع، ولكن بشكل سطحي فقط.
  • باستخدام JSON.stringify()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const jsonCopy = JSON.parse(JSON.stringify(original));

  console.log(jsonCopy.greet); // undefined
  console.log(jsonCopy.value); // undefined

• ماذا يحدث؟

  • لا يمكن لـ JSON.stringify() إجراء تسلسل للوظائف أو عدم تعريفها، مما يؤدي إلى فقدانها في الكائن المستنسخ.
  • استخدام StructuredClone()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const clone = structuredClone(original);

  console.log(clone.greet); // undefined
  console.log(clone.value); // undefined

• ماذا يحدث؟
  • لا تقوم StructuredClone() أيضًا باستنساخ الوظائف ولكنها تحافظ على قيم غير محددة، مما يجعلها أكثر موثوقية من JSON.stringify() للكائنات المعقدة.

4. السرعة والكفاءة: ملاحظة الأداء

• الكفاءة مع البيانات الكبيرة

  const largeArray = new Array(1e6).fill({ key: "value" });

  console.time("structuredClone");
  const clone = structuredClone(largeArray);
  console.timeEnd("structuredClone");

  console.time("JSON.stringify   JSON.parse");
  const jsonCopy = JSON.parse(JSON.stringify(largeArray));
  console.timeEnd("JSON.stringify   JSON.parse");

• ماذا يحدث؟
  • غالبًا ما يكون StructuredClone() أسرع من JSON.stringify() JSON.parse() للبيانات الكبيرة والمعقدة، ويتجنب مخاطر التسلسل وإلغاء التسلسل.

5. الخلاصة: لماذا يعتبر StructuredClone() هو المستقبل

• الموثوقية: يتعامل مع المراجع الدائرية والوظائف والقيم غير المحددة بشكل أكثر توقعًا.
• الكفاءة: إجراء استنساخ عميق بشكل أسرع لمجموعات البيانات الكبيرة ولا يتطلب حلولاً بديلة.
• البساطة: طريقة واحدة للحكم عليها جميعًا - لا مزيد من الاختيار بين {...obj} أو JSON.stringify() أو وظائف النسخ العميق المخصصة.