JavaScript: 10 новых фич в ES2020, о которых вам следует знать
Хорошие новости — новые фичи ES2020, улучшенной спецификации JavaScript, финализированы. Теперь есть полное представление об изменениях, которые ждут нас в новом стандарте. Перевели и немного дополнили статью независимого фронтенд-разработчика со списком основных нововведений.
1. BigInt
Появился тип данных BigInt — одно из самых ожидаемых нововведений в JavaScript. Он на деле позволяет разработчикам получить гораздо большее целочисленное представление в JS-коде для обработки данных.
На данный момент самое большое число, которое вы могли хранить в JavaScript в виде Integer, — это pow(2, 53) -1 (2 в 53 степени минус 1). Но BigInt позволяет выйти за эти пределы:
Однако вам нужно добавлять символ n в самом конце числа — это видно в примере выше. Символ n обозначает, что это данные в BigInt и должны быть иначе обработаны движком JavaScript (V8 или другим, который используется у вас).
Это улучшение не имеет обратной совместимости, так как традиционная система чисел подчиняется стандарту IEEE754 (который просто не поддерживает числа размера, допустимого в BigInt).
2. Dynamic import
Опция динамического импорта — это функционал из коробки, который позволяет гибко подгружать JS-файлы как модули в вашем приложении. Это выглядит так же, как вы могли делать такую подгрузку раньше с помощью Webpack и Babel.
Это новшество поможет использовать прием доставки кода по требованию, более известный как code splitting (разделение кода), без всяких накладных расходов в виде модулей Webpack или других сборщиков кода. Вы также можете подгружать код в зависимости от условий в блоках if-else.
Хорошая вещь, так как вы фактически импортируете только сам модуль, и таким образом не загрязняете глобальное пространство имен:
3. Nullish Coalescing
Nullish coalescing добавляет возможность проверить null-подобные значения вместо проверки false-значений. В чем разница между null- и false-значениями, спросите вы?
В JavaScript многие значения false-подобные: это пустые строки, значение 0 в number, undefined, null, false, NaN.
Однако во многих ситуациях может потребоваться проверка, является ли выражение null-подобным, то есть равным только null или undefined. Например, когда вы допускаете, что переменная может быть пустой строкой, числом 0 ила даже false.
В таком случае вы сможете использовать новый nullish coalescing-оператор ??:
Отлично видно, как оператор || всегда возвращает true-значение (не делает разницы между false, NaN, null, undefined), тогда как ?? возвращает не null значение (NaN и false).
4. Optional Chaining
Синтакс Optional Chaining позволяет обратиться к глубоко вложенным свойствам объекта без того, чтобы беспокоиться, есть ли такие свойства или нет.
Если они есть — отлично! Если нет, выражение вернет undefined.
Это работает не только со свойствами объектов, но также с вызовами функций и с массивами. Очень удобно! Вот примеры:
5. Promise.allSettled
Метод allSettled объекта Promise принимает массив промисов и разрешает их (resolve) только тогда, когда все они готовы — без разницы, в статусе resolved или rejected.
Раньше это не было доступно в нативном JS, хотя были похожие реализации, например, Promise.race или Promise.all. Это приносит в нативный JS подход «просто выполнить все промисы, результат выполнения каждого меня не интересует»:
6. String#matchAll
В прототип объекта String добавлен новый метод matchAll, который предназначен для работы с регулярными выражениями. Он возвращает итератор, который в свою очередь возвращает все подходящие группы в строке, одну за одной. Давайте посмотрим на простой пример:
7. globalThis
Если вы писали когда-нибудь кросс-платформенный JS-код, который должен работать в Node, в браузерном окружении, а также внутри web-workers, у вас наверняка были сложности с обращением к глобальному объекту.
Это происходит от того, что в браузере глобальный объект — это window, в среде исполнения Node.js — это global, в веб-воркерах — это self. Больше сред исполнения — больше различных значений глобального объекта.
Таким образом, вам потребуется ваша собственная имплементация функционала по определению среды выполнения кода с последующим корректным использованием нужного глобального объекта — во всяком случае, так было до настоящего времени.
ES2020 подарил нам globalThis, который всегда указывает на текущий глобальный объект, независимо от того, в какой среде выполняется код:
8. Экспортирование пространств имен модулей
В модулях JavaScript всегда можно было использовать следующий import-синтакс:
Однако до недавнего времени не было симметричного export-синтаксиса:
До этого вы могли использовать эквивалент:
export { utils }
9. Четко описанный порядок перечисления в цикле for-in
Спецификация ECMA не указывала, в каком порядке должно выполняться перечисление свойств объекта в цикле for(x in y). Несмотря на то что браузеры до сих пор самостоятельно реализовали этот порядок, официально стандартизирован он был только в ES2020.
10. import.meta
Объект import.meta был создан в последней реализации ECMAScript, он имеет Prototype, равный null.
Рассмотрим подключаемый модуль:
<script type="module" src="module.js"></script>Вы можете получить мета-данные этого модуля, используя объект import.meta:
console.log(import.meta); // { url: "file:///home/user/module.js" }Он возвращает объект со свойством url, которое указывает на адрес модуля. Это может быть как адрес, по которому был загружен модуль (для внешних скриптов), так и document base URL (для инлайновых скриптов).
Впечатляет последовательность и скорость, с которой сообщество JavaScript эволюционировало и развивается. Удивительно и действительно замечательно наблюдать, как JavaScript прошел за 10 лет путь от языка, который освистывали, к одному из сильнейших, гибких и универсальных языков.
