ES11 - это новая ECMAScript-версия javascript, соответствующая 2020 году. В ней есть много интересных функций, которых так ждали разработчики javascript. Давайте посмотрим на некоторые из них с хорошими примерами.

1. globalThis

Глобальный объект в javascript отличался для разной среды выполнения. Для браузера это окно, для узла - глобальное, для веб-работников - собственное.

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

ES2020 имеет globalThis, который стандартизирован для всех сред выполнения. У нас нет особой головной боли при реализации кроссплатформенных приложений.

2. BigInt

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

Как мы знаем, Javascript поддерживает только целочисленный диапазон от Number.MIN_SAFE_INTEGER (-2pow53) до Number.MAX_SAFE_INTEGER (2pow53–1). Любое число вне этого диапазона небезопасно в javascript. Давайте посмотрим на пример,

Как мы видим в приведенном выше примере, если мы добавим что-нибудь к maxInt, результат будет неправильным.

ES2020 предоставляет нам тип данных BigInt , с помощью которого мы можем представлять очень большие целые числа и выполнять с ними операции. Чтобы представить целое число как большое int, мы должны добавить букву n после числа. Мы можем выполнять операции только между двумя большими int.

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

Когда мы создаем класс в javascript, свойства класса доступны для области, в которой доступен объект класса.

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

Как видно из примера, Id имеет частную область видимости, и мы не можем получить доступ к Id непосредственно вне класса.

4. Нулевой оператор слияния

Javascript рассматривает пустую строку и ноль как ноль. Иногда приходится добавлять (ИЛИ) || условие, чтобы иметь значения по умолчанию, когда свойства равны нулю или не определены. В некоторых случаях нам нужно рассматривать «» или ноль как истинные значения, а не как ложные.

ES2020 представляет нового оператора ?? преодолеть эти проблемы

в приведенном выше примере вместо значений по умолчанию нам нужны исходные значения, значения по умолчанию следует рассматривать только тогда, когда значения свойств фактически равны нулю или неопределенному значению.

5. Необязательный оператор цепочки

Когда нам нужно искать свойство внутри глубоко вложенной структуры, если какой-либо узел в пути не определен, JS выдает ошибку. В этих случаях мы должны добавить нулевые проверки по всему пути, чтобы сделать наш код безопасным.

это может быть немного красиво с новым необязательным оператором цепочки «?.»

6. String.protype.matchAll ()

matchAll - это новый метод, добавленный к прототипу строки, который возвращает итератор, включающий все сопоставленные группы в строке с регулярным выражением.

В отличие от метода match (), он включает все согласованные группы в один итератор.

7. Promise.allSettled

Promise.allSettled - это метод, который принимает массив обещаний и возвращает обещание. Это обещание разрешается только тогда, когда все обещания выполнены (разрешены или отклонены)

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

В приведенном выше примере обещания p1 и p2 разрешены, а p3 отклонены. Таким образом, результат имеет статус «выполнен» и «отклонен» соответственно.

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

Функция динамического импорта дает программисту возможность динамически импортировать JS-модули. Раньше эта функция была достигнута с помощью webpack и babel, теперь сам JS поддерживает эту функцию.

В примере показано, что наш module.js динамически импортируется с помощью async и await.

Заключение

Сообщество Javascript очень активно привносит в язык все новые функции. Функции ES2020 очень полезны в современной разработке. Перед использованием в коде убедитесь, что ваши целевые браузеры поддерживают эти функции.