كيفية نسخ كائن Object بالكامل في جافاسكريبت JavaScript؟

يوجد العديد من الطرق التي تُمكنك من نسخ clone كائن بالكامل، من ضمن هذه الطرق:

إستخدام JSON

const clone = JSON.parse(JSON.stringify(myObj));

تفي هذه الطريقة بالغرض عند التعامل مع الكائنات البسيطة (التي لا تحتوي على توابع Methods)، ولكن سيظهر خطأ TypeError إذا كان الكائن myObj يحتوي على أي توابع Methods.

طريقة Shallow Copy

const shallowClone = { ...myObj };

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

إستعمال مكتبة jQuery

مثل مكتبة lodash توفر jQuery التابع extend والذي يقوم بنسخ الكائن بشكل كامل أيضًا:

var clone = $.extend(true, {}, myObj);

ستعمال مكتبة Lodash

توفر مكتبة lodash الكثير من التوابع للتعامل مع الكائنات بشكل عام، ومن ضمن هذه التوابع يوجد التابع clone والذي يوفر إمكانية نسخ كائن بالكامل بطريقة سهلة وبسيطة:

var clone = _.clone(myObj);

لا يوجد فرق بين طريقة shallow clone السابقة والتابع clone، ولكن توفر lodash أيضًا تابع باسم cloneDeep والذي يقوم بنسخ الكائن بالكامل وليس مجرد نسخ سطحي:

var clone = _.cloneDeep(myObj);

بجانب الطرق التي اقترحها المدرب سامح، يمكنك الاستفادة من طريقة النسخ المنظم أو المهيكل structured cloning عن طريق الوظيفة الجديدة structuredClone الموجودة في جافاسكربت كالتالي: 

var newObj = structuredClone(myObj);

مثال: 

/*الكائن الأصلي*/
var myObj = {a: 1, b: 2, c: 3}

/*نسخة عن الكائن*/
var newObj = structuredClone(myObj)

/*استعراض النسخة أول الأمر*/
console.log(newObj)

/*تغيير خاصية بالكائن الاصلي واعادة استعراض الكائنين*/ 
setTimeout(() => {
    myObj.a = 5
    
    
    console.log(myObj , newObj)
} ,2000)

مثال عملي.