Что нового в стандарте ES2021 для JavaScript?

Вышел ежегодный выпуск ECMAScript с новыми функциями и улучшениями синтаксиса. Спецификация была завершена Международной организацией по стандартизации ECMA 22 июня 2021 года, что означает, что теперь она готова к использованию.

Наиболее популярной реализацией ECMAScript является JavaScript, язык, поддерживаемый веб-браузерами и облачными средами через такие среды выполнения, как Node.js. Вот краткое изложение основных изменений в ES2021.

Обещание.любое()

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

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

const promises = [doSomething(), doSomethingElse()];
 
try {
 
    // This will be the return value from `doSomething()` 
    // or `doSomethingElse()`, depending on which 
    // resolves first
    const firstToResolve = await Promise.any(promises);
 
}
 
catch (errors) {
 
    for (const error of errors) {
        // Iterate the individual Promise rejection reasons
    }
 
}

Promise.any() полезен в сценариях, когда вам нужно предпринять действия, если хотя бы одно обещание выполняется, но не имеет значения, если некоторые из них не выполняются. Он дополняет существующие методы Promise.all() и Promise.allSettled().

Вот краткий обзор различий:

any() — разрешается, если какое-либо обещание разрешается. Отклоняет, если все обещания отклонены.
all() — разрешается, если разрешаются все промисы. Отклоняет, если какое-либо обещание отклонено.
allSettled() — разрешается, когда все обещания либо разрешены, либо отклонены. Этот метод не отклоняет.

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

ES2021 поставляется с некоторыми давно запрошенными улучшениями оператора. Новые операторы логического присваивания обеспечивают удобное сокращение, что позволяет писать меньше кода.

Три оператора (&&=, ||= и ??=) сочетают соответствующее логическое сравнение с присвоением значения. Вам больше не нужно писать имя переменной дважды, если вы присваиваете значение только при совпадении сравнения:

// ES2020
x && (x = y)
x || (x = y)
x = x ?? y
 
// ES2021
x &&= y;
x ||= y;
x ??= y;

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

Строка.прототип.replaceAll()

Новый метод прототипа String значительно упрощает замену всех экземпляров подстроки, не прибегая к регулярному выражению. Когда существующему методу replace() в качестве входных данных передается строка, он заменяет только первый экземпляр этого значения. replaceAll() добавляет поведение, которого хотели и ожидали многие разработчики.

const str = "xxxyz";
 
// xxyz
console.log(str.replace("x", ""));
 
// yz
console.log(/x/g, "");
 
// yz
console.log(str.replaceAll("x", ""));

Это небольшая функция, которая должна иметь немедленную практическую полезность. Вызов replaceAll() повышает удобочитаемость кода по сравнению с регулярным выражением с модификатором g (global). Это особенно верно, когда вы работаете с менее опытными разработчиками, которым может быть непонятно, почему использовалось регулярное выражение.

Числовые разделители

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

// ES2020 - This is hard to see at a glance!
const billion = 1000000000;
 
// ES2021 - This can be more readable
const billion = 1_000_000_000;

Разделители имитируют использование запятых между группами записанных чисел. Их использование совершенно необязательно. Синтаксис также работает для двоичных и шестнадцатеричных литералов с префиксом 0b и 0x.

Расширенные возможности

ES2021 включает несколько новых объектов, предназначенных для более продвинутых вариантов использования. Во-первых, есть WeakRef, механизм, который содержит ссылку на объект, но сохраняет его пригодным для сборки мусора. Ссылка «слабая», потому что нет гарантии, что ее можно будет использовать в будущем.

Вы сможете получить доступ к объекту до тех пор, пока он не будет собран мусором. Это может вообще не быть сборщиком мусора, так как браузер сам решает, когда удалять объекты, на которые нет ссылок.

Вы создаете слабые ссылки с помощью конструктора WeakRef, передавая объект, который хотите использовать. Вы можете получить доступ к исходному объекту позже, вызвав deref().

const x = {};
const xWeakRef = new WeakRef(x);
 
const deRef = xWeakRef.deref();     // this is the object from `x`

Слабые ссылки следует использовать для кэширования больших объектов, которые не важны для вашего приложения. Браузер сможет очищать их во время нехватки памяти, улучшая общую производительность.

Наряду со слабыми ссылками новый конструктор FinalizationRegistry предоставляет уведомления, когда объекты удаляются сборщиком мусора. Отменить сборку мусора невозможно; эта функция предназначена для того, чтобы вы могли реагировать на очистку, освобождая любые другие связанные ресурсы. Например, если объект, представляющий пользователя, был удален сборщиком мусора, вы можете использовать обратный вызов для удаления кэшированного большого двоичного объекта с изображением его профиля.

const registry = new FinalizationRegistry(key => {
    // This callback will run when a 
    // registered object is garbage collected
    if (key === "user") {
         // Delete cached user data here.
    }
});
 
const user = {Username: "CloudSavvy"};
registry.register(user, "user");

В этом примере ваш обратный вызов будет запущен и получит user в качестве своего параметра, когда объект x будет удален сборщиком мусора. Вы можете использовать ключ для выявления и удаления похожих данных. Вам нужно будет создать этот механизм самостоятельно.

Заключение

ES2021 — это здоровое обновление спецификации, которое предоставляет новые удобные функции сообществу ECMAScript. Promise.any() дополняет линейку обработки промисов, а логические операторы присваивания и replaceAll() упрощают повседневное использование.

Несмотря на то, что функции ES2021 были только что завершены, они поставлялись в браузерах в течение всего года. Chromium, Firefox и Safari уже предлагают полную поддержку ES2021, поэтому вы можете писать код, используя новые возможности уже сегодня. Такие функции, как Promise.any() и String.prototype.replaceAll(), могут быть легко полифилированы для старых браузеров; другие, такие как операторы логического присваивания, могут обрабатываться препроцессорами, такими как Babel.