ES2021 — это 1212-я версия ECMAScript, одобренная комитетом TC39. Она включает в себя несколько интересных функций, которые должен знать каждый разработчик JavaScript. Итак, в этой статье я расскажу о некоторых основных особенностях ES2021, чтобы дать вам лучшее понимание.
Promise.any
Обещание promise.all() было введено в ES2020 для одновременного выполнения нескольких обещаний и выполнения действий, когда все они были выполнены (выполнены или отклонены). В ES2021 появился метод Promise.any(), который может обрабатывать массив обещаний.
Метод Promise.any() принимает список обещаний и возвращает значение первого разрешенного обещания. В следующем примере мы передаем два обещания методу Promise.any(), и он выдаст результат, как только будет разрешено первое обещание, поскольку оно имеет минимальное время ожидания.
// When all the promises are passed.
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 10000, "100 second");
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 20000, "200 second");
});
let promises = [promise1, promise2];
Promise.any(promises).then((value) => {
console.log(value); // outputs “100 second”
})
Если ни одно из поставленных в очередь обещаний не разрешится, метод Promise.any() вернет отклоненное обещание, возвращающее AggregateError — коллекцию всех найденных ошибок.
// When all the promises are rejected.
const promise1 = new Promise((resolve, reject) => {
setTimeout(reject, 1000, "100 second");
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(reject, 2000, "200 second");
});
let promises = [promise1, promise2];
Promise.any(promises).then((value) => {
console.log(value);
}).catch((err) => { console.log("error: " + err) })
// outputs error: AggregateError: All promises were rejected
AggregateError
AggregateError — это подкласс ошибок, который объединяет несколько ошибок в один объект.
// Syntax
AggregateError(Array<Error>, “message”);
AggregateError генерируется, если все обещания, переданные в promise.any(), не выполняются, после чего следует сообщение, описывающее ошибку.
// Creating an AggregateError.
try {
throw new AggregateError(
[new Error("an error"), new TypeError("Typeof error for some field")], "common error message");
}
catch (e) {
console.log(e instanceof AggregateError); // true
console.log(e.message); // "common erro message" console.log(e.name); //"AggregateError" console.log(e.errors); //[Error: "an error", TypeError: Typeof error for some field]
}
Как показано на рисунке, AggregateError позволяет получить сообщения обещаний, которые способствовали возникновению ошибки, используя AggregateError.errors.
WeakRef и финализаторы
WeakRef означает слабые ссылки. Слабые ссылки обычно помогают нам создавать кэши или отображения на более крупные объекты. Переменная WeakRef создает слабую ссылку на переданный ей объект. Поскольку переменная WeakRef является единственной ссылкой на объект, движок JavaScript может безопасно удалить ее из памяти и освободить место, когда браузер выполняет сборку мусора.
Обратитесь к следующему коду.
//WeakRef variable value can be accessed via the deRef method.
const weakRef = new WeakRef({
age: 13;
});
console.log(weakRef.deref().age)
// output: 13
Примечание: Пожалуйста, по возможности избегайте использования WeakRef, поскольку его поведение не гарантировано.
WeakRef и финализаторы — это две функции, которые идут вместе. Метод FinalizationRegistry позволяет запросить обратный вызов после того, как объект стал недостижимым (собрал мусор).
Сначала определите реестр с обратным вызовом, который вы хотите запустить. Затем вызовите метод .register на определенном реестре с объектом, который вы хотите наблюдать. Это позволит вам точно узнать, когда память объекта будет освобождена сборщиком мусора.
Обратитесь к следующему коду.
const registry = new FinalizationRegistry(value => {
console.log("Finalizer");
});
registry.register({object: "Do Something"}, "testObject");
Здесь объект, переданный в метод register(), имеет слабую ссылку, поэтому при сборке мусора второй параметр передается финализатору (testObject).
Числовые разделители
Эта новая возможность позволяет использовать подчеркивания в качестве разделителей для числовых литералов. Это повышает удобочитаемость чисел, визуально разделяя группы чисел.
Обратитесь к следующему примеру.
// A billion
const amount = 1000000000; // Previous
const amount = 1_000_000_000; // With ES2021
// Hundreds of millions
const amount = 1475938.38; // Previous
const amount = 1_475_938.38; // With ES2021
Теперь это гораздо легче читать. Это не влияет на производительность или равенство. 1000000000 по-прежнему равно 1_000_000_000.
String.protype.replaceAll
Метод replaceAll заменяет все вхождения шаблона на переданную ему замену. Параметр pattern может быть строкой или regex-шаблоном, а параметр replacement может быть строкой или функцией.
Метод replaceAll является усовершенствованием метода String.replace, который может заменить только первое вхождение шаблона.
Перед
const message = 'hello+good+morning';
const messageWithSpace = message.replace(/+/g, ' ');
// hello good+morning
После (с методом replaceAll)
const message = 'hello+good+morning';
const messageWithSpace = message.replaceAll('+', ' ')
// hello good morning
Операторы логического присваивания
В обновлении ECMAScript 2021 были введены три новых логических оператора присваивания. Эти операторы довольно похожи на существующие логические операторы, и они помогают присваивать значения переменным в одной строке.
- Логический оператор присваивания OR ||=
- Логический оператор присваивания AND &&=
- Логический оператор присваивания nullish (??=)
Логический оператор присваивания OR (||=)
p ||= q
// This is exactly identical to the below expression.
if (!p) {
p = q
}
// If p is false, q will be assigned to it. Otherwise, p is left at its original value.
Логический оператор присваивания AND (&&=)
p &&= q
// This is exactly identical to the below expression.
if (p) {
p = q
}
// If p is true, q will be assigned to it. Otherwise, p is left at its original value.
Логический оператор присваивания nullish (??=)
x ??= y
Присваивает y к x, только если x либо нулевой, либо неопределенный.
Частные аксессоры
Приватные аксессоры работают очень похоже на приватные методы. Итак, давайте создадим простой класс с приватным методом, чтобы понять разницу.
Предыдущие версии
class ExampleClass {
MyMethod1() {
console.log("Public method")
}
#MyMethod2() {
console.log("Hidden method")
}
}
const exampleClass= new ExampleClass ()
exampleClass.MyMethod1()
exampleClass.MyMethod2()
// output
// Public method
// exampleClass.MyMethod2 is not a function.
В предыдущих версиях ECMAScript мы не можем вызвать MyMethod2(), поскольку это приватный метод. Если вы запустите предыдущий код, он выдаст ошибку, говоря, что exampleClass.MyMethod2 не является функцией.
С ES2021
С обновлениями ES2021 мы можем создать новый публичный метод, вызываемый внутри класса (callAll() ), и получить доступ к частному методу.
class ExampleClass {
MyMethod1() {
console.log("Public method")
}
#MyMethod2() {
console.log("Hidden method")
}
callAll() {
this.MyMethod1()
this.#MyMethod2();
}
}
const exampleClass = new ExampleClass()
exampleClass.callAll();
// output
// Public method
// Hidden method
Как и приватные методы, мы теперь можем определять геттеры и сеттеры в JavaScript, делая их доступными только внутри класса или созданного экземпляра.
class ExampleClass {
get #Greeting() {return "Hello Good Morning !"
}
get viewGreetingMsg() {
return this.#Greeting
}
}
let exampleClass = new ExampleClass();
console.log(exampleClass.viewGreetingMsg);
// Hello Good Morning !
Опции dateStyle и timeStyle для Intl.DateTimeFormat
Intl.DateTimeFormat может включать форматирование даты и времени с учетом языка. Предлагаемые опции dateStyle и ** timeStyle** позволяют запрашивать дату и время заданной длины с учетом местных особенностей.
// Time with short format let.
let time = new Intl.DateTimeFormat('en' , { timeStyle: 'short' });
console.log(time .format(Date.now())); // 09:27 PM
// Time with medium format.
let time = new Intl.DateTimeFormat('en' , { timeStyle: 'medium'});
console.log(time .format(Date.now())); //09:27:50 PM
// Time with long format.
let time = new Intl.DateTimeFormat('en' , { timeStyle: 'long' }) ;
console.log(time .format(Date.now())); // 11:27:50 PM GMT+11
Заключение
В этой статье я рассмотрел восемь основных моментов обновления ES2021. Надеюсь, эта статья помогла вам улучшить свои знания JavaScript. Спасибо за прочтение.
Syncfusion Essential JS 2 — это единственный пакет, который вам когда-либо понадобится для создания приложений. Он содержит более 65 высокопроизводительных, легких, модульных и отзывчивых компонентов пользовательского интерфейса в одном пакете. Загрузите бесплатную пробную версию, чтобы оценить элементы управления уже сегодня.
Если у вас есть вопросы или комментарии, вы также можете связаться с нами через наши форумы поддержки, портал поддержки или портал обратной связи. Мы всегда рады помочь вам!
Похожие блоги
- 5 различных способов глубокого сравнения объектов JavaScript
- Функции высшего порядка JavaScript: Полное руководство
- Улучшение удобства использования веб-приложений JavaScript с помощью Web Vitals
- Что нового в 2022 году Том 2: Essential JS 2