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

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

Строка.прототип.matchAll()

Метод matchAll() возвращает итератор всех результатов, совпадающих со строкой и регулярным выражением, включая захваченные группы.

const regex = /t(e)(st(\d?))/g;
const string = 'test1test2';
const matches = string.matchAll(regex);
for (const match of matches) {
  console.log(match);
}
// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', groups: undefined]
// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', groups: undefined]

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

import() теперь возвращает обещание для объекта пространства имен модулей запрошенного модуля. Теперь вы можете назначить их переменной, используя async/await.

// Example 1 - using async/await
if (aCondition) {
  const dynamicModule = await import('./module');
  dynamicModule.amazingFunction('2');
}
// Example 2 - using promises
Promise.all([
    import('./module1.js'),
    import('./module2.js'),
    import('./module3.js'),
])
.then(([module1, module2, module3]) => {
    ···
});

BigInt

BigInt — это новый примитивный тип, который следует использовать только тогда, когда ожидаются значения больше 2^53.

BigInts — это не совсем число, но они ведут себя одинаково и их можно сравнивать друг с другом. Обратите внимание, что BigInt будет округлен до 0.

const theBiggestInt = 9007199254740991n
const alsoHuge = BigInt(9007199254740991)
const rounded = 5n / 2n
// returns 2n, not 2.5n

//Compare to a Number
0n === 0
// false

0n == 0
// true

Promise.allSettled

Метод Promise.allSettled() возвращает обещание, которое разрешается после выполнения всех заданных обещаний. По сравнению с Promise.all() не имеет значения, были ли промисы разрешены правильно или они были отклонены.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];
// Promise.all()
Promise.all(promises).
  then(response => console.log(response))
  then(error => console.log(error))
// expected output:
// foo

// Promise.allSettled()
Promise.allSettled(promises).
  then(response => console.log(response))
// expected output:
[ {status: 'fulfilled', value: 3},
  {status: 'rejected', reason: 'foo'} ]

глобальныйЭто

Исторически сложилось так, что когда мы хотели повторно использовать код через среды и получить доступ к глобальному объекту, нам приходилось делать некоторые хаки, например:

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'); 
}; 

var globals = getGlobal(); 

if (typeof globals.setTimeout !== 'function') { 
  // no setTimeout in this environment! 
}

Однако с недавно представленным объектом globalThis доступ к глобальному объекту стандартизирован:

if (typeof globalThis.setTimeout !== 'function') {
  // no setTimeout in this environment!
}

Нулевое слияние

Чтобы объяснить это, нам нужно провести различие между двумя понятиями: ложными и нулевыми значениями.

+-----------+-----------+
|  falsy    | nullish   |
+-----------+-----------+
| undefined | undefined |
| null      | null      |
| NaN       |           |
| 0         |           |
| ""        |           |
| false     |           |
+-----------+-----------+

Новый Оператор нулевого объединения (??) будет возвращать левое значение, когда оно не является нулевым, по сравнению с логическим оператором ИЛИ (||), который возвращает левое значение, когда оно не является нулевым. фальшивая.

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"
const logicFoo = null || 'default string';
console.log(logicFoo);
// expected output: "default string"
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
const logicBaz = 0 || 42;
console.log(logicBaz);
// expected output: 42

Для… по порядку

ECMA-262 оставляет порядок for (a in b) неуказанным, но почти каждый движок и браузер это сделали. Теперь разные движки согласовали порядок итерации свойств, чтобы иметь стандартизированное поведение.

Необязательная цепочка

Необязательная цепочка (?.)синтаксис позволяет получить доступ к глубоко вложенным свойствам объекта, не беспокоясь о том, существует ли свойство или нет. Если свойство не существует, оно вернет значение undefined.

const player = {
  name: 'Alex',
  cat: {
    name: 'Kitty'
  }
};
const dogName = player.dog?.name;
// undefined
const catName = player.cat?.name;
// Kitty

Совместимость с браузером:

Рабочий стол:

+------------------+--------+------+---------+----+-------+--------+
|                  | Chrome | Edge | Firefox | IE | Opera | Safari |
+------------------+--------+------+---------+----+-------+--------+
| matchAll()       |   73   |  79  |    67   |  X |   60  |    X   |
| import           |   63   |  79  |    67   |  X |   50  |  11.1  |
| BigInt           |   67   |  79  |    68   |  X |   54  |    X   |
|Promise.allSettled|   76   |  79  |    71   |  X |   63  |   13   |
| globalThis       |   71   |  79  |    65   |  X |   58  |  12.1  |
|Nullish Coalescing|   80   |  80  |    72   |  X |    X  |  13.1  |
|Optional Chaining |   80   |  80  |    74   |  X |   67  |    X   |
+------------------+--------+------+---------+----+-------+--------+

Мобильный:

+------------------+------------------------------------+--------+
|                  |            Android                 |   iOS  |
+------------------+---------+--------+---------+-------+--------+
|                  | Webview | Chrome | Firefox | Opera | Safari |
+------------------+---------+--------+---------+-------+--------+
| matchAll()       |    73   |   73   |    67   |   52  |    X   |
| import           |    63   |   63   |    67   |   46  |  11.3  |
| BigInt           |    67   |   67   |    68   |   48  |    X   |
|Promise.allSettled|    76   |   76   |     X   |   54  |   13   |
| globalThis       |    71   |   71   |    65   |   50  |  12.2  |
|Nullish Coalescing|    80   |   80   |     X   |    X  |  13.4  | |Optional Chaining |    80   |   80   |     X   |    X  |    X   |
+------------------+---------+--------+---------+-------+--------+

Node.js:

+------------------+---------+
|                  | Node.js |
+------------------+---------+
| matchAll()       |  12.0.0 |
| import           |  13.2.0 |
| BigInt           |  10.4.0 |
|Promise.allSettled|  12.9.0 |
| globalThis       |  12.0.0 |
|Nullish Coalescing|     X   |
|Optional Chaining |     X   |
+------------------+---------+