JavaScript - ECMAScript 2021: руковод BEGINNERS GUIDE

Привет, будущая суперзвезда кодирования! Я рад быть вашим проводником в этом захватывающем путешествии в мир ECMAScript 2021. Как преподаватель информатики с многолетним опытом, я видел countless студентов, которые перешли от полных новичков до уверенных программистов. Сегодня мы будем исследовать последние функции JavaScript, и я обещаю сделать это как можно более趣味ным и легким для понимания. Так что возьмите свой любимый напиток, устройтесь поудобнее и погружайтесь с нами!

Что такое ECMAScript 2021?

Прежде чем мы перейдем к новым функциям, давайте быстро поговорим о том, что такое ECMAScript. Представьте ECMAScript как кулинарную книгу для JavaScript. Каждый год повара (то есть разработчики языка) добавляют новые рецепты (функции), чтобы сделать нашу жизнь программистов проще и вкуснее. ECMAScript 2021, также известный как ES12, является последним изданием этой кулинарной книги.

Новые функции, добавленные в ECMAScript 2021

ECMAScript 2021 предоставляет нам了一些 захватывающие новые инструменты для игры. Это как получить новый блестящий набор LEGO-кирпичиков для добавления к нашей коллекции. Давайте рассмотрим каждую из этих новых функций по одному.

Разделители чисел (_)

Вы когда-нибудь пытались читать очень длинное число, например 1000000000? Это немного头痛но, правда? Ну, разделитель чисел пришел спасти положение!

// Без разделителя чисел
const billion = 1000000000;

// С разделителем чисел
const billionReadable = 1_000_000_000;

console.log(billion === billionReadable); // Вывод: true

Подчеркивание (_) в 1_000_000_000 не изменяет значение числа. Оно просто там, чтобы нам, людям, было легче читать. Неmio это замечательно? Это как добавление пробелов в длинное предложение, чтобы сделать его более читаемым.

Метод Promise.any()

Обещания в JavaScript похожи на то, что вы делаете кучу телефонных звонков одновременно и ждем, когда кто-то ответит. Метод Promise.any() - это новый способ работы с множеством обещаний.

const promise1 = new Promise((resolve, reject) => setTimeout(reject, 100, 'promise1'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'promise2'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 300, 'promise3'));

Promise.any([promise1, promise2, promise3])
.then((value) => console.log(value))
.catch((error) => console.log(error));

// Вывод: promise2

В этом примере Promise.any() разрешается, как только одно из обещаний в массиве выполняется. Это как гонка, где нас интересует только первый человек, crossed finish line, regardless of who comes in second or third.

Метод String.replaceAll()

Вы когда-нибудь играли в игру замены слов? Метод replaceAll() чем-то похож на это, но для строк в JavaScript.

const sentence = "I love cats. Cats are great pets.";
const newSentence = sentence.replaceAll("cats", "dogs");

console.log(newSentence); // Вывод: "I love dogs. Dogs are great pets."

До replaceAll(), нам приходилось использовать регулярные выражения или циклы для замены всех occurrences of a substring. Теперь это так же просто, как вызвать один метод!

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

ECMAScript 2021 introduces three new logical assignment operators. These are like shorthand ways of writing common patterns in JavaScript. Let's look at each one:

Оператор логического И присваивания (&&=)

let x = 1;
let y = 2;

x &&= y;

console.log(x); // Вывод: 2

// Это эквивалентно:
// x && (x = y);

Оператор &&= присваивает правое значение только если левое значение истина. Это как saying, "If x is true, then make it equal to y."

Оператор логического ИЛИ присваивания (||=)

let a = null;
let b = 'default value';

a ||= b;

console.log(a); // Вывод: "default value"

// Это эквивалентно:
// a || (a = b);

Оператор ||= присваивает правое значение только если левое значение ложно. Это идеально для установки значений по умолчанию!

Оператор логического коалирования нулевых значений присваивания (??=)

let foo = null;
let bar = 'baz';

foo ??= bar;

console.log(foo); // Вывод: "baz"

// Это эквивалентно:
// foo ?? (foo = bar);

Оператор ??= присваивает правое значение только если левое значение null или undefined. Он похож на ||=, но более конкретен в том, что он считает "пустым".

Methods Summary

Вот удобная таблица, резюмирующая новые методы, которые мы узнали:

Метод	Описание	Пример
Разделители чисел	Делает большие числа более читаемыми	1_000_000_000
Promise.any()	Разрешается, когда любое из обещаний в массиве выполняется	Promise.any([promise1, promise2, promise3])
String.replaceAll()	Заменяет все occurrences of a substring	"hello hello".replaceAll("hello", "hi")
&&=	Присваивает, если левая сторона истина	x &&= y
||=	Присваивает, если левая сторона ложно	x \|\|= y
??=	Присваивает, если левая сторона null или undefined	x ??= y

И вот вы его,folks! Мы отправились в увлекательное путешествие через новые функции ECMAScript 2021. Помните, что лучший способ учиться программированию - это делать. Так что я encourage вас поиграть с этими новыми функциями, экспериментировать и, самое главное, получать удовольствие!

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

Продолжайте программировать, stay curious, и счастливого обучения!

Credits: Image by storyset