تعويذات إليس التحويلية

في JavaScript، يحتوي الصنف Array على طرق مدمجة قوية كثيرة لتحويل المصفوفات. تُسهّل هذه الطرق تحويل مصفوفة إلى أخرى بدرجة كبيرة مقارنة باستخدام حلقة for بسيطة أو التعامل المباشر مع المصفوفة.

بعض الطرق نقية، أي أنها لا تعدّل المصفوفة الأصلية، بل تُرجع مصفوفة جديدة بدلًا منها. أما طرق أخرى فتُعدّل المصفوفة التي استُدعيت عليها ولا تُرجع المصفوفة المعدّلة.

فيما يلي بعض الطرق الأكثر شيوعًا في تحويل المصفوفات. وتجد القائمة الكاملة بالطرق المتاحة في توثيق MDN.

map (نقية)

أنشئ مصفوفة جديدة بتحويل كل عنصر وفق دالة تُمرَّر كوسيط. وغالبًا ما تُكتب دوال الاستدعاء الراجعة هذه على هيئة دوال سهمية.

let arr = [1, 2, 3, 4];

const newArr = arr.map((value) => value - 1);
console.log(newArr);
// => [0, 1, 2, 3]
console.log(arr);
// => [1, 2, 3, 4]

تجدر الإشارة إلى أن المصفوفة الناتجة ستكون دائمًا بطول المصفوفة الأصلية نفسه.

filter (نقية)

تُنشئ مصفوفة بترشيح المصفوفة الحالية، بالاستناد إلى دالة ترشيح (تُرجع صحيحًا إذا وجب الاحتفاظ بالعنصر وخطأً إذا وجب حذفه).

let arr = [1, 2, 3, 4];

arr.filter((value) => value % 2 === 0);
// => [2, 4]

reduce (نقية)

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

let arr = [1, 2, 3, 4];

// Get the sum of elements
arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// => 10

// Classify the numbers by whether they are odd or not
arr.reduce(
  (accumulator, currentValue) => {
    if (currentValue % 2 === 0) {
      accumulator.even.push(currentValue);
    } else {
      accumulator.odd.push(currentValue);
    }

    return accumulator;
  },
  { even: [], odd: [] },
);
// => { even: [2, 4], odd: [1, 3] }

reverse

تعكس ترتيب عناصر المصفوفة.

const arr = [1, 2, 3, 4];

arr.reverse();
// => [4, 3, 2, 1]

تُعدّل هذه الطريقة المصفوفة التي استُدعيت عليها.

slice (نقية)

بالنظر إلى فهرس بداية وفهرس نهاية، تُنشئ مصفوفة فرعية من المصفوفة التي تُمرَّر كمعامل.

لن يُضمَّن العنصر الواقع عند فهرس النهاية. كذلك جميع المعاملات اختيارية: القيمة الافتراضية لفهرس البداية هي 0، والقيمة الافتراضية لفهرس النهاية هي طول المصفوفة.

const arr = [1, 2, 3, 4];

arr.slice(1, 2); // [2]
arr.slice(1); // [2, 3, 4]
// You can also use negative numbers, that represent the indexes
// starting from the end of the array
arr.slice(-2); // [3, 4]

splice

تحذف عناصر المصفوفة أو تستبدلها و/أو تضيف عناصر جديدة إليها.

وتأخذ المعاملات التالية:

• فهرس العنصر الذي يبدأ عنده تعديل المصفوفة
• عدد العناصر التي سيتم حذفها
• العناصر التي سيتم إدراجها في المصفوفة (اختياري)

وتُرجع splice العناصر التي حُذفت.

const arr = ['1', '2', '5', '6'];

// Insert an element at index 2
arr.splice(2, 0, '3');
console.log(arr);
// => ['1', '2', '3', '5', '6']

// Remove 2 elements, starting at index 3 and insert 2 elements
const removed = arr.splice(3, 2, '4', '5');
console.log(removed);
// => ['5', '6']
console.log(arr);
// => ['1', '2', '3', '4', '5']

// Remove 1 element at index 1
arr.splice(1, 1);
console.log(arr);
// => ['1', '3', '4', '5']

sort

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

const arr = ['c', 'a', 'z', 'b'];
const result = arr.sort();
console.log(result);
// => ['a', 'b', 'c', 'z']
console.log(arr);
// => ['a', 'b', 'c', 'z']

لتخصيص سلوك الترتيب، يمكنك تمرير دالة مقارنة كوسيط. تُستدعى دالة المقارنة نفسها بوسيطين هما عنصران من المصفوفة، ثم يجب أن تُرجع ما يلي:

• عددًا سالبًا إذا كان ينبغي ترتيب الوسيط الأول قبل الثاني
• عددًا موجبًا إذا كان ينبغي ترتيب الوسيط الأول بعد الثاني
• 0 إذا كان ينبغي أن يبقى ترتيب العناصر على حاله

وفيما يلي مثال على استخدام دالة مقارنة مخصصة لترتيب مصفوفة من الكائنات.

const arr = [
  { name: 'Lydia', age: 7 },
  { name: 'Anne', age: 34 },
  { name: 'Holger', age: 59 },
];

arr.sort((item1, item2) => {
  if (item1.name < item2.name) {
    return -1;
  }
  if (item1.name > item2.name) {
    return 1;
  }
  return 0;
});
// => [ { name: 'Anne', age: 34 }, { name: 'Holger', age: 59 },
// { name: 'Lydia', age: 7 } ]