جدول المحتويات

• مقدمة
• فهم واستخدام الاستنساخ المنظم
• خاتمة

مقدمة

هل سبق لك أن حاولت نسخ كائن في Javascript باستخدام عامل الانتشار (...)، لكنك أدركت أن التغييرات التي يتم إجراؤها على الأصل لا تزال تؤثر على النسخة؟ قد يكون الأمر محبطًا عندما تتوقع نسخة مستقلة عن النسخة الأصلية ولكن ينتهي بك الأمر بالحصول على نسخة مرتبطة بالأصل. هذه مشكلة شائعة عند التعامل مع الكائنات العميقة، ويمكن أن تؤدي إلى أخطاء غير متوقعة. لحسن الحظ، جافا سكريبت لديها طريقة StructuredClone() لحل هذه المشكلة

فهم واستخدام StructuredClone()

للبدء، يتم استخدام طريقة StructuredClone() في Javascript لعمل نسخ عميقة من الكائنات، بما في ذلك تلك ذات الهياكل المتداخلة مثل المصفوفات والكائنات وأنواع البيانات المعقدة الأخرى.

ربما تتساءل: ما هي بالضبط النسخة، وكم عدد أنواع النسخ الموجودة لدينا في JavaScript؟ حسنًا، لدينا النسخ الضحلة والعميقة. على الرغم من أننا نعلم أن StructuredClone()‎ ينشئ الأخير، فإن استخدام عامل الانتشار ينشئ الأول.

نسخة سطحية تنسخ فقط خصائص المستوى الأعلى للكائن، مما يعني أنه لا يزال يتم الرجوع إلى الكائنات أو المصفوفات المتداخلة من الأصل. من ناحية أخرى، تعمل النسخة العميقة على تكرار كل شيء، بما في ذلك الهياكل المتداخلة، مما يضمن أن يكون النسخ مستقلاً تمامًا عن الأصل وعنه.

دعونا نرى بعض الأمثلة على النسخ الضحلة والعميقة في جافا سكريبت

مثال للنسخة الضحلة

شخص ثابت = { الاسم: "جون دو"، اللغات: [ "إنجليزي"، "الألمانية" ] }; const personClone = {...person}; // نسخة ضحلة // تعديل مصفوفة اللغات في الكائن المستنسخ personClone.languages.push("الإسبانية"); // تحقق من الكائن الأصلي والمستنسخ console.log(person.languages); // الإخراج: ["الإنجليزية"، "الألمانية"، "الإسبانية"] console.log(personClone.languages); // الإخراج: ["الإنجليزية"، "الألمانية"، "الإسبانية"] console.log(person.languages ​​=== personClone.languages) // صحيح // ومع ذلك، فإن تغيير القيمة الأولية لن يؤثر على القيمة الأصلية personClone.name = "جين دو"؛ console.log(person.name); // الإخراج: "جون دو" console.log(personClone.name); // الإخراج: "جين دو" console.log(person.name === personClone.name) // خطأ

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

const personClone = {...person}; // shallow copy

// Modify the languages array in the cloned object
personClone.languages.push("Spanish");

// Check the original and the cloned object
console.log(person.languages);  // Output: ["English", "German", "Spanish"]
console.log(personClone.languages);  // Output: ["English", "German", "Spanish"]
console.log(person.languages === personClone.languages) // true

// However, changing a primitive value won't affect the original
personClone.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(personClone.name);  // Output: "Jane Doe"
console.log(person.name === personClone.name) // false

من الكود أعلاه يمكننا أن نقول ما يلي:

الخاصية
• name هي قيمة أولية، لذا فإن تغييرها في النسخة السطحية (personClone.name = "Jane Doe";) لا يؤثر على الأصل (person.name)
مصفوفة
• اللغات غير بدائية، لذلك يشترك كل من الأصل (الشخص) والمستنسخ (personClone) في نفس المرجع. تعديل مصفوفة personClone يؤثر على مصفوفة الشخص الأصلية

مثال للنسخة العميقة

شخص ثابت = { الاسم: "جون دو"، اللغات: [ "إنجليزي"، "الألمانية" ] }; // قم بإنشاء نسخة عميقة باستخدام StructuredClone const DeepClonedPerson = StructuredClone(person); // تعديل الكائن المستنسخ العميق DeepClonedPerson.languages.push("Spanish"); // تحقق مما إذا كان الأصل والاستنساخ العميق متساويين console.log(person === DeepClonedPerson); // الإخراج: خطأ console.log(person.languages) // ["الإنجليزية"، "الألمانية"] console.log(deepClonedPerson.languages) // ["الإنجليزية"، "الألمانية"، "الإسبانية"] console.log(person.languages ​​=== DeepClonedPerson.languages); // الإخراج: خطأ // تحقق مما إذا كانت الخصائص متساوية console.log(person.name === DeepClonedPerson.name); // الإخراج: خطأ // التغييرات في الكائن المستنسخ العميق لا تؤثر على الأصل DeepClonedPerson.name = "جين دو"؛ console.log(person.name); // الإخراج: "جون دو" console.log(deepClonedPerson.name); // الإخراج: "جين دو"

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

const personClone = {...person}; // shallow copy

// Modify the languages array in the cloned object
personClone.languages.push("Spanish");

// Check the original and the cloned object
console.log(person.languages);  // Output: ["English", "German", "Spanish"]
console.log(personClone.languages);  // Output: ["English", "German", "Spanish"]
console.log(person.languages === personClone.languages) // true

// However, changing a primitive value won't affect the original
personClone.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(personClone.name);  // Output: "Jane Doe"
console.log(person.name === personClone.name) // false

من الكود أعلاه نستنتج ما يلي:

person === يؤكد DeepClonedPerson أن StructuredClone() ينشئ كائنًا جديدًا ومستقلًا.
person.languages ​​=== يوضح DeepClonedPerson.languages ​​أن المصفوفة المتداخلة يتم نسخها بشكل مستقل أيضًا.
التحقق من person.name === DeepClonedPerson.name يتحقق من أن التغييرات التي يتم إجراؤها على الاستنساخ العميق لا تؤثر على الكائن الأصلي.
توضح قيم اللغات أن التعديلات على الاستنساخ العميق (deepClonedPerson) لا تنعكس في الأصل (الشخص)

خاتمة

في هذه المقالة، اكتشفنا كيف توفر طريقة StructuredClone() طريقة موثوقة لإنشاء نسخ عميقة من الكائنات، مما يضمن أن الهياكل المتداخلة مستقلة تمامًا عن الأصل.

شكرًا لك على قراءة هذا المقال. إذا وجدت هذه المقالة مفيدة، فيرجى الإعجاب بها ومشاركتها مع الآخرين الذين قد يستفيدون من التعرف على النسخ العميق في Javascript

ما هو رأيك في هذا الموضوع؟ هل واجهت تقنيات أخرى لنسخ الكائنات في Javascript؟ لا تتردد في مشاركة أفكارك في قسم التعليقات أدناه.

ملاحظة أنا أبحث حاليًا عن فرص لمطوري الواجهة الأمامية. إذا كان لديك أي عملاء متوقعين أو كنت تقوم بالتوظيف، فلا تتردد في الاطلاع على سيرتي الذاتية أو التواصل معي على LinkedIn. أحب أن أسمع منك!