Новые функции в ES2020

В новом году была выпущена свежая версия ECMAScript! Это хорошая новость для тех, кто любит ECMAScript. В предыдущей версии ES было много забавных и полезных функций. Чего же ожидать на этот раз? Давайте ознакомимся вкратце!

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

Теперь вы имеете возможность импортировать файлы динамически.

import { max } from '../math.js';
const nums = [1, 2, 3];
max(...nums); // 3

Выше представлен способ, с помощью которого вы можете импортировать файл. Механизм jаvascript видит модули в файле и переносит их в тот файл, где эти модули используются. Однако, теперь вы можете сделать это следующим образом.

const numbs = [1, 2, 3];
if (numbs.length) {
  const math = '../math';
  import(math)
    .then(module => {
      module.max(...numbs);
    })
}

Динамический импорт возвращает promise. Это означает, что вы также можете написать это следующим образом.

const math = '../math.js';
const module = await import(math);
module.max(...numbs);

Чем эта функция хороша? Вы можете использовать динамический импорт в обычном коде jаvascript, как в примере выше.

Вот браузеры, поддерживающие динамический импорт:

- Chrome: 63
- Edge: No Support
- Firefox: 67
- IE: No Support
- Opera: 50
- Safari: 11.1

BigInt
- Если вам необходимо добавить два числа, которые достаточно велики, чтобы вызвать перегрузку…

Number.MAX_VALUE * 2 // Infinity

…BigInt, в таком случае, просто спаситель.

Вы можете создать BigInt, вызвав конструктор BigInt() с круглыми скобками или 2n с 'n' в конце числа.

const num = 2;
const bigNum = BigInt(num);
bigNum; // 2n
bigNum === 2n; // true

Вы также можете добавлять, вычитать, умножать и делить.

const bigN = BigInt(10);
bigN + bigN; // 20n
bigN * 3n; // 30n
bigN - BigInt('55'); // 45n
bigN / 3n; // 3n

Обратите внимание на то, что bigN / 3n возвращается 3n, а не 3.33333n. Поскольку, судя по его имени, он обрабатывает только целые числа. Поэтому bigN / 3n так похоже на Math.floor(10 / 3).

Однако, к сожалению, вам не удастся создать BigInt с числом с плавающей точкой. Также вы не сможете использовать BigInt и Number вместе.

BigInt(3.3); 
// Uncaught RangeError 

BigInt('3.3');
// Uncaught SyntaxError

BigInt(1) + 1;
// Uncaught TypeError
// Cannot mix BigInt and other types

На практике существует единственный допустимый способ смешивания операций - когда вы сравниваете размер этих операций.

BigInt(1) < 2 // true

Также BigInt может быть воспринят как число, если он не пребывает в условии if.

function print(n) {
  if (BigInt(n)) {
   console.log('hi');
  } else {
   console.log('bye');
  }
}
print(1); // hi
print(0); // bye

Вот перечень браузеров, которые поддерживают BigInt:
-Chrome: 67
-Edge: No Support
-Firefox: 68
-IE: No Support
-Opera: 54
-Safari: No Support

Promise.allSettled
Метод, весьма схожий с Promise.all , но при этом имеющий существенные отличия. Promise.all возвращает promise, который выполнится тогда, когда будут выполнены все promises, переданные в виде перечисляемого аргумента, или будет отклонено любое из переданных promise. Однако Promise.allSettled не заботится об этом. Для него является важным знать, все ли promise выполнены, вне зависимости от того, какой у них статус. Таким образом, каждый переданный promise может быть выполнен или отклонен, но для Promise.allSettled это не имеет значения. Единственное условие – все они должны быть сделаны.

const promises = [
  Promise.resolve(1),
  Promise.reject(2),
  Promise.resolve(3)
];

const onResolve = (data, prefix) => {
  console.log(prefix, 'Resolved with', data);
};

const onReject = (err, prefix) => {
  console.log(prefix, 'Rejected with', err);
};

Promise.all(promises)
  .then(onResolve.bind(null, 'all'))
  .catch(onReject.bind(null, 'all'));

// Result:
// all Rejected with 2

Promise.allSettled(promises)
  .then(onResolve.bind(null, 'allSettled'))
  .catch(onReject.bind(null, 'allSettled'));

// Result:
// allSettled Resolved with
// [
//   {
//     "status": "fulfilled",
//     "value": 1
//   },
//   {
//     "status": "rejected",
//     "reason": 2
//   },
//   {
//     "status": "fulfilled",
//     "value": 3
//   }
// ]

Это должно быть достаточно полезным, когда вы хотите выполнить какую-либо работу перед началом определенных действий. Например, получить все необходимые данные до того, как пользователь увидит страницу.

Данные браузеры поддерживают Promise.allSettled:

-Chrome: 76
-Edge: No Support
-Firefox: 71
-IE: No Support
-Opera: Unknown
-Safari: Unknown

globalThis
Очень простое в использовании свойство.
Глобальное свойство globalThis содержит значение глобального this, который является глобальным объектом. В браузере globalThis будет this, в Node.js — global. Следовательно, больше нет нужды в том, чтобы думать о различных проблемах окружения.

// worker.js
globalThis === self

// node.js
globalThis === global

// browser.js
globalThis === window

Вот таким образом все работает изнутри, но лучше не используйте это в своем коде!

var getGlobal = function () { 
  if (typeof self !== 'undefined') { return self; } 
  if (typeof window !== 'undefined') { return window; } 
  if (typeof global !== 'undefined') { return global; } 
  throw new Error('unable to locate global object'); 
};

Поддержка окружения для gloablThis:
-Chrome: 71
-Edge: No Support
-Firefox: 65
-IE: No Support
-Opera: No Support
-Safari: 12.1
-Node: 12

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