النسخ العميق في JavaScript: قوة structuredClone()

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.

---

مقدمة: وداعاً لمشاكل النسخ!

بعد أن فهمنا في الدرس السابق تحديات النسخ في JavaScript، خاصة مشكلة النسخ بالمرجع والنسخ السطحي مع الكائنات المتداخلة، حان الوقت لنتعرف على الحل الأمثل والأكثر فعالية: الدالة structuredClone(). هذه الدالة هي بطل النسخ العميق الذي يخلصك من كل تلك المشاكل!

تعرف على structuredClone(): بطل النسخ العميق

structuredClone() هي دالة مدمجة حديثة في JavaScript تتيح لك إنشاء نسخة عميقة (Deep Copy) لأي كائن. هذا يعني أنها تنسخ الكائن الأصلي وكل الكائنات المتداخلة بداخله بشكل مستقل تماماً. أي تغيير تجريه على النسخة لن يؤثر على الكائن الأصلي إطلاقاً.

مزايا لا تقدر بثمن لـ structuredClone():

• نسخ عميق حقيقي: تنسخ جميع المستويات المتداخلة للكائنات والمصفوفات.
• دعم أنواع البيانات المعقدة: تتعامل مع أنواع بيانات أكثر تعقيداً من مجرد الكائنات والمصفوفات، مثل Date، Map، Set، RegExp، ArrayBuffer، وحتى الكائنات التي تحتوي على مراجع دورية (Circular References) دون الوقوع في أخطاء.
• أمان وكفاءة: هي حل مدمج ومحسن من قبل المتصفح، مما يجعلها أكثر أماناً وكفاءة من الحلول اليدوية أو الحيل القديمة مثل JSON.parse(JSON.stringify(obj)) التي لها قيود كبيرة (مثل عدم دعم Date أو undefined).
• سهولة الاستخدام: واجهتها بسيطة جداً، مجرد استدعاء للدالة وتمرير الكائن إليها.

تطبيق عملي: النسخ العميق خطوة بخطوة

دعنا نرى كيف يمكننا استخدام structuredClone() لحل مشكلة النسخ العميق بشكل أنيق وفعال:

// الكائن الأصلي الذي يحتوي على بيانات متداخلة
const user = { 
  name: "أحمد", 
  details: { 
    age: 25, 
    city: "الرياض" 
  }
};

// ملاحظة: هذا السطر يوضح مشكلة النسخ بالمرجع التي تحدثنا عنها، وليس جزءاً من الحل
// const wrongCopy = user; // هذا ليس نسخاً حقيقياً! إذا عدلت wrongCopy سيتغير user

// الحل الحديث: دالة مساعدة لإنشاء نسخة عميقة باستخدام structuredClone()
function deepClone(obj) {
  return structuredClone(obj);
}

// إنشاء نسخة عميقة للكائن الأصلي باستخدام دالتنا
const perfectCopy = deepClone(user);

// لنقم بتعديل النسخة الجديدة (perfectCopy) لنثبت أنها منفصلة تماماً عن الأصل (user)
perfectCopy.name = "خالد";
perfectCopy.details.age = 30; // تعديل كائن متداخل

console.log("--- حالة الكائن الأصلي (user) ---");
console.log("الاسم:", user.name);           // النتيجة: أحمد (لم يتغير!)
console.log("العمر:", user.details.age);     // النتيجة: 25 (لم يتغير!)

console.log("\n--- حالة النسخة العميقة (perfectCopy) ---");
console.log("الاسم:", perfectCopy.name);           // النتيجة: خالد
console.log("العمر:", perfectCopy.details.age);     // النتيجة: 30

شرح الكود خطوة بخطوة:

1. الكائن الأصلي user: قمنا بتعريف كائن user يحتوي على خاصية name وكائن متداخل details.
2. الدالة deepClone(obj): هذه الدالة البسيطة هي كل ما تحتاجه للنسخ العميق. كل ما تفعله هو استدعاء structuredClone() وتمرير الكائن obj إليها.
3. إنشاء perfectCopy: نقوم باستدعاء deepClone(user) للحصول على نسخة عميقة من الكائن user. الآن، perfectCopy هو كائن جديد تماماً ومستقل عن user.
4. التعديل على perfectCopy: قمنا بتغيير name إلى "خالد" وتغيير details.age إلى 30 داخل perfectCopy.
5. النتائج في console.log:
   • لاحظ كيف بقي الكائن الأصلي user دون أي تغيير في اسمه أو عمره المتداخل.
   • في المقابل، تغيرت قيم perfectCopy بشكل مستقل تماماً.
   هذا يثبت أن عملية النسخ كانت عميقة وناجحة، وأن الكائنين منفصلان تماماً في الذاكرة!

متى تستخدم structuredClone()؟

استخدم structuredClone() كلما احتجت إلى نسخة مستقلة تماماً من كائن، خاصة إذا كان يحتوي على كائنات متداخلة، مصفوفات، كائنات Date، أو أي أنواع بيانات معقدة أخرى. إنها الأداة المثالية لـ:

• إنشاء حالات (States) جديدة في تطبيقات إدارة الحالة (مثل Redux).
• التعامل مع البيانات التي تحتاج إلى تعديلات مؤقتة دون التأثير على المصدر الأصلي.
• فصل البيانات بين المكونات المختلفة في تطبيقك.

ملاحظة هامة: تأكد من أن بيئة التشغيل (المتصفح أو Node.js) التي تستخدمها تدعم structuredClone(). لحسن الحظ، هي مدعومة في جميع المتصفحات الحديثة (Chrome, Firefox, Safari, Edge) وفي Node.js 17 فما فوق.

الخلاصة: قوة بين يديك!

مع structuredClone()، أصبح النسخ العميق في JavaScript أسهل وأكثر أماناً ومرونة من أي وقت مضى. لا داعي للقلق بشأن تأثير التعديلات على الكائنات الأصلية أو البحث عن حلول معقدة. هذه الدالة هي الحل الأمثل الذي يمنحك راحة البال والتحكم الكامل في بياناتك.