اكتسبت المتصفحات مؤخرًا طريقة جديدة قابلة للتشغيل التفاعلي يمكنك استخدامها في المصفوفات:
Array.prototype.with().
تستكشف هذه المقالة كيف تعمل هذه الطريقة وكيفية استخدامها لتحديث صفيف دون تغيير الصفيف الأصلي.
مقدمة عن 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، لا ينسخ JavaScript الصفيف
بل ينشئ إشارة إلى الصفيفة الأخرى. لذلك، سيؤثر أي تغيير في أحدهما أيضًا
على الآخر لأنهما يشيران إلى نفس الصفيف.
Array.prototype.with() والثابتة
تُعد قابلية التغيّر أساس العديد من المكتبات وأطر الواجهة الأمامية، على سبيل المثال لا الحصر، التفاعل (و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)
طرق جديدة أخرى غير قابلة للتغيير
أصبحت ثلاث طرق أخرى مؤخرًا قابلة للتشغيل التفاعلي:
Array.prototype.toReversed()التي تعكس الصفيفة بدون تبديل الصفيف الأصلي.Array.prototype.toSorted()يفرز الصفيفة بدون تغيير الصفيف الأصلي.Array.prototype.toSpliced()التي تعمل مثل.splice()ولكن بدون تغيير الصفيفة الأصلية.
هذه الطرق الثلاث هي، وفقًا لـ MDN، نسخة نسخ نظيراتها. يمكن أيضًا استخدام هذه الطرق عندما تكون قابلية التغيير متوقعة أو مفضَّلة.
في الختام، يمكن إجراء التحديثات الثابتة بسهولة أكبر في JavaScript باستخدام إحدى الطرق الأربع الموضّحة في هذه المقالة. على وجه التحديد، تسهّل الطريقة .with() تحديث عنصر واحد من الصفيفة بدون تغيير الصفيف الأصلي.