به روز رسانی آرایه غیرقابل تغییر با Array.prototype.with

جاد جوبران

مرورگرها اخیراً یک روش تعاملی جدید به دست آورده اند که می توانید آن را روی Arrays فراخوانی کنید: Array.prototype.with() .

پشتیبانی مرورگر

  • 110
  • 110
  • 115
  • 16

منبع

این مقاله نحوه عملکرد این روش و نحوه استفاده از آن برای به روز رسانی یک آرایه بدون جهش در آرایه اصلی را بررسی می کند.

معرفی Array.prototype.with(index, value)

متد Array.prototype.with(index, value) یک کپی از آرایه فراخوانی شده با index تنظیم شده را به value جدیدی که شما ارائه می کنید برمی گرداند.

مثال زیر آرایه ای از سنین را نشان می دهد. می‌خواهید همزمان با تغییر سن دوم از 15 به 16، یک کپی جدید از آرایه ایجاد کنید:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

شکستن کد:: ages.with(...) یک کپی از متغیر ages را بدون تغییر آرایه اصلی برمی گرداند. ages.with(1, …) جایگزین مورد دوم می شود ( index = 1 ). ages.with(1, 16) مورد دوم را به 16 اختصاص می دهد.

به این ترتیب توانستید یک کپی جدید از آرایه با یک تغییر ایجاد کنید.

این زمانی بسیار مفید است که می‌خواهید مطمئن شوید که آرایه اصلی بدون تغییر باقی می‌ماند، و این مقاله برخی از موارد استفاده برای این را پوشش می‌دهد. اما، در حال حاضر، اگر از علامت براکت استفاده می‌کردید، به این موضوع نگاه کنید که چه اتفاقی می‌افتاد:

const ages = [10, 15, 20, 25];

const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)

همانطور که می بینید، متغیر ages نیز در این مثال اصلاح شده است. به این دلیل که وقتی ages = newAges را اختصاص می دهید، جاوا اسکریپت آرایه را کپی نمی کند، بلکه ارجاعی به آرایه دیگر ایجاد می کند. بنابراین، هر تغییری در یکی روی دیگری نیز تأثیر می گذارد زیرا هر دو به یک آرایه اشاره می کنند.

Array.prototype.with() و تغییرناپذیری

تغییرناپذیری در قلب بسیاری از کتابخانه ها و فریم ورک های فرانت اند قرار دارد که می توان به چند مورد اشاره کرد: React (و redux) و Vue.

همچنین، سایر کتابخانه‌ها و چارچوب‌ها لزوماً به تغییر ناپذیری نیاز ندارند، اما آن را برای عملکرد بهتر تشویق می‌کنند: Angular و Lit

بنابراین، توسعه‌دهندگان اغلب مجبور بودند از روش‌های دیگری استفاده کنند که کپی‌هایی از آرایه‌ها را برمی‌گرداند که خوانایی کد را قربانی می‌کرد:

const ages = [10, 15, 20, 25];

const newAges = ages.map((age, index) => {
    if (index === 1) {
         return 16;
    }
    return age;
});

console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)

در اینجا یک مثال Codepen از نحوه استفاده از .with() در React در ترکیب با useState برای به روز رسانی غیرقابل تغییر آرایه ای از آیتم ها آورده شده است:

از آنجایی که متد .with() یک کپی از آرایه را برمی گرداند، می توانید چندین فراخوانی .with() یا حتی روش های آرایه دیگر را زنجیره بزنید. مثال زیر افزایش سن دوم و سوم از آرایه را نشان می دهد:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)

console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

سایر روش های تغییرناپذیر جدید

سه روش دیگر اخیراً قابلیت همکاری دارند:

این سه روش، طبق گفته MDN، نسخه کپی از همتایان خود هستند. این روش ها همچنین می توانند در مواردی که تغییر ناپذیری مورد انتظار یا ترجیح داده می شود استفاده شوند.

در نتیجه، به روز رسانی های تغییرناپذیر را می توان با یکی از چهار روش ارائه شده در این مقاله به راحتی در جاوا اسکریپت به دست آورد. به طور خاص، متد .with() به روز رسانی یک عنصر واحد از آرایه را بدون جهش در آرایه اصلی آسان تر می کند.