🆕 JavaScript эволюционирует: новые методы и функции для эффективной разработки

Нововведения нацелены на повышение читаемости и эффективности кода. Рассмотрим, как Object.groupBy, регулярные выражения с V-флагом, Promise.withResolvers и методы мутации массивов решают актуальные задачи программирования.

Привет, друзья! Я Кирилл Мыльников, frontend-разработчик в компании Usetech. Сегодня хочу рассказать о новых возможностях JS 2024. Как обычно, разберем теорию и сразу перейдем к практике.

Темы:

1. Object.groupBy()
2. Регулярное выражение
3. Promise.withResolvers()
4. Мутация массива путем копирования

Object.groupBy

Object.groupBy – новый метод в JavaScript, который группирует элементы массива в соответствии с критериями. Этот метод полезен, когда вы хотите классифицировать элементы массива на основе имен одного или нескольких свойств объекта в массиве.

Разберем частый кейс, когда разработчикам приходится группировать данные по определенным критериями и свойство Object.groupBy поможет нам в этом вопросе,

Давайте рассмотрим пример.

Приведенный выше пример группирует данные по свойству color

1. Object.groupBy – принимает два аргумента: группируемый массив и функцию обратного вызова.
2. Функция обратного вызова принимает тоже два аргумента: текущий элемент и индекс текущего элемента.

Также можем группировать в зависимости от условий.

Пример

Доступность

Поддерживается во всех основных браузерах. Можете спокойно начинать использовать этот метод.

👨‍💻🎨 Библиотека фронтендера

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

Регулярное выражение

Регулярное выражение: V -флаг. Вы, возможно, знакомы с регулярным выражением Unicode flag, который позволяет вам включить поддержку символов Unicode.v-флаг является расширением большинства возможностей флага.

Оператор пересечения

Оператор пересечения позволяет сопоставить символы, которые должны присутствовать в двух наборах символов. Синтаксис [operand-one&&operand-two], где && обозначает оператор пересечения.

Пример

• Пример выше показывает пересечение строчных букв [a-z] и негласных символов [^aeiuo]
• && – оператор гарантирует, что будут сопоставлены только символы, общие для обоих наборов.

Оператор разности

Оператор разности, представленный двумя дефисами (--) обеспечивает удобный способ указания исключений в вашем регулярном выражении.

Пример

В примере ищутся только смайлики, остальные символы будут игнорироваться.

Оператор смешивания

Оператор смешивания – флаг v позволяет вам комбинировать операторы для создания мощных регулярных выражений через nesting. Но вы должны быть осторожны при комбинировании операторов. Например, вы можете сделать это:

Обратите внимание, что в приведенном коде операнды не заключены в скобки, однако регулярное выражение всё равно функционирует. Это происходит потому, что в данном выражении присутствует только один оператор.

Статья по теме

☕ Шпаргалка по регулярным выражениям в JavaScript

Promise.withResolvers

Promise.withResolvers – статический метод, возвращающий объект, содержащий три свойства.

1. promise – объект Promise
2. resolve – функция, которая возвращает промис
3. reject – функция, которая отклоняет промис

Это одно и то же:

Метод Promise.withResolvers() является более лаконичным и позволяет интегрировать функции разрешения и отклонения непосредственно в контекст обещания, в отличие от их создания и временного использования внутри исполнителя. Такой подход обычно приводит к уменьшению уровня вложенности кода по сравнению с включением обширной логики непосредственно в исполнителе.

Пример

Функция fetchData() извлекает данные из указанного URL с помощью модуля HTTPS в Node.js. Она возвращает обещание, которое разрешается с полученными данными в случае успешного запроса HTTP GET, и отклоняется с ошибкой в случае возникновения проблем во время запроса.

Ниже представлена ​​та же функция, реализованная с помощью Promise.withResolvers():

В целом Promise.withResolvers() метод направлен на повышение читабельности и краткости асинхронного кода, особенно в сценариях, связанных с внешней обработкой событий.

Доступность

Доступно во всех основных браузерах.

Статья по теме

🛠️ Set в JavaScript: теперь с новыми суперспособностями

Мутация массива путем копирования

Мутация массива путем изменения массива путем копирования представляет четыре новых метода массива: toReversed(), toSpliced(), toSorted(), with().

Первые три функционально эквивалентны своим мутирующим аналогам: reverse(), splice(), и sort().

Эти три новых метода устраняют необходимость создания копий массивов перед их мутированием.

with() – это четвертый новый метод массива, который позволяет легко заменять элементы в определенных позициях массива, не изменяя его исходное состояние.

Пример

Концепция работы метода with() напоминает замену значения напрямую через индекс, например, numbers[1] = 10. Однако в отличие от этого способа with() не изменяет исходный массив, а создает его копию с соответствующим изменением.

Доступность

with() доступен во всех основных средах выполнения JavaScript, включая браузеры

Заключение

В этой статье мы рассмотрели четыре новых метода JavaScript: groupBy(), regexFlag(), Mutate Array Copy и Promise.withResolvers(). Эти методы помогут вам писать более лаконичный и эффективный код.

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

Материалы:

• Object.groupBy
• Promise.withResolvers()
• Регулярные выражения

***

Какие нововведения кажутся вам наиболее полезными для вашей работы, и почему? Поделитесь своими мыслями в комментариях!