ES2023 — что нового в JavaScript?

Введение

В данной статье мы обсудим новые возможности работы с массивами в JavaScript, которые были добавлены в ES2023.

findLast и findLastIndex

Допустим, у нас есть массив с элементами:

const arr = [0, 1, 2, 3, 7];

Нам нужно найти элемент со значением 7, и мы предполагаем, что он находится ближе к концу массива.

В предыдущем варианте когда мы использовали find(), мы бы делали это следующим образом:

const arr = [0, 1, 2, 3, 7];
const res = arr.find(el => {
console.log('Поиск');
return el == 7;
})
// 5 раз будет выведено в консоли слово "Поиск"

Это может быть нормально для небольших массивов, но если массив большой и вы знаете, что элемент находится ближе к концу, то можно использовать метод findLast(), который находит первый элемент с конца, удовлетворяющий условию:

const arr = [0, 1, 2, 3, 7];
const res = arr.findLast(el => {
console.log('Поиск');
return el == 7;
})
// вывод в консоль: Поиск

В этом случае вывод будет происходить только 1 раз.

Аналогично существует метод findLastIndex(), который ищет индекс элемента, удовлетворяющего определённому условию.

UPD: По просьбе из комментариев даю более точную формулировку:

FindLast обходит массив с конца, возвращая первый элемент, который удовлетворяет переданной в метод функции (или undefined, если не нашел).

Потому если в массиве несколько одинаковых элементов, find и findLast вернут разные значения.

Методы не изменяющие исходный массив

Большинство методов работы с массивами в JavaScript изменяют исходный массив вместо создания нового. Например, это может вызвать проблемы в React, когда необходимо изменить состояние и создать новый массив. Мы рассмотрим, как это решается в последней версии спецификации ES2023 и в JavaScript. Потому ниже мы рассмотрим новые методы, которые позволяют этого избежать.

with

Предположим, нам нужно:

• Взять массив

• Изменить его элемент

• Создать новый массив

Теперь с помощью метода with() мы можем это сделать гораздо проще. Нам нужно передать индекс, на котором мы хотим заменить элемент, а затем значение этого элемента:

const a = [1, 3, 5]
const arrNew = a.with(1, 'test');
console.log(a); // вывод: [1, 3, 5]
console.log(arrNew); // вывод: [1, 'test', 5]

Метод with() копирует исходный массив, меняет один элемент и возвращает новый массив с измененным элементом по указанному индексу.

toSorted

Метод toSorted() сортирует элементы массива так же, как и метод sort(), но возвращает новый массив:

const a = [2, 3, 6, 1];
const b = a.toSorted();
console.log(a) // вывод: [2, 3, 6, 1]
console.log(b) // вывод: [1, 2, 3, 6]

toReversed

Метод toReversed() меняет порядок элементов в массиве на обратный, как и метод reverse(), но возвращает новый массив:

const a = [2, 3, 6, 1];
const c = a.toReversed();
console.log(a) // вывод: [2, 3, 6, 1]
console.log(c) // вывод: [1, 6, 3, 2]

toSpliced

Метод toSpliced() является копией метода splice(), но возвращает новый массив:

const a = [2, 3, 6, 1];
const d = a.toSpliced(0, 1);
console.log(a) // вывод: [2, 3, 6, 1]
console.log(d) // вывод: [3, 6, 1]