Выпущена новая версия ECMAScript под названием ES2020. Теперь для тех, кто любит ECMAScript, что может быть лучше, чем начать это десятилетие с знакомства с особенностями ES2020, в этой версии ECMAScript действительно есть несколько хороших новых функций, поскольку изучающий это очень важно знать о новых стандартах и ​​не отставать от новых функций, которые происходят, поэтому давайте начнем с некоторых функций ES2020 и получим их базовые знания.

1. String.prototype.matchAll ()

Уже существует String.prototype.match (), и метод извлекает результат сопоставления строки с регулярным выражением и по имени. должно быть ясно, что метод String.prototype.matchAll () возвращает все результаты сопоставления строки с регулярным выражением с незначительной разницей. из String.prototype.match () метод извлекает итератор всех результатов, соответствующих строке и регулярному выражению, включая группы захвата.

Давайте рассмотрим это на примере:

const regexp = / # \ w * / g;
const str = '#c ool # ecmascript # ecmascript2020';
console.log ([… str.matchAll (regexp)];)
// вывод
// [Массив [#cool], Массив [#ecmascript], Массив [# ecmascript2020]]

2. Оператор Nullish Coalescing (??)
Давайте рассмотрим очень короткий пример, где у нас есть объект, имеющий некоторые пользовательские данные, такие как имя пользователя и количество его дочерних элементов:

const user = {
«userName»: «John»,
«numberOfChildren»: 0
};
console.log (user.numberOfChildren || 1);
// вывод: 1

теперь результат выше будет равен 1, что не совсем правильно, поскольку 0 является одним из значений falsy внутри javascript.
Теперь рассмотрим тот же пример, что и выше, с использованием «nullish оператор объединения », который возвращает его правый операнд, когда его левый операнд равен null или undefined, а в противном случае возвращает левый операнд:

const user = {
«userName»: «John»,
«numberOfChildren»: 0
};
console.log (user.numberOfChildren ?? 1);
// вывод: 0

3. Необязательная цепочка (?.)
Давайте здесь унаследуем и расширим приведенный выше пример пользователя и добавим к нему третье свойство childDetails, которое в дальнейшем является объектом и имеет в нем дополнительные ключи, как показано ниже:

const user = {
«userName»: «John»,
«numberOfChildren»: 1,
«childDetails»: {
«childName»: «Jane» < br />};
};
теперь здесь, если я хочу получить доступ к дочернему имени более чистым способом, я бы попытался сделать что-то вроде этого в коде:

console.log (user && user.childDetails && user.childDetails.childName);
// вывод: «Джейн»

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

console.log (user? .childDetails? .childName);
// вывод: «Jane»

Оператор ?. работает аналогично оператору . оператор цепочки, за исключением того, что вместо того, чтобы вызывать ошибку, если ссылка пустая, выражение возвращает значение undefined

4. Promise.allSettled ()

Это новая функция в promises, которая позволяет нам узнать, что все обещания, которые мы хотим выполнить, были урегулированы , что означает, что эти обещания были выполнены или отклонены. Давайте проиллюстрируем это на другом примере:

const p1 = новое обещание ((разрешить, отклонить) = ›resolve ('p1 был разрешен'));
const p2 = new Promise ((resolve, reject) =› reject ('p2 был rejected '));
const p3 = new Promise ((resolve, reject) = ›resolve (' p3 был разрешен '));

Promise.allSettled ([p1, p2, p3])
.then (response = ›
console.log (response)
);

// вывод:
[{
статус: 'выполнено',
значение: 'p1 был разрешен'
}, {
статус: 'отклонено ',
причина:' p2 был отклонен '
}, {
статус:' выполнено ',
значение:' p3 был разрешен '
}]

5. BigInt

BigInt - это новый примитив, который позволяет представлять целые числа, большие, чем Number.MAX_SAFE_INTEGER (2 в степени 53), которое является наибольшим числом Javascript может быть представлен с помощью числового примитива.
BigInt создается путем добавления n в конец целого числа или вызывая конструктор.
Вы можете выполнять вычитание, сложение, умножение и деление с помощью BigInt.

const hugeNumber = BigInt (50);
hugeNumber + hugeNumber; // 100n
hugeNumber * hugeNumber; // 2500n

6. Динамический импорт

С ES2020 вы можете использовать динамический импорт, который может использоваться из сценариев, а не только из модулей, также поскольку динамический import () возвращает обещание для объекта пространства имен модуля запрошенного модуля. Таким образом, импорт теперь можно назначить переменной с помощью async-await.

const numbersArray = [10.5, 12, 5.1, 6.7];
const math = '../math.js';
const module = await import (math);
модуль .ceil (… numbersArray);

Заключение

Со всеми этими функциями и многими другими функциями веб-разработка определенно перейдет в новую фазу, большая часть ES2020 не поддерживает старые браузеры.
В заключение я хотел бы сказать, продолжайте учиться и продолжайте использовать JavaScripting.

Используемые ресурсы

MDN, Stage-4, tc39, github.