Привет, друзья! Я Кирилл Мыльников, frontend-разработчик в компании Usetech. Сегодня хочу рассказать о новых возможностях JS 2024. Как обычно, разберем теорию и сразу перейдем к практике.
Темы:
Object.groupBy()Регулярное выражениеPromise.withResolvers()Мутация массива путем копирования
Object.groupBy
Object.groupBy – новый метод в JavaScript, который группирует элементы массива в соответствии с критериями. Этот метод полезен, когда вы хотите классифицировать элементы массива на основе имен одного или нескольких свойств объекта в массиве.
Разберем частый кейс, когда разработчикам приходится группировать данные по определенным критериями и свойство Object.groupBy поможет нам в этом вопросе,
Давайте рассмотрим пример.
const data = [
{ product: "iPhone X", quantity: 25, color: "black" },
{ product: "MacBook Pro 14'", quantity: 6, color: "white" },
{ product: "HP Spectre", quantity: 0, color: "black" },
];
// Using object.groupBy()
const groupedObjects = Object.groupBy(data, (element, index) => element.color);
console.log(groupedObjects);
// Output:
/*
{
"black": [
{
"product": "iPhone X",
"quantity": 25,
"color": "black"
},
{
"product": "HP Spectre",
"quantity": 0,
"color": "black"
}
],
"white": [
{
"product": "MacBook Pro 14'",
"quantity": 6,
"color": "white"
}
]
}
*/
Приведенный выше пример группирует данные по свойству color
Object.groupBy– принимает два аргумента: группируемый массив и функцию обратного вызова.- Функция обратного вызова принимает тоже два аргумента: текущий элемент и индекс текущего элемента.
Также можем группировать в зависимости от условий.
Пример
const teams = [
{ name: "Man City", points: 63 },
{ name: "Real Madrid", points: 50 },
{ name: "Bayern Munich", points: 70 },
{ name: "AC Milan", points: 59 },
{ name: "Everton", points: 70 },
];
// groups objects by the number of points
const groupings = Object.groupBy(teams, (team) => {
return team.points > 60 ? "qualified" : "disqualified";
});
Доступность
Поддерживается во всех основных браузерах. Можете спокойно начинать использовать этот метод.
Регулярное выражение
Регулярное выражение: V -флаг. Вы, возможно, знакомы с регулярным выражением Unicode flag, который позволяет вам включить поддержку символов Unicode.v-флаг является расширением большинства возможностей флага.
Оператор пересечения
Оператор пересечения позволяет сопоставить символы, которые должны присутствовать в двух наборах символов. Синтаксис [operand-one&&operand-two], где && обозначает оператор пересечения.
Пример
let txt = "ECMAScript ES 5 and ES 2015 revolutionized web development";
// match lowercase letters that are not vowels
let myRegex = /[[a-z]&&[^aeiuo]]/gv;
console.log(txt.match(myRegex));
//Output: ["c","r","p","t","n","d","r","v","l","t","n","z","d","w","b","d","v","l","p","m","n","t"]
- Пример выше показывает пересечение строчных букв
[a-z]и негласных символов[^aeiuo] &&– оператор гарантирует, что будут сопоставлены только символы, общие для обоих наборов.
Оператор разности
Оператор разности, представленный двумя дефисами (--) обеспечивает удобный способ указания исключений в вашем регулярном выражении.
Пример
let myEmojis = "😁,😍,😴,☉‿⊙,:O";
// Excludes ASCII Emoji characters
let myRegex = /[\p{Emoji}--\p{ASCII}]/gv;
console.log(myEmojis.match(myRegex));
//Output: ["😁","😍","😴"]
В примере ищутся только смайлики, остальные символы будут игнорироваться.
Оператор смешивания
Оператор смешивания – флаг v позволяет вам комбинировать операторы для создания мощных регулярных выражений через nesting. Но вы должны быть осторожны при комбинировании операторов. Например, вы можете сделать это:
let txt = 'An Arabic word: غلص and an Arabic number: ٩٧'
// Looks for Arabic letters only
let regex = /[\p{Script_Extensions=Arabic}&&\p{Letter}]/gv
console.log(txt.match(regex));
// Output: ["غ","ل","ص"]
Обратите внимание, что в приведенном коде операнды не заключены в скобки, однако регулярное выражение всё равно функционирует. Это происходит потому, что в данном выражении присутствует только один оператор.
Promise.withResolvers
Promise.withResolvers – статический метод, возвращающий объект, содержащий три свойства.
promise– объект Promiseresolve– функция, которая возвращает промисreject– функция, которая отклоняет промис
let { promise, resolve, reject } = Promise.withResolvers();
Это одно и то же:
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
Метод Promise.withResolvers() является более лаконичным и позволяет интегрировать функции разрешения и отклонения непосредственно в контекст обещания, в отличие от их создания и временного использования внутри исполнителя. Такой подход обычно приводит к уменьшению уровня вложенности кода по сравнению с включением обширной логики непосредственно в исполнителе.
Пример
import * as https from "https"
function fetchData(url) {
return new Promise((resolve, reject) => {
https
.get(url, (res) => {
let data = "";
// As data is received, append it to the 'data' variable
res.on("data", (chunk) => {
data += chunk;
});
// When the response is complete, resolve the promise with the accumulated data
res.on("end", () => {
resolve(data);
});
})
// If an error occurs during the request, reject the promise with the
error
.on("error", (err) => {
reject(err);
});
});
}
fetchData("https://jsonplaceholder.typicode.com/todos/1").then((data) => {
console.log(data);
});
Функция fetchData() извлекает данные из указанного URL с помощью модуля HTTPS в Node.js. Она возвращает обещание, которое разрешается с полученными данными в случае успешного запроса HTTP GET, и отклоняется с ошибкой в случае возникновения проблем во время запроса.
Ниже представлена та же функция, реализованная с помощью Promise.withResolvers():
import * as https from "https"
function fetchTodo(url) {
const { resolve, reject, promise } = Promise.withResolvers();
https
.get(url, (res) => {
let data = "";
res.on("data", (chunk) => {
data += chunk;
});
res.on("end", () => {
resolve(data);
});
})
.on("error", (err) => {
reject(err);
});
// Return the created promise to the caller
return promise;
}
fetchTodo("https://jsonplaceholder.typicode.com/todos/1").then((data) => {
console.log(data);
});
/* Output:
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
*/
В целом Promise.withResolvers() метод направлен на повышение читабельности и краткости асинхронного кода, особенно в сценариях, связанных с внешней обработкой событий.
Доступность
Доступно во всех основных браузерах.
Мутация массива путем копирования
Мутация массива путем изменения массива путем копирования представляет четыре новых метода массива: toReversed(), toSpliced(), toSorted(), with().
Первые три функционально эквивалентны своим мутирующим аналогам: reverse(), splice(), и sort().
Эти три новых метода устраняют необходимость создания копий массивов перед их мутированием.
with() – это четвертый новый метод массива, который позволяет легко заменять элементы в определенных позициях массива, не изменяя его исходное состояние.
Пример
const numbers = [5, 10, 139];
// replaces 139 with 15
const multiplesOfFive = numbers.with(2, 15);
console.log(multiplesOfFive);
// Output: [5, 10, 15]
Концепция работы метода with() напоминает замену значения напрямую через индекс, например, numbers[1] = 10. Однако в отличие от этого способа with() не изменяет исходный массив, а создает его копию с соответствующим изменением.
Доступность
with() доступен во всех основных средах выполнения JavaScript, включая браузеры
Заключение
В этой статье мы рассмотрели четыре новых метода JavaScript: groupBy(), regexFlag(), Mutate Array Copy и Promise.withResolvers(). Эти методы помогут вам писать более лаконичный и эффективный код.
Это новые методы JavaScript, которые будут доступны в 2024 году. Начните изучать их уже сейчас, чтобы сделать свой процесс программирования более эффективным!
Материалы:
Какие нововведения кажутся вам наиболее полезными для вашей работы, и почему? Поделитесь своими мыслями в комментариях!
Комментарии