JavaScript ES2022 / ES13 новые возможности

ES2022, также известный как ES13, вносит значительные улучшения в язык программирования JavaScript, расширяя его возможности и упрощая разработку. Рассмотрим подробнее ключевые нововведения этой версии.

• Методы Array.prototype.at();
• Методы Object.hasOwn();
• Логические операторы присваивания
• Топ-уровневое await
• Методы Error.cause
• Методы RegExp Match Indices
• Promise.any
• Заключение

В 2022 году была выпущена новая спецификация ES2022 (ECMAScript 2022), также известный как ES13, которая привнесла несколько значительных улучшений и нововведений. В этой статье рассмотрим основные изменения и новые возможности, представленные в ES2022, и как их можно применять на практике.

Методы Array.prototype.at()

Метод at() предоставляет удобный способ доступа к элементам массива с использованием положительных и отрицательных индексов. Ранее, чтобы получить последний элемент массива, мы использовали конструкцию arr[arr.length - 1]. Теперь это можно сделать проще.

const array = ['JavaScript', 'Python', 'Ruby', 'Go'];

console.log(array.at(0)); // Выводит: "JavaScript"
console.log(array.at(-1)); // Выводит: "Go"

Этот метод упрощает доступ к последним элементам, особенно когда точный размер массива неизвестен, делая код более читаемым и элегантным.

Методы Object.hasOwn()

Метод Object.hasOwn() упрощает проверку наличия собственных свойств объекта, предоставляя более надежную альтернативу Object.prototype.hasOwnProperty.call(). Этот метод улучшает безопасность и устойчивость кода, исключая возможные конфликты с собственными свойствами объекта.

const obj = { a: 1, b: 2 };

console.log(Object.hasOwn(obj, 'a')); // true
console.log(Object.hasOwn(obj, 'c')); // false

Логические операторы присваивания

ES2022 добавил три новых логических оператора присваивания: &&=, ||= и ??=. Они упрощают логические операции и делают код более читаемым.

• &&= выполняет присваивание, если значение истинно.
• ||= выполняет присваивание, если значение ложно.
• ??= выполняет присваивание, если значение равно null или undefined.

let a = true;
let b = false;
let c = null;

a &&= false; // a = false
b ||= true;  // b = true
c ??= 3;     // c = 3

Топ-уровневое await

С ES2022 стало возможным использование await на верхнем уровне модулей, упрощая структуру кода и избавляя от необходимости оборачивать асинхронные вызовы в анонимные самовызывающиеся функции. Это значительно улучшает читаемость и поддержку кода, делая асинхронную логику более интуитивно понятной.

// example.mjs
const data = await fetch('https://api.example.com/data');
const jsonData = await data.json();

console.log(jsonData);

Методы Error.cause

Методы Error.cause позволяют передавать дополнительную информацию о причине ошибки. Это улучшает отладку и делает сообщения об ошибках более информативными.

try {
  throw new Error('Something went wrong', { cause: 'Invalid input' });
} catch (err) {
  console.error(err.message); // "Something went wrong"
  console.error(err.cause);   // "Invalid input"
}

Методы RegExp Match Indices

Добавлены методы для работы с индексами сопоставления в регулярных выражениях. Метод matchAll возвращает итератор с подробной информацией о каждом совпадении, включая индексы. Чтобы получить индексы совпадений, нужно использовать флаг d в регулярном выражении.

const regex = /t(e)(st(\d?))/gd;
const str = 'test1test2';

const matches = [...str.matchAll(regex)];

for (const match of matches) {
  console.log(`Full match: ${match[0]} at [${match.indices[0][0]}, ${match.indices[0][1]}]`);
  console.log(`First capturing group: ${match[1]} at [${match.indices[1][0]}, ${match.indices[1][1]}]`);
  console.log(`Second capturing group: ${match[2]} at [${match.indices[2][0]}, ${match.indices[2][1]}]`);
  console.log(`Third capturing group: ${match[3]} at [${match.indices[3][0]}, ${match.indices[3][1]}]`);
}

// Full match: test1 at [0, 5]
// First capturing group: e at [1, 2]
// Second capturing group: st1 at [2, 5]
// Third capturing group: 1 at [4, 5]

// Full match: test2 at [5, 10]
// First capturing group: e at [6, 7]
// Second capturing group: st2 at [7, 10]
// Third capturing group: 2 at [9, 10]

Давай разберемся, как это работает:

• Флаг d: Новый флаг d в регулярном выражении используется для отслеживания индексов совпадений.
• Метод matchAll: Возвращает итератор, который содержит объект с информацией о каждом совпадении, включая индексы.

Promise.any

Метод Promise.any() ожидает исполнения одного из переданных промисов и возвращает его результат. Если ни один из промисов не выполнится успешно, возвращается ошибка AggregateError.

const promises = [
  Promise.reject('Ошибка'),
  Promise.resolve('Первый успешный ответ'),
  new Promise((resolve) => setTimeout(resolve, 100, 'Второй успешный ответ'))
];

Promise.any(promises).then((value) => console.log(value));
// Выводит: "Первый успешный ответ"

Заключение

Новая спецификация ES2022 предоставляет разработчикам JavaScript множество полезных возможностей, которые делают язык более мощным и удобным. Эти нововведения упрощают работу с массивами, объектами, ошибками и асинхронными операциями, а также улучшают производительность и читаемость кода.