تو این مقاله میخوام به این سوال جواب بدم که چطور میشه از یه آبجکت یک کپی مستقل ایجاد کرد یا clone گرفت. مستقل بودن به معنای اینکه هر آبجکت یک آدرس جداگونه در مموری داشته باشه. که اصطلاحا بهش میگن deep copy.
روش اول : for in loop
let user = { name: "John", age: 30 }; let clone = {}; for (let key in user) { clone[key] = user[key]; }
روش دوم : Object.assign
let user = { name: "John", age: 30 }; let clone = Object.assign({}, user);
روش سوم: Spread operator
let user = { name: "John", age: 30 }; let clone = {...user};
اینجا یه نکته ظریف وجود داره و اونم اینکه آبجکت user یک سطح بیشتر نداره اما اگه ما یه nested Object داشته باشیم آیا روش های بالا جواب میدن؟
یکیشو بررسی میکنیم:
let user= { name: "John", 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: "John", sizes: { height: 182, width: 50 } }; let clone = structuredClone(user);
روش پنجم : cloneDeep from lodash library
let user = { name: "John", 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?