В июне 2021 года намечен выход ES2021 или ES12. Вот некоторые функции, которые предположительно внесет технический комитет 39 (TC39) в ESMAScript:
· Метод String.prototype.replaceAll
· Метод Promise.any
· Слабые ссылки (WeakRef) и финализатор
· Операторы логического присваивания
· Разделение чисел на разряды
В этой статье мы разберем каждую функции.
Метод String replaceAll()
С помощью этого метода вы можете заменить все вхождения строки на указанную вами строку. Сейчас метод .replace() заменяет только первое вхождение, игнорируя все оставшиеся.
const queryString = ‘q=query+string+parameters’;
const withSpaces = queryString.replace(‘+’, ‘ ‘);
console.log(withSpaces); // q=query параметры строкиЧтобы заменить все вхождения строк нужно использовать .replace() с глобальным регулярным выражением, как приведено ниже:
// заменить все ‘+’ на ‘space’
const queryString = ‘q=query+string+parameters’;
const withSpaces = queryString.replace(/\+/g, ‘ ‘);
console.log(withSpaces); // q=query параметры строкиА с методом replaceAll() вам не понадобятся регулярные выражения:
const queryString = ‘q=query+string+parameters’;
const withSpaces = queryString.replaceAll(‘+’, ‘ ‘);
Метод Promise.any()
Как только одно из промисов выполнится, метод Promise.any() вернет выполненный объект Promise. Если ни одно из промисов не выполнится, то метод выдаст ошибку AggregateError, содержащую причину отклонения.
Пример:
const promiseOne = new Promise((resolve, reject) => {
setTimeout(() => resolve(“one”), 3000);
});
const promiseTwo = new Promise((resolve, reject) => {
setTimeout(() => resolve(“two”), 2000);
});
const promiseThree = new Promise((resolve, reject) => {
setTimeout(() => resolve(“three”), 1000);
})
;
Promise.any([promiseOne, promiseTwo, promiseThree]).then(
(first) => {
// Одно из промисов было выполнено.console.log(first); // три
},
(error) => {
// обработка ошибки
}
);Если все промисы будут отклонены, появится ошибка AggregateError.
Пример, показывающий ошибку при использовании синтаксиса async/await:
const promiseOne = new Promise((resolve, reject) => {
setTimeout(() => reject(), 1000);
});
try {
const first = await Promise.any([promiseOne]);
// Any of the promises was fulfilled.
} catch (error) {
console.log(error);
// AggregateError: Все промисы были отклонены
}Слабые ссылки на объекты
WeakRef, сокращение от Weak References (слабые ссылки), позволяет создать слабые ссылки на объект. Прежде всего ссылки используются для реализации кэшей и маппинга больших объектов.
Сильные/обычные ссылки объекта JavaScript не могут быть удалены сборщиком мусора. В отличие от слабых ссылок:
const normalObj = {name: “John”};
const refObj = new WeakRef({name: “John”});
В случае, если вам нужно прочитать значение WeakRefs, воспользуйтесь методом deref() , чтобы вернуть экземпляр целевого объекта:
const refObj = new WeakRef({name: “John”});
const obj = refObj.deref();
console.log(obj.name); // JohnВ JavaScript точно неизвестно, как происходит сборка мусора и будет ли она происходить вообще, так как это зависит от движка в JS. Поэтому поведение различается в зависимости от среды.
Таким образом, чтобы правильно применить WeakRef, нужно сильно попотеть, а лучше по возможности не использовать его. Скорее всего, он вам и никогда не понадобится, если вы, конечно, не обслуживаете библиотеки JavaScript.
Финализаторы
Финализатор — это дополнительная функция в WeakRef, с помощью которой можно выполнить часть кода, когда объект уже не доступен программе.
Если вкратце, вы можете регистрировать функцию обратного вызова, которая будет выполняться после сборки мусора. Создать запись можно, передав функцию обратного вызова в объект FinalizationRegistry:
const registry = new FinalizationRegistry(value => {
console.log(value);
});Далее вы можете зарегистрировать любой объект, который хотите удалить, вызвав метод register() и передав как сам объект, так и значение в функцию обратного вызова:
registry.register({name: “John”}, “any value”);
Объект, переданный в метод register(), будет иметь слабую ссылку, чтобы его мог забрать сборщик мусора. Исходя из кода выше, функция обратного вызова выведет any value в консоль.
Оператор логического присваивания
Оператор логического присваивания объединяет логические операторы и выражения присваивания, что позволяет проверить значение переменной более коротким синтаксисом.
Например, следующий код проверяет ложное ли значение х, и если так, то присваивает ему новое значение:
let x;
if(!x){
x = 7;
}Используя этот оператор, можно заменить код выше следующим образом:
let x;
x ||= 7; // так как значение x undefined, ему присвоится число 7
console.log(x); // 7
Логическое присваивание работает с логикой AND (&&), а также оператором нулевого слияния (??):
let x = null;
x ??= 7 // присваивает число 7 к переменой х, если значение null или undefined
let y = “Hello”;
y &&= 9 // присваивает число 9 к переменой y, если значение TrueРазделение чисел на разряды
С помощью этой функции вы можете разделить число нижним подчеркиванием (_), что делает код более читабельным.
Код ниже иллюстрирует разницу между обычной и раздельной записью числа:
const aMillion = 1000000;
const separatedMillion = 1_000_000;
Как видно, разделение чисел нижним подчеркиванием облегчает чтение. Кроме того, вы даже можете разделить число с плавающей точкой (float):
const randomFloat = 4.7_857_123;
Однако разделение пропадет при работе с этим значением:
const randomFloat = 4.7_857_123;
console.log(randomFloat); // 4.7857123
Также нужно знать, что разделитель можно использовать только между двумя числами:
const num = 4_7; // 47
// Все что ниже выдаст ошибку
const a = 47_;
const b = _47;
const c= 3._47;Заключение
Это все, что ожидается в ES2021. Несмотря на то, что новых функций не много, их введение существенно поможет в написании JavaScript кода.
Читайте также:
- Что такое Hoisting в JavaScript
- Рендеринг на стороне сервера против статической генерации сайта
- 4 секрета читаемого и производительного кода JavaScript
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Nathan Sebhastian: New JavaScript Features You Can Expect in ES2021
