javascriptShallow object copyکپی شیء در جاوااسکریپت
کپی شیء در جاوااسکریپت را با spread یاد بگیرید؛ تفاوت انتساب، کپی سطحی و مرجع مشترک دادهٔ تو در تو را با پیش‌نویس تنظیمات بررسی کنید.
مفهوم به زبان ساده
برای ویرایش اطلاعات در یک فرم، معمولاً می‌خواهیم پیش‌نویسی داشته باشیم که بتوان آن را کنار گذاشت. نوشتن draft = source شیء تازه‌ای نمی‌سازد؛ هر دو نام می‌توانند به همان داده اشاره کنند. گسترش ویژگی‌ها در یک شیء تازه، مانند {...source}، نسخه‌ای از ویژگی‌های قابل شمارشِ خود منبع می‌سازد. این کار برای تغییر فیلدهای سادهٔ سطح اول مفید است.
در مثال، عنوان نسخهٔ سطحی عوض می‌شود ولی عنوان منبع همان مقدار قبلی می‌ماند. با این حال settings در هر دو نسخه به یک شیء مشترک اشاره می‌کند. این همان معنی کپی سطحی است. برای تغییر theme بدون تغییر تنظیمات منبع، سطح settings را هم جدا می‌سازیم. از روی این ساختار می‌توان فهمید کدام بخش داده قرار است جایگزین شود.
لازم نیست برای هر ویرایش کوچک، همهٔ داده‌های برنامه را عمیق کپی کنیم. مسیر تغییر و نوع داده باید روشن باشد. تبدیل رفت‌وبرگشتی JSON هم کپی عمومی همهٔ نوع‌های جاوااسکریپت نیست. spread نمونهٔ کلاس، روش‌ها و ویژگی‌های غیرقابل شمارش را عیناً بازسازی نمی‌کند. برای تمرین، پیش‌نویس را بسازید، مقدار آن را تغییر دهید و بعد کنار بگذارید؛ بررسی کنید منبع واقعاً دست‌نخورده باقی مانده باشد.
کجا به کار می‌آید؟
- ساخت پیش‌نویس فرم با امکان انصراف از تغییر
- جایگزینی آگاهانهٔ یک فیلد یا یک بخش تو در تو
از تعریف تا یک مثال واقعی
const source = { title: 'دوره', settings: { theme: 'light' } };
const shallow = { ...source, title: 'نسخه دوم' };
console.log(source.title);
console.log(shallow.settings === source.settings);
const draft = {
...source,
settings: { ...source.settings, theme: 'dark' }
};
console.log(source.settings.theme);
console.log(draft.settings.theme);
دوره true light dark
این مثال چطور کار می‌کند؟
spread شیء بیرونی تازه می‌سازد و عنوان منبع تغییر نمی‌کند.
مقایسهٔ settings نشان می‌دهد کپی اول این شیء داخلی را مشترک نگه داشته است.
در draft سطح settings نیز تازه ساخته شده؛ theme منبع light و پیش‌نویس dark است.
اشتباه رایج
کپی سطحی را مستقل‌بودن همهٔ داده‌های درونی ندانید. تغییر shallow.settings.theme در همین نمونه از طریق منبع هم دیده خواهد شد.
این را به خاطر بسپارید
برای کپی درست، مسیر داده‌ای را که تغییر می‌کند بشناسید؛ شیء بیرونی تازه، همهٔ مرجع‌های داخلی را تازه نمی‌کند.