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(), который ищет элемент по индексу.

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

Большинство методов работы с массивами в 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]