В новом году была выпущена свежая версия 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 на самом деле много интересных новых функций. Однако большинство из них, к сожалению, не поддерживаются старыми браузерами. Немаловажно то, что они стабильны далеко не в каждой среде. Поэтому вам стоит основательно подойти к вопросу о том, какое окружение поддерживать в вашем проекте.