Что добавят в JavaScript уже в 2020 году | | ДОСТУПНЫЙ ОТДЫХ
Что добавят в JavaScript уже в 2020 году
Интересное

Что добавят в JavaScript уже в 2020 году

Недавно опциональный доступ к аттрибутам (Optional Chaining) и значение по умолчанию для атрибутов (Nullish Coalescing) перешли на последний, четвёртый этап процесса TC39.

На практике это означает, что эти и другие нововведения станут частью стандарта JavaScript уже в этом, 2020 году. Их мы и рассмотрим в этой статье.

Отслеживать поддержку браузерами можно здесь («2020 features») — прим. перев.

Что добавят в JavaScript уже в 2020 году

String.prototype.matchAll

Использование «липких» (sticky) или глобальных регулярных выражений, когда надо захватить несколько групп на одной строке, может оказаться нетривиальным.

String.prototype.match не возвращает захваченные группы при наличии глобального флага, а без него можно получить только первое полное соответствие шаблону и его группы.

Пример:

let regexp = /t(e)(st(d?))/g;
let str = ‘test1test2’;
const results = str.match(regexp);
console.log(results);

Результат с флагом «g»

Что добавят в JavaScript уже в 2020 годуРезультат без флага «g»

Что добавят в JavaScript уже в 2020 году

Использование String.prototype.matchAll гарантирует, что будут возвращены все соответствия и их группы.

Пример:

let regexp = /t(e)(st(d?))/g;
let str = ‘test1test2’;
let array = […str.matchAll(regexp)];
console.log(array);

Результат:

Что добавят в JavaScript уже в 2020 году
BigInt

До появления BigInt наибольшее значение, представляемое Number, было равно 2⁵³-1 (MAX_SAFE_INTEGER). Теперь в JavaScript будет примитив, способный превзойти лимит.

Создать BigInt можно добавив ‘n’ к числу или используя функцию BigInt().

Пример:

let bigInt = 4n
console.log(bigInt * bigInt)

  • BigInt не эквивалентен Number, но может быть приведён к последнему.
  • При выполнении операций вроде деления, результат будет округлён до 0.
  • Нельзя использовать с Number без приведения типов.

Попытка сложить BigInt с числом…

let bigInt = 4n + 2
console.log(bigInt)

… приводит к исключению:

Что добавят в JavaScript уже в 2020 году
globalThis

Доступ к глобальным объектам в мире JavaScript всегда был головной болью. Вы должны быть знакомы со специфическим синтаксисом для окружения, что создаёт лишние трудности при написании переносимого кода и приводит к необходимости использовать что-то вроде getGlobal.

Пример:

var getGlobal = function () {
if (typeof self !== ‘undefined’) { return self; }
if (typeof window !== ‘undefined’) { return window; }
if (typeof global !== ‘undefined’) { return global; }
throw new Error(‘no global object found’);
};

var globals = getGlobal();

С появлением globalThis можно перестать думать об окружении и получать глобальные объекты унифицировано.

Читать  Пожарная часть в Альпах (10 фото)

Пример:

globalThis.someFunction = () => ‘hello’

console.log(globalThis.someFunction())
Promise.allSettled

Допустим, у вас есть несколько промисов, и вы хотите что-то сделать после их завершения (неважно, успешного или нет). Promise.allSettled нужен именно для этого.

Пример:

const fulfilledPromise = Promise.resolve(«success»);
const rejectedPromise = Promise.reject(«error»)
const promises = [fulfilledPromise, rejectedPromise];

Promise.allSettled(promises).
then((results) => results.forEach((result) => console.log(result)));

Результат:

Что добавят в JavaScript уже в 2020 году
Dynamic Import

Хотите загрузить модуль во время выполнения, в зависимости от определенного условия? Теперь это можно будет сделать без сторонних библиотек.

Достаточно вызвать функцию import, которая вернёт промис.

Пример:

import(«some_module»)
.then(module => {
module.doSomething();
})
.catch(err => {
console.error(err.message);
});

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

Пример с использованием шаблона:

import(`${some_module}.js`)
.then(module => {
module.doSomething();
})
.catch(err => {
console.error(err.message);
});
Nullish coalescing

Когда нужно получить атрибут или значение по умолчанию, если он null или undefined, мы обычно используем оператор ‘||’.

До Nullish coalescing:

const response = someResponse.properties.mayBeUndefined || ‘Response’;

Представьте, однако, что атрибут имеет «ложное» значение.

Проблема использования ‘||’:

const someResponse = {properties: { mayBeUndefined: »}}
const response = someResponse.properties.mayBeUndefined || ‘Response’;

console.log(response)

Результат:

Что добавят в JavaScript уже в 2020 годуЭто нежелательное поведение. В данном случае нам нужно было значение атрибута, а не значение по умолчанию.

С Nullish coalescing этой проблемы не будет. Значение по умолчанию будет возвращено только для атрибутов null или undefined.

Использование Nullish coalescing:

const someResponse = {properties: { mayBeUndefined: »}}
const response = someResponse.properties.mayBeUndefined ?? ‘Response’;

console.log(response)

Результат:

Что добавят в JavaScript уже в 2020 году
Optional Chaining

Чтобы получить доступ к под-атрибуту, нам нужно убедиться, что атрибут выше существует. Пока что существование каждого из над-атрибутов нужно проверять вручную.

До Optional Chaining:

const someObj = {
property: ‘prop’,
otherProperty: {
name: ‘prop2’
}
};

const property = someObj.NotOtherProperty ? someObj.NotOtherProperty.name: undefined;
console.log(property);

С появлением Optional Chaining, можно будет использовать оператор ‘?.’ для опционального доступа к под-атрибутам. Код ниже эквивалентен коду выше.

Использование Optional Chaining:

const someObj = {
property: ‘prop’,
otherProperty: {
name: ‘prop2’
}
};

const property = someObj.NotOtherProperty?.name;
console.log(property);

Optional Chaining делает код гораздо чище, особенно, если атрибутов в строке много.

Читать  Странные предметы за бельгийскими окнами (14 фото)

Заключение

Вы можете попробовать запустить примеры из статьи в консоли: некоторые из них уже реализованы в последних версиях браузеров, другие, вероятно, будут внедрены очень скоро. Так или иначе, к возможностям из статьи уже можно начинать относиться как к части языка образца 2020 года.

Источник

I heart FeedBurner