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

لا شك بأن عملية ترتيب عناصر المصفوفة مهمة في جافاسكربت، و لا شك بأنّه سيأتي يوم و نحتاج لعملها و ضبطها، و من الجيد بأن جافاسكربت توفر built-in method لـ sort، و ما أود إضافته هنا طُرق ضبط إعادة الترتيب من خلال compareFn التي تُمرر لـ sort، و قبل البدء في الطرق الأخرى لأضع هنا مثال أوّلي لاستخدام sort :

const numArr = [1, 11, 7, 100, 0, 44];
numArr.sort();
console.log(numArr);

سيكون المخرج كالتالي :

[ 0, 1, 100, 11, 44, 7 ]

دالة compareFn

كما نلاحظ بأن الترتيب لم يكن تصاعديًا، بل هو يعتمد بشكل إفتراضي على ترتيب الأبجدي، و من أجل ضبط الترتيب فمن جيد بأن sort تستقبل معامل إختياري ( optional parameter ) من نوع دالة للمقارنة ( compareFn ) تستقبل أيضًا معاملين الأول يمثّل العنصر الأول و الثاني العنصر الذي يليه، و الآن لنبدأ في ضبط الترتيب للأرقام!

ضبط ترتيب الأرقام

من أجل ضبط ترتيب العناصر الرقمية تصاعديًا يمكننا تمرير دالة ( Function ) لـ sort بالطريقة التالية :

const numArr = [1, 11, 7, 100, 0, 44];
numArr.sort((a, b) => a - b);
console.log(numArr);

الآن أصبح المُخرج مرتب ترتيبًا تصاعديًا :

[ 0, 1, 7, 11, 44, 100 ]

ماذا لو أردنا أن نرتبها ترتيبًا تنازليًا ؟ سيكون الكود كالتالي :

const numArr = [1, 11, 7, 100, 0, 44];
numArr.sort((a, b) => b - a);
console.log(numArr);

حيث ستصبح النتيجة كالتالي :

[ 100, 44, 11, 7, 1, 0 ]

ترتيب النصوص strings تنازليًا

يمكننا ترتيب العناصر النصية من z إلى a و هنا نحتاج إلى تعديل بسيط للدالة الممررة حتى نضبط آلية الترتيب التنازلي بحيث يكون الكود كالتالي :

const studentsArr = ['Ahmad', 'Suleiman', 'Yazeed', 'Mazen', 'Ali'];
studentsArr.sort((a, b) => b > a ? 1 : -1);
console.log(studentsArr);

و ستصبح النتيجة كالتالي :

[ 'Yazeed', 'Suleiman', 'Mazen', 'Ali', 'Ahmad' ]

ملاحظة : يمكن ترتيب العناصر النصية التي تحتوي على حروف عربية أيضًا بنفس الطريقة

التعامل مع الحروف non-ascii

في حال كانت توجد كلمات أو مسميات بأحرف لاتينية أو غير إنجليزية "الحروف و الرموز الغير موجودة ب جدول آسكي" يمكن التعامل معها من خلال localeCompare و هنا مثال عليها :

const items = ["réservé", "premier", "communiqué", "café", "adieu", "éclair"];
items.sort((a, b) => a.localeCompare(b));

و النتيجة ستكون كالتالي :

['adieu', 'café', 'communiqué', 'éclair', 'premier', 'réservé']

تم استخدام مثال موجود في وثائق mozilla

ترتيب مصفوفة مكوّنة من عناصر objects

الأمر لا يقتصر على أنواع string - number، بل يمكن ترتيب مصفوفة تحتوي على عناصر من نوع date أو object و غيرها، فمن ممكن ترتيب مصفوفة objects بناءً على مفتاح تحدّده و موجود بالكائنات objects، على سبيل المثال ليكون لدينا مصفوفة تحتوي على عناصر objects لمجموعة ألعاب :

const gamesArr = [
    {
        id: 1,
        name: 'Metal gear solid',
        stars: 5,
        release_date : '1998-09-03T17:15:36.479Z'
    },
    {
        id: 2,
        name: 'Silent hill',
        stars: 4.4,
        release_date : '1999-02-23T17:15:36.479Z'
    },
    {
        id: 3,
        name: 'Crash bandicoot',
        stars: 4,
        release_date:'1996-09-09T17:15:36.479Z'
    },
    {
        id: 4,
        name: 'Resident evil',
        stars: 4.7,
        release_date:'1996-03-22T17:15:36.479Z'
    }
]

كما نلاحظ في المصفوفة السابقة لدى كل كائن ( object ) 4 مفاتيح، و هي id - name - stars - release_date، و لنفترض بأننا نرغب بترتيب المصفوفة بناءً على اسم اللعبة "ترتيبًا أبجديًا فسيكون الأمر كالتالي :

gamesArr.sort((a, b) => a.name > b.name ? 1 : -1);
console.log(gamesArr);

و ستصبح النتيجة كالتالي :

[
  {
    id: 3,
    name: 'Crash bandicoot',
    stars: 4,
    release_date: '1996-09-09T17:15:36.479Z'
  },
  {
    id: 1,
    name: 'Metal gear solid',
    stars: 5,
    release_date: '1998-09-03T17:15:36.479Z'
  },
  {
    id: 4,
    name: 'Resident evil',
    stars: 4.7,
    release_date: '1996-03-22T17:15:36.479Z'
  },
  {
    id: 2,
    name: 'Silent hill',
    stars: 4.4,
    release_date: '1999-02-23T17:15:36.479Z'
  }
]

و إن أردنا ترتيبها بناءً على تاريخ الإطلاق لأول لعبة من الأقدم للأحدث فسيكون كالتالي :

gamesArr.sort((a, b) => a.release_date > b.release_date ? 1 : -1);
console.log(gamesArr);

و ستصبح النتيجة كالتالي :

[
  {
    id: 4,
    name: 'Resident evil',
    stars: 4.7,
    release_date: '1996-03-22T17:15:36.479Z'
  },
  {
    id: 3,
    name: 'Crash bandicoot',
    stars: 4,
    release_date: '1996-09-09T17:15:36.479Z'
  },
  {
    id: 1,
    name: 'Metal gear solid',
    stars: 5,
    release_date: '1998-09-03T17:15:36.479Z'
  },
  {
    id: 2,
    name: 'Silent hill',
    stars: 4.4,
    release_date: '1999-02-23T17:15:36.479Z'
  }
]

و إن أردنا من الأحدث للأقدم فسيصبح الكود كالتالي :

gamesArr.sort((a, b) => b.release_date > a.release_date ? 1 : -1);
console.log(gamesArr);

و النتيجة كالتالي :

[
  {
    id: 2,
    name: 'Silent hill',
    stars: 4.4,
    release_date: '1999-02-23T17:15:36.479Z'
  },
  {
    id: 1,
    name: 'Metal gear solid',
    stars: 5,
    release_date: '1998-09-03T17:15:36.479Z'
  },
  {
    id: 3,
    name: 'Crash bandicoot',
    stars: 4,
    release_date: '1996-09-09T17:15:36.479Z'
  },
  {
    id: 4,
    name: 'Resident evil',
    stars: 4.7,
    release_date: '1996-03-22T17:15:36.479Z'
  }
]

و أيضًا إذا أردنا ترتيبها بناءً على عدد النجوم stars أو من خلال id فيمكننا ذلك أيضًا.

الخلاصة

سيكون من دواعي سروري إن وُفقت في كتابة تدوينة تُغطي الأجزاء الرئيسية للتعامل مع sort و كيفية كتابة compareFn لضبط الترتيب بعدة طُرق، ففي النهاية يعد ترتيب المصفوفة أمر شائع في جافاسكربت لعرض المحتوى في صفحة html أو لأغراض و استخدامات أخرى.

المرجع

Array.prototype.sort() Mozilla