في يوليو 2023، أصدرت ECMAScript عدة مواصفات جديدة لجافا سكريبت. تتضمن بعض الميزات أساليب Array جديدة لا تقوم بتعديل المصفوفة الموجودة. في هذه المدونة، سنتحدث عن ثلاثة منهم (واحد من عام 2024) والتي يجب أن تعرفها إذا كنت تريد أن تكون على اطلاع بأحدث الاتجاهات في الويب وجافا سكريبت !

Array.toSorted()

يقوم Array.sort() الأصلي بفرز عناصر المصفوفة في المكان. في بعض الأحيان قد لا ترغب في هذا السلوك. في البرمجة، من الممارسات الجيدة بشكل عام تجنب تعديل القيم الموجودة وإرجاع إصدار جديد بدلاً من ذلك.

Array.toSorted() يحل هذه المشكلة عن طريق إرجاع مصفوفة جديدة تحتوي على العناصر المصنفة كما هو موضح في وظيفة رد الاتصال!

أنا مغرم بشكل خاص بهذه الميزة لأنني كنت قد بدأت بالفعل في استخدامها في الكود الخاص بي قبل فترة طويلة من حصول VSCode ومتصفحات الويب على الدعم المناسب لها!

let numbers = [4, 2, 1, 3];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4]

Array.toReversed()

Array.toReversed() هي إضافة جديدة توفر طريقة غير قابلة للتغيير لعكس المصفوفة. على عكس Array.reverse()، الذي يعدل المصفوفة الأصلية، تقوم Array.toReversed() بإرجاع نسخة معكوسة من المصفوفة، مع ترك النسخة الأصلية دون تغيير.

let letters = ['a', 'b', 'c', 'd'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']

Array.ToSpliced()

يوفر Array.toSpliced() طريقة غير مدمرة لإزالة العناصر أو استبدالها أو إضافتها داخل المصفوفة. يقوم Array.splice() التقليدي بتعديل المصفوفة مباشرة، لكن Array.toSpliced() ينشئ مصفوفة جديدة مع تطبيق التغييرات، ويترك المصفوفة الأصلية دون تغيير. يمكن أن يكون هذا مفيدًا عندما تحتاج إلى تطبيق التغييرات دون التأثير على البيانات المصدر.

let numbers = [1, 2, 3, 4, 5];
let splicedNumbers = numbers.toSpliced(1, 2, 6, 7);
console.log(splicedNumbers); // Output: [1, 6, 7, 4, 5]
console.log(numbers); // Output: [1, 2, 3, 4, 5]

Object.groupBy()

تم إصدار هذه الطريقة رسميًا في ES2024، ولكنها كانت لا تزال متاحة من قبل مع polyfills وقد تقدمت بالفعل إلى مرحلة لاحقة من ECMAScript.

Object.groupBy() بتجميع عناصر مصفوفة معينة بناءً على خاصية كائن محددة. يعد هذا مفيدًا للغاية ويمكن أن يكون مفيدًا جدًا عندما تريد تجميع قائمة معينة من الكائنات ثم تكرارها وفقًا لذلك في بنية القيمة الرئيسية. هناك حقيقة مثيرة للاهتمام حول هذه الطريقة وهي أنه لم يتم تنفيذها كطريقة نموذج أولي للمصفوفة بسبب مشكلات التوافق مع الويب. (كانت العديد من مكتبات JavaScript القديمة تنفذ بالفعل بعض التعليمات البرمجية داخل مساحة الاسم Array.prototype.group()، ولهذا السبب!)

علاوة: تنفيذ Object.groupBy() الخاص بك للتجميع حسب عناصر متعددة

في النهاية، قد تحتاج أيضًا إلى التجميع حسب خصائص متعددة. مجموعات Object.groupBy() الأصلية في مستوى واحد فقط.

قم بتنفيذ الكود أدناه في مشروعك لتجميع العناصر حسب خصائص متعددة!

function multiLevelGroupBy(array, criteria) {
  // Base case: if no criteria are left, return the array itself
  if (criteria.length === 0) return array;

  // Get the first criterion
  const [firstCriterion, ...remainingCriteria] = criteria;

  // Group by the first criterion
  const grouped = array.reduce((acc, item) => {
    const key = firstCriterion(item);
    if (!acc[key]) acc[key] = [];
    acc[key].push(item);
    return acc;
  }, {});

  // For each group, recursively apply the remaining criteria
  for (let key in grouped) {
    grouped[key] = multiLevelGroupBy(grouped[key], remainingCriteria);
  }

  return grouped;
}

مثال:

const data = [
  { country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' },
  { country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' },
  { country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' },
  { country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' },
  { country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' },
]

let groupedData = multiLevelGroupBy(data, [
  item => item.country,
  item => item.state,
  item => item.city
]);

console.log(groupedData);

/* Expected Output: */
{
  USA: {
    California: {
      'Los Angeles': [{ country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' }],
      'San Francisco': [{ country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' }]
    },
    New York: {
      'New York City': [{ country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' }]
    }
  },
  Canada: {
    Ontario: {
      Toronto: [{ country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' }]
    },
    Quebec: {
      Montreal: [{ country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' }]
    }
  }
}

النهاية!

إذا كنت قد وصلت إلى نهاية هذه المقالة، شكرًا جزيلاً لك على القراءة! ?