es2021

Все, что нужно знать о ES2021

Наши соц. сети: instagram, fb, tg

Для чего это нужно?

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

String.prototype.replaceAll()

Начнем с небольшого, но приятного дополнения - метода replaceAll(). Сейчас, если вы хотите заменить несколько экземпляров шаблона в строке, можно использовать метод replace(). Но если вы используете строку, replace() позволит вам заменить только первое вхождение шаблона. Для того, чтобы заменить все вхождения, придется столкнуться с регулярными выражениями. Если вас это устраивает, тогда нет проблем. Однако для многих разработчиков регулярные выражения не являются предпочтительным выбором. Если вы один из этих разработчиков, вам понравится новый метод replaceAll(). replaceAll() позволяет заменять все вхождения шаблона без использования регулярных выражений. Вы также можете использовать функции в качестве замены. Если вы это сделаете, эта функция будет выполняться для каждого совпадения в строке.


let str = 'There are those who like cats, there those who like watching cats and there are those who have cats.'

str = str.replaceAll('cats', 'dogs')

console.log(str)

// 'There are those who like dogs, there those who like watching dogs and there are those who have dogs.'

str = str.replace(/cats/g, 'dogs')

console.log(str)

// 'There are those who like dogs, there those who like watching dogs and there are those have dogs.'

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

Цифровые разделители предоставляют простой и легкий способ сделать большие числа более удобочитаемыми и удобными для работы. Синтаксис такой же простой. Нужно просто добавить знак подчеркивания _.



// Число без разделителей цифр:
число констант = 3685134689

// Число с числовыми разделителями:
const число = 3_685_134_689

Помните, что числовые разделители - это просто украшательство. Если вы их используете, они не повлияют на сами числовые значения.


const num = 3_685_134_689
console.log (num)
// 3685134689

Операторы логического присваивания

JavaScript позволяет использовать логические операторы в основном в логических контекстах. Например, в if ... else для проверки истинности. Это изменится с ES2021 и операторами логического присваивания, которые позволяют комбинировать логические операторы(&&, || и ??) с оператором присваивания =.



x &&= y

// Тоже самое, что и:
x = x && d



// Пример:
let x = 3;
let y = 0;
x &&= y;
console.log(x); // 0

x ||= y

// то же самое, что и 
x = x || y;

let x = 3; 
let y = 0;
x ||= y;


console.log(x); // 3


x ??= y;

// то же самое, что и 
x = x ?? y;


// Пример:
let x = null; 
let y = 'Hello';
x ??= y;

console.log(x)// 'Hello'


Promise.any()

Что касается промисов в JavaScript, то за последние годы ES6 представил методы Promise.race() и Promise.all(). После этого ES2020 принес Promise.allSettled(). ES2021 предлагает еще один метод, который может упростить работу с промисами благодаря методу Promise.any(). Метод Promise.any() принимает несколько промисов и возвращает первый выполненный. Если все предоставленные вами промисы отклонены, Promise.any() вернет ошибку.




const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise1 is resolved.')
  }, Math.floor(Math.random() * 1000))
})

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise2 is resolved.')
  }, Math.floor(Math.random() * 1000))
})

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise3 is resolved.')
  }, Math.floor(Math.random() * 1000))
})

;(async function() {
  const result = await Promise.any([promise1, promise2, promise3])
  console.log(result)
})()


WeakRef

Последняя примечательная особенность ES2021 - WeakRefs. В JavaScript, когда вы создаете ссылку на объект, он предотвращает стандартную процедуру его удаления. Это означает, что JavaScript не может удалить объект и освободить его память. Это позволяет объекту существовать, пока есть ссылка на него, потенциально вечно. ES2021 представляет новый класс WeakRefs. Это позволит разработчикам создавать слабые ссылки на объекты. Благодаря этому разработчики смогут, например, отслеживать существующие объекты, не предотвращая их сборку мусора. Это может быть полезно для отображения кэшей и объектов. Когда вы хотите создать новый WeakRef, вы должны использовать его с новым ключевым словом. В качестве аргумента вы передаете в круглые скобки какой-нибудь объект. Давайте посмотрим на один очень простой пример.


const myWeakRef = new WeakRef({
  name: 'Cache',
  size: 'unlimited'
})
console.log(myWeakRef.deref())

// { name: 'Cache', size: 'unlimited' }

console.log(myWeakRef.deref().name):
// 'Cache'


console.log(myWeakRef.deref().size)
// 'unlimited'

FinalizationRegistry

Тесно связанный с WeakRef, есть еще одна функция ES2021, называемая финализаторами или FinalizationRegistry. Эта функция позволяет вам регистрировать функции обратного вызова, которые будут вызываться при сборке мусора.


const reg = new FinalizationRegistry((val) => {
  console.log(val)
})

;(() => {
  const obj = {}
  reg.register(obj, 'obj has been garbage-collected.')
})()

// 'obj has been garbage-collected.'

Одна важная вещь о WeakRef и финализаторах. Само предложение по этой функции советует не использовать их. Одна из причин в том, что они могут быть непредсказуемыми. Еще одна причина заключается в том, что они не помогают сборщику мусора выполнять свою работу.

Приятного кодинга!