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

Привет, друзья! Я Кирилл Мыльников, 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 году. Начните изучать их уже сейчас, чтобы сделать свой процесс программирования более эффективным!

Материалы:

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

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