Кирилл Мыльников 22 июля 2024

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

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

Работа мечты в один клик 💼

Работа в Сбере: пройди собеседование и получи оффер за 15 минут

💭Мечтаешь работать в Сбере, но не хочешь проходить десять кругов HR-собеседований? Теперь это проще, чем когда-либо!

💡AI-интервью за 15 минут – и ты уже на шаг ближе к своей новой работе.

Как получить оффер?
📌 Зарегистрируйся
📌 Пройди AI-интервью
📌 Получи обратную связь сразу же!

HR больше не тянут время – рекрутеры свяжутся с тобой в течение двух дней! 🚀

Реклама. ПАО СБЕРБАНК, ИНН 7707083893. Erid 2VtzquscAwp

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

Темы:

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

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

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

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

Пример

        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 – статический метод, возвращающий объект, содержащий три свойства.

  1. promise – объект Promise
  2. resolve – функция, которая возвращает промис
  3. 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 году. Начните изучать их уже сейчас, чтобы сделать свой процесс программирования более эффективным!

Материалы:

***

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

Комментарии

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ