ویرگول
ورودثبت نام
کامران داور
کامران داور
خواندن ۲ دقیقه·۱ سال پیش

کلون گرفتن از یک آبجکت در جاوا اسکریپت

تو این مقاله میخوام به این سوال جواب بدم که چطور میشه از یه آبجکت یک کپی مستقل ایجاد کرد یا clone گرفت. مستقل بودن به معنای اینکه هر آبجکت یک آدرس جداگونه در مموری داشته باشه. که اصطلاحا بهش میگن deep copy.
روش اول : for in loop

let user = { name: &quotJohn&quot, age: 30 }; let clone = {}; for (let key in user) { clone[key] = user[key]; }

روش دوم : Object.assign

let user = { name: &quotJohn&quot, age: 30 }; let clone = Object.assign({}, user);

روش سوم: Spread operator

let user = { name: &quotJohn&quot, age: 30 }; let clone = {...user};

اینجا یه نکته ظریف وجود داره و اونم اینکه آبجکت user یک سطح بیشتر نداره اما اگه ما یه nested Object داشته باشیم آیا روش های بالا جواب میدن؟
یکیشو بررسی میکنیم:

let user= { name: &quotJohn&quot, sizes: { height: 182, width: 50 } }; let clone = Object.assign({}, user); alert( user.sizes === clone.sizes ); // true, same object // user and clone share sizes user.sizes.width = 60; // change a property from one place alert(clone.sizes.width); // 60, get the result from the other one

همونطور که میبنید تغییر width در user باعث تغییر width در clone شده. و این یعنی اینکه deep copy برای sizes اتفاق نیافتاده.
پس برای اینکه بتونیم یک deep copy از یه nested object ایجاد کنیم این روش ها به کارمون نمیاد. و باید از روش های زیر استفاده کنیم:
روش چهارم: structuredClone (For nested objects)

let user = { name: &quotJohn&quot, sizes: { height: 182, width: 50 } }; let clone = structuredClone(user);

روش پنجم : cloneDeep from lodash library

let user = { name: &quotJohn&quot, sizes: { height: 182, width: 50 } }; let clone = _.cloneDeep(user);

پایان
منابع:


1- https://javascript.info/object-copy

2- Object copy using Spread operator actually shallow or deep?

javascriptreactvuenodejsangular
برنامه نویس سمت کاربر (Front-end web developer)
شاید از این پست‌ها خوشتان بیاید