Журнал об IT-бизнесе, технологиях и цифровой трансформации

JavaScript: 10 новых фич в ES2020, о которых вам следует знать Mail.ru Cloud Solutions
Mail.ru Cloud Solutions
  • 28 мая
  • Разработка

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 или другим, который используется у вас).

Прим. переводчика — вы также можете создать переменную с новым типом BigInt через конструктор: BigInt(num).

Это улучшение не имеет обратной совместимости, так как традиционная система чисел подчиняется стандарту IEEE754 (который просто не поддерживает числа размера, допустимого в BigInt).

Прим. переводчика: также нужно внимательно отнестись к преобразованиям между Number и 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-синтакс:

import * as utils from ‘./utils.mjs’

Однако до недавнего времени не было симметричного export-синтаксиса:

export * as utils from ‘./utils.mjs’

До этого вы могли использовать эквивалент:

import * as utils from ‘./utils.mjs’
export { utils }

9. Четко описанный порядок перечисления в цикле for-in

Спецификация ECMA не указывала, в каком порядке должно выполняться перечисление свойств объекта в цикле for(x in y). Несмотря на то что браузеры до сих пор самостоятельно реализовали этот порядок, официально стандартизирован он был только в ES2020.

10. import.meta

Объект import.meta был создан в последней реализации ECMAScript, он имеет Prototype, равный null.

Рассмотрим подключаемый модуль:

Вы можете получить мета-данные этого модуля, используя объект import.meta:

console.log(import.meta); // { url: "file:///home/user/module.js" }

Он возвращает объект со свойством url, которое указывает на адрес модуля. Это может быть как адрес, по которому был загружен модуль (для внешних скриптов), так и document base URL (для инлайновых скриптов).

Прим. переводчика — также вы можете посмотреть неплохое видео по этой теме:

Впечатляет последовательность и скорость, с которой сообщество JavaScript эволюционировало и развивается. Удивительно и действительно замечательно наблюдать, как JavaScript прошел за 10 лет путь от языка, который освистывали, к одному из сильнейших, гибких и универсальных языков.

Оригинал статьи на VC.ru

Ссылка скопирована!

Что еще почитать про ИТ-бизнес