Javascript. 5 новинок, которые мы тратим на ES2021

Откройте для себя новые функции, которые Javascript будет включать в следующую версию языка.

С тех пор, как в 2015 году был выпущен ES6, год за годом Javascript получал интересные новости, улучшающие то, как мы работаем с этим языком.

Это правда, что ни одна из них не была революцией, которая в то время означала функции, включенные в EcmaScript 2015 (оператор расширения, промисы…), но они способствовали тому, чтобы язык Javascript становился все более зрелым.

Теперь, когда мы находимся в конце 2020 года, пришло время рассмотреть все, что произойдет в следующем году с выпуском ES2021.

Логические задания

Если вы не знакомы с «короткими путями» Javascript, первое, что я рекомендую, это посетить эту страницу:

Как вы видели, оператор || можно использовать для присвоения значений по умолчанию:

let bar;
const foo = 'some value';
bar = bar || foo;

С 2021 года мы сможем выполнять это задание в более короткие сроки благодаря оператору ||= :

let bar;
bar ||= 'some value';

В дополнение к нему также был включен оператор &&=:

let foo = 'foo';
let bar = 'bar';
foo = foo && bar; // 'bar'
foo &&= bar; // 'bar'

И оператор ??=, который использует нулевой оператор объединения для выполнения присваивания:

let foo = null;
let bar = 'bar';
foo = foo ?? bar; // 'bar'
foo ??= bar; // 'bar'

String.prototype.replaceAll

В Javascript метод replace для строк имеет характеристику, которая не совсем интуитивна. Если первый аргумент является строкой, будет заменено только первое вхождение:

const p = 'These are foo, foo, and foo.';
p.replace('foo', 'bar'); // 'There are bar, foo, and foo.'

Чтобы метод работал так, как мы наверняка ожидаем, необходимо передать строку в виде регулярного выражения:

const p = 'These are foo, foo, and foo.';
p.replace(/foo/g, 'bar'); // 'There are bar, bar, and bar.'

Что-то не совсем удобно.

Однако в ES2021 представлен метод replaceAll, который напрямую заменяет все вхождения строкой, которую мы указываем:

const p = 'These are foo, foo, and foo.';
p.replaceAll('foo', 'bar'); // 'There are bar, bar, and bar.'

Этот метод, как и replace, не изменяет исходную строку, а возвращает новую с результатом замены.

Обещание.любое

Метод any объекта Promise возвращает обещание, как только один из переданных аргументов переходит в состояние «выполнено». Отличие от метода Promise.race заключается в том, что этот метод не генерирует исключение, если первое обещание выполнить не удается. Он просто генерирует исключение в случае, если все промисы в массиве заканчиваются отклоненным состоянием.

Вызов Promise.any с массивом промисов, где хотя бы одно разрешено правильно:

const promises = [
new Promise((resolve, reject) => reject('Primera')),
new Promise((resolve, reject) => reject('Segunda')),
new Promise((resolve) => resolve('Tercera'))
];
Promise.any(promises)
.then(result => console.log(result)); // 'Tercera'

Вызов Promise.any с массивом промисов, которые все терпят неудачу:

const promises = [
new Promise((resolve, reject) => reject('Primera')),
new Promise((resolve, reject) => reject('Segunda')),
new Promise((resolve, reject) => reject('Tercera'))
];
Promise.any(promises)
.then(result => console.log(result))
.catch(error => console.log(error)); // AggregateError: All promises were rejected

Числовые разделители

Очень простая функция, которая сделает наш код более читабельным, — это возможность использования символа _ для отделения групп цифр от числа:

const number = 1_000_000_00;
console.log(number); // 100000000

Международный.ListFormat

Класс Javascript Intl позволяет нам естественным образом переводить даты и денежные суммы на разные языки:

https://github.com/ger86/recetas-javascripteras/blob/master/4.%20Special%20Objects/04.%20Intl%20Object.md

В ES12 добавлен новый метод Intl.ListFormat:

const people = ['Pepito', 'Fulanito', 'Menganito'];
new Intl.ListFormat('es', { style: 'long', type: 'conjunction' }).format(people); 
// "Pepito, Fulanito y Menganito"
new Intl.ListFormat('es', { style: 'long', type: 'disjunction' }).format(people);
// "Pepito, Fulanito o Menganito"

Слабая ссылка

В предыдущей статье я уже рассказывал вам о WeakMaps:

Теперь ES2021 включает объект WeakRef для определения слабых ссылок на переменные, чтобы они не учитывались при их удалении «сборщиком мусора».

«Сборщик мусора» Javascript отвечает за автоматическое удаление всех тех переменных, которые больше не используются в какой-либо части кода, чтобы оптимизировать память.

Давайте посмотрим на использование WeakRef на очень простом примере, в котором мы определяем временной интервал, который меняет стиль ссылки, пока она не исчезнет.

function toggleUnderline(element) {
  const weakElement = new WeakRef(element); 
  let intervalId = null;
  
  function toggle() { 
    // Obtener el elemento de la Weak Reference
    const el = weakElement.deref();
// Puede que ya no exista
    if (el) {
      const decoration = weakElement.style.textDecoration;
      if (decoration === 'none') {
        weakElement.style.textDecoration = 'underline';
      } else {
        weakElement.style.textDecoration = 'none'; 
    } else { 
        clearInterval(intervalId); 
    }
  }
  intervalId = setInterval(toggle, 1000);
}
toggleUnderline(document.getElementById("animatedLink"));
setTimeout(() => {
  document.getElementById("animatedLink").remove();
}, 10000);

Этот объект WeakRef может быть очень полезен для реализации кешей, и если вы хотите узнать о нем больше, советую внимательно прочитать эту статью:

Последние мысли

Как видите, 2021 год не принесет нам много новых возможностей в плане «супер» интересных фич. Однако я думаю, что это связано с тем, что Javascript постепенно достигнет высокой степени зрелости, поэтому сейчас команда разработчиков сосредоточена на улучшении некоторых его функций.