تعديلات مصفوفة غير قابلة للتغيير باستخدام Array.prototype.with

حصلت المتصفحات مؤخرًا على طريقة جديدة قابلة للتشغيل التفاعلي يمكنك استدعاؤها من خلال المصفوفات: Array.prototype.with()

دعم المتصفح

  • Chrome: 110.
  • الحافة: 110.
  • Firefox: 115.
  • Safari: 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، لا تنسخ JavaScript الصفيف ولكن بل مرجعًا للصفيف الآخر. لذلك، سيؤدي أي تغيير في واحد أيضًا تؤثر على الصفيف الآخر حيث أن كلاهما يشير إلى نفس الصفيفة.

Array.prototype.with() وقابلية التغيير

عدم التغير هي أساس العديد من مكتبات وأُطر الواجهات الأمامية، على سبيل المثال بعضها: React (وإعادة التشغيل) و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)

في ما يلي مثال على رمز برمجي يوضّح كيفية استخدام .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، هي نسخة نسخ نظرائها. كما يمكن استخدام هذه الطرق حيث يُتوقع عدم التغير أو المفضلة.

وفي الختام، يمكن إجراء التحديثات غير القابلة للتغيير بسهولة أكبر في لغة JavaScript باستخدام إحدى الطرق الأربع المعروضة في هذه المقالة. على وجه التحديد، تُسهّل طريقة .with() تعديل عنصر واحد من المصفوفة دون تبديل الصفيفة الأصلية.