В июле 2023 года ECMAScript выпустил несколько новых спецификаций JavaScript. Некоторые из функций включают новые методы Array, которые не изменяют существующий массив. В этом блоге мы поговорим о трех из них (одном из 2024 года), о которых вам необходимо знать, если вы хотите быть в курсе последних тенденций в Интернете и JavaScript. !

Массив.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']

Массив.ToSplied()

Array.toSplied() предлагает неразрушающий способ удаления, замены или добавления элементов в массиве. Традиционный Array.splice() изменяет массив напрямую, но Array.toSplice() создает новый массив с примененными изменениями, оставляя исходный массив неизменным. Это может быть полезно, когда вам нужно применить изменения, не затрагивая исходные данные.

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, но раньше был доступен с полифилами и уже перешел на более позднюю стадию 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' }]
    }
  }
}

Конец!

Если вы дочитали эту статью до конца, большое спасибо за прочтение! ?