Изучение новых методов массивов из ECMAScript 2023
JavaScript постоянно развивается, как и вся индустрия веб-разработки в целом. ECMAScript 2023 — новейшая версия языка программирования JavaScript. ECMAScript является четырнадцатым изданием спецификации языка и был выпущен в июне 2023 года. Со временем ECMAScript 2023 превратился в язык программирования общего назначения. На нем работает весь веб. Поэтому он используется для создания веб-приложений и других видов программирования, которые связаны между собой.
ECMAScript — стандартизированный язык сценариев, являющийся спецификацией для JavaScript. ECMAScript 2023 — обновление языка программирования JavaScript, призванное внести улучшения и сделать программы на JavaScript предсказуемыми и удобными в обслуживании. Благодаря этому улучшению у прототипа Array появились новые методы. Методы массивов JavaScripts toSorted, toReversed, with, findLast и findLastIndex были представлены в ECMAScript 2023.
Методы ECMAScript 2023 предлагают разработчикам мощные инструменты для манипулирования массивами без изменения исходного массива. Эти методы работают с репликами массива, что позволяет более безопасно и предсказуемо манипулировать массивами. С помощью этих методов разработчики могут использовать иммутабельность данных массива, будучи уверенными в том, что исходный массив останется неизменным. Они облегчат работу разработчиков при работе с массивами. Оставлять данные неизменными выгодно, что и демонстрируют эти методы массивов из ECMAScript 2023. Эти преимущества применимы к любым объектам JavaScript, а не только к массивам.
Давайте без лишних слов рассмотрим новые методы массивов JavaScript из ECMAScript 2023.
Метод toReversed()
Методы toReversed() и JavaScript reverse() сопоставимы, но не одинаковы. Метод toReversed() возвращает элементы массива в обратном порядке, не изменяя исходный массив.
Обратите внимание, что новые методы JavaScript из сниппетов кода ECMAScript 2023 работают в современных веб-браузерах. Проверьте возможности браузера в MDN. Они работают в браузере, поскольку методы все ещё очень новые. Кроме того, эти методы поддерживаются Node.js версии 20+. Это не очень удобно для разработчиков использующих старую Node.js LTS (версия 18).
Давайте рассмотрим сценарий, в котором у нас есть список дней недели, расположенных в хронологическом порядке. Результаты будут отображаться в обратном порядке.
//Исходный массив
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
//Используем метод reverse()
const reverseDays=days.reverse();
console.log(reverseDays);
//Вывод: ['Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday']
console.log(days);
//Вывод исходного массива изменяется: ['Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday'Исходный массив изменяется с помощью метода reverse().
Метод toReversed() изменяет массив без изменения исходного массива. Посмотрите на этот пример:
//Исходный массив
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
//Используем метод toReversed()
const reversedDays=days.toReversed();
console.log(reversedDays);
//Вывод: ['Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday']
console.log(days);
//Вывод исходного массива не изменяется: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']Функция toReversed — это замечательная возможность, по достоинству оценённая разработчиками. Это связано с тем, что исходный массив был изменён с помощью метода reverse. Спасибо ECMAScript 2023 за введение метода toReversed. С помощью этого метода можно изменять не исходный массив, а его копию.
Метод toSorted()
Метод toSorted() похож на JavaScript метод sort(). Эти два метода отличаются друг от друга и, да! Вы правильно догадались. В отличие от sort(), метод toSorted() не изменяет исходный массив. Этот метод массива работает аналогично методу toReversed(). Эти методы возвращают новый массив, оставляя исходные массивы неизменными.
Рассмотрим сценарий, в котором нам нужно отсортировать числа в порядке возрастания. Этот пример проиллюстрирует разницу между sort() и toSorted().
//Исходный массив
const numbers=[9, 4, 8, 1, 6, 3];
//Используем метод sort
const sortNumbers=numbers.sort();
console.log(sortNumbers);
// Output:[1, 3, 4, 6, 8, 9]
console.log(numbers)//исходный массив
//Output:[1, 3, 4, 6, 8, 9]Метод toSorted сортирует массив без изменения исходного массива:
//Исходный массив
const numbers=[9, 4, 8, 1, 6, 3];
//Используем метод toSorted
const sortNumbers=numbers.toSorted();
console.log(sortNumbers);
// Output:[1, 3, 4, 6, 8, 9]
console.log(numbers)//исходный массив
//Output:[9, 4, 8, 1, 6, 3]
//Исходный массив не изменилсяМетод массива toSorted() изменяет копию в приведённом выше примере. Он возвращает новый массив с элементами, отсортированными в порядке возрастания. Однако исходный массив не изменяется. С другой стороны, метод sort() изменяет исходный массив, как показано в примере выше.
Метод toSpliced()
Метод массива toSpliced() — новая возможность в ECMAScript 2023. Метод toSpliced() похож на метод JavaScript splice(), но есть небольшое отличие. Разница между этими двумя методами массивов заключается в том, что метод toSpliced() не изменяет исходный массив.
toSpliced() создаёт новый массив с изменёнными элементами, но исходный массив остаётся неизменным. toSpliced() выполняет несколько действий с массивом. Вы можете добавлять, удалять и заменять элементы в массиве.
Давайте рассмотрим сценарий, в котором у нас есть список элементов и мы хотим удалить некоторые элементы, не изменяя исходный массив. Этот пример проиллюстрирует разницу между splice() и toSpliced.
//Исходный массив
const fruits=['Grapes', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples'];
//ИСпользование метода Splice
const spliceFruits= fruits.splice(2,1);//removing one fruit(Bananas)
console.log(spliceFruits);
//Output: ['Grapes', 'Oranges', 'Mangoes', 'Pineapples']
console.log(fruits);//original array is altered
//Output: ['Grapes', 'Oranges', 'Mangoes', 'Pineapples']
Использование метода toSpliced:
//Исходный массив
const fruits=['Grapes', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples'];
//Использование метода toSpliced
const splicedFruits= fruits.toSpliced(4,1);//removing one fruit(Pineapples)
console.log(splicedFruits);
//Output: ['Grapes', 'Oranges', 'Bananas', 'Mangoes']
console.log(fruits);//original array remain unmodified
//Output: ['Grapes', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples']
// Добавляем элемент с индексом 1
const fruits2 = fruits.toSpliced(1, 0, "Passion");
console.log(fruits2);
//Output: ['Grapes', 'Passion', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples']
// Заменим один элемент с индексом 1 двумя новыми элементами
const fruits3 = fruits2.toSpliced(1, 1, "Guava", "Melon");
console.log(fruits3);
//Output: ['Grapes', 'Guava', 'Melon', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples']
//Исходный массив остаётся неизменным
console.log(fruits)
//Output: ['Grapes', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples']Метод массива toSpliced — важная возможность языка JavaScript. Он позволяет разработчикам манипулировать массивами, не изменяя исходные массивы. Это позволяет разработчикам легко управлять и поддерживать код. Как видно из примеров выше, этот метод предлагает более удобный способ добавления, удаления или замены элементов по любому индексу массива.
Метод with()
Метод массива with() был добавлен в язык программирования JavaScript в ECMAScript 2021 (ES12). Обновление элементов внутри массива — обычное дело в JavaScript. Однако изменение элементов массива изменяет исходный массив.
Метод массива with() представляет новую возможность в ECMAScript 2023. Метод with() предлагает безопасный способ обновления элементов в массиве без изменения исходного массива. Это достигается за счёт возврата нового массива с обновлёнными элементами.
const flowers=['Lily', 'Daisy', 'Iris', 'Lotus', 'Allium'];
//старый способ обновления массива;
flowers [4]='Rose';
console.log(flowers);
//Output: ['Lily', 'Daisy', 'Iris', 'Lotus', 'Rose']Использование метода with():
//Новый способ обновления массива с помощью функции with()
const updatedFlowers=flowers.with(4, 'Aster');
console.log(updatedFlowers);
//Output: ['Lily', 'Daisy', 'Iris', 'Lotus', 'Aster']
console.log(flowers);//исходный массив
Output: ['Lily', 'Daisy', 'Iris', 'Lotus', 'Allium']В старом способе обновления массива для изменения элемента внутри массива использовалась скобочная нотация. При использовании скобочной нотации для обновления массива исходный массив изменяется. Однако метод with() достигает того же результата после обновления элемента в определённом индексе массива, но не изменяет исходный массив. Вы можете создать копию массива, которая вернёт новый массив с обновлённым индексом.
Подведение итогов
ECMASctript продолжает развиваться, ежегодно выпуская новую версию. Эта тенденция сохраняется с 2015 года. Эти изменения происходят каждый год, улучшая ECMAScript и JavaScript. ECMAScript 2023 привносит в язык JavaScript несколько интересных функций. Эти функции улучшают возможности языка и опыт разработчиков.
Подводя итог, можно сказать, что вы ознакомились с функциональными возможностями новых методов массивов JavaScript из ECMAScript 2023. Приступайте к использованию методов массивов ECMAScript 2023:
ECMAScript позволяет веб-разработчикам создавать более наглядные приложения, используя эффективный код. Таковы новые методы массивов JavaScript из ECMAScript 2023.