Еще одна версия ECMAScript, ECMAScript 2020 aka ES11, выпущена с некоторыми удивительными функциями, которые помогут вам повысить уровень вашей игры на JavaScript. В этом разделе мы рассмотрим некоторые из основных функций, которые были доработаны и официально объявлены как часть последней спецификации ECMA.

Переменные частного класса

Функция, которая отсутствовала, поскольку классы были официально объявлены в версии ES6, заключалась в том, чтобы иметь частные переменные внутри класса. Было проделано много работы, чтобы выполнить требование частной переменной. Наконец, теперь он включен в ES11.

Чтобы сделать переменную частной внутри класса, используйте символ # перед именем переменной, как в примере выше.

BigInt

Максимальное числовое значение, которое может хранить переменная в JavaScript, равно Math.pow (2,53) -1, что также является максимальным числом, определяемым параметром Number.MAX_SAFE_INTEGER.

Чтобы решить эту проблему, введен BigInt. К числу BigInt добавляется символ n l, как в примере ниже.

1. Переменная может хранить значения больше, чем Number.MAX_SAFE_INTEGER, но тогда она может показывать неожиданное поведение. Отсюда и название
«MAX_SAFE_INTEGER»
2 . Кроме того, арифметические операции с числами BigInt должны выполняться с числами BigInt.
3. BigInt не имеют обратной совместимости, поскольку предыдущие системы счисления не поддерживают такие большие числа.

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

Одной из самых ожидаемых функций ES2020 был динамический импорт, который помогает нам динамически импортировать модули. Мы можем импортировать модули с помощью async / await на основе условных значений, как в примере ниже.

В приведенном выше примере используется Webpack и Babel. Такой подход помогает избежать загрузки модуля, когда он нам не нужен, и избежать загрязнения пространства имен.

Promise.allSettled

Функцию Promise.allSettled можно назвать усовершенствованной функцией функции Promise.all. Обе функции принимают массив обещаний. Разница в том, что Promise.all вернет массив «разрешенных» результатов этих обещаний, тогда как Promise.allSettled вернет массив «согласованных» результатов обещаний, т. Е. Независимо от решается или отклоняется.

В приведенном выше примере мы передали в функцию Promise.allSettled массив обещаний, один из которых будет разрешен, а другой - отклонен. Promise.allSettle возвращает одно обещание, которое разрешается после того, как были урегулированы все обещания.

Оператор нулевого слияния

В JavaScript число 0, пустая строка s, false, NaN, null и undefined используются для представления значений ложных (неверных). Нулевое объединение - это функция, при которой мы проверяем истинно нулевые значения, а не ложные значения, тогда как истинно нулевые значения будут - только null или undefined.

Нулевое объединение выполняется с помощью - ??

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

Необязательная цепочка

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

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

String.prototype.matchAll ()

Функция matchAll добавлена ​​как официальная функция в семейство String. Он ведет себя точно так же, как функция сопоставления. Вы можете использовать matchAll, если хотите, чтобы их группы совпадали по всему миру, чего нельзя добиться с помощью функции соответствия.

В приведенном выше примере, как вы видите, matchAll решает проблему функции сопоставления, не возвращающей информацию о группах и индексе.

globalThis

Предположим, у вас есть приложение, которое будет работать в браузере, на узле, а также внутри веб-воркеров, и у вас есть определенное значение, которое присутствует в глобальном объекте. Имя глобальных объектов, а также способы и функции доступа к ним различаются на всех этих платформах (окно для браузера, глобальное для узла и self для веб-работников).

globalThis оказывается решением, поскольку он относится к глобальному объекту на всех этих платформах.