JavaScript - ECMAScript 2020: руковод начинающих

Здравствуйте, будущие программисты! Я рад приветствовать вас в увлекательном путешествии в мир ECMAScript 2020. Как преподаватель информатики с многолетним опытом, я видел, как множество студентов загораются, когда понимают эти концепции. Так что давайте окунемся и исследуем замечательные функции, которые ES2020 привносит в язык JavaScript!

Новые функции в ECMAScript 2020

ECMAScript 2020, также известный как ES2020, похож на сверкающий новый ящик инструментов для разработчиков JavaScript. Он introduces несколько захватывающих функций, которые делают нашу жизнь программирования легче и эффективнее. Давайте вместе откроем этот ящик и посмотрим, какие goodies мы найдем внутри!

Тип данных BigInt

Представьте, что вы считаете звезды на ночном небе. Их миллиарды! Раньше JavaScript имел ограничение на то, насколько большим может быть число. Но теперь, с BigInt, limit (намеренная игра слов) исчезает!

BigInt позволяет нам работать с incredibly large целыми числами. Вот как вы можете использовать его:

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber);
// Вывод: 1234567890123456789012345678901234567890n

const result = bigNumber + 1n;
console.log(result);
// Вывод: 1234567890123456789012345678901234567891n

В этом примере мы создаем BigInt, добавляя 'n' в конце числа. 'n' говорит JavaScript: "Эй, это BigInt!" Мы можем выполнять операции с BigInt, как с обычными числами, но не забывайте добавлять 'n' к любому числу, которое вы используете с BigInt.

Оператор nullish coalescing (??)

Вы когда-нибудь играли в игру "угадай подарок"? Вы трясете коробку, и если не слышите ничего, вы угадываете, что она пустая. Оператор nullish coalescing немного похож на это, но для кода!

Этот оператор помогает нам проверить, является ли значение null или undefined, и если да, мы можем предоставить значение по умолчанию. Вот как это работает:

let username = null;
console.log(username ?? "Guest");
// Вывод: "Guest"

username = "Alice";
console.log(username ?? "Guest");
// Вывод: "Alice"

В первом случае username равен null, поэтому оператор возвращает "Guest". Во втором случае username имеет значение, поэтому он возвращает это значение. Это как если бы вы говорили: "Если коробка пуста, давайте предположим, что это медведь!"

Метод Promise.allSettled()

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

Вот пример:

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

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

// Вывод:
// "fulfilled"
// "rejected"

В этом коде у нас есть два promise. Один успешно завершается, другой отклоняется. Promise.allSettled() ждет, пока оба завершатся, и затемдает нам статус каждого.

Метод String.matchAll()

Вы когда-нибудь играли в "Где Waldo?"? matchAll() немного похож на это, но с текстом! Он помогает нам найти все occurrences patterns в строке.

Давайте посмотрим, как это работает:

const text = "The cat and the hat sat on the mat.";
const regex = /at/g;
const matches = [...text.matchAll(regex)];

console.log(matches);
// Вывод: [
//   ['at', index: 7, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 19, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 31, input: 'The cat and the hat sat on the mat.', groups: undefined]
// ]

Здесь мы ищем все occurrences "at" в тексте. matchAll() возвращает итератор, который мы преобразуем в массив с помощью оператора spread (...). Each match предоставляет нам информацию о том, где он был найден в строке.

Оператор optional chaining (?.)

Последний, но не менее важный, давайте поговорим об операторе optional chaining. Это как cautios explorer, который carefully проверяет каждый шаг пути перед тем, как двигаться дальше.

Вот как это работает:

const user = {
name: "Alice",
address: {
street: "123 Main St"
}
};

console.log(user.address?.street);
// Вывод: "123 Main St"

console.log(user.phoneNumber?.home);
// Вывод: undefined

В этом примере мы пытаемся получить доступ к свойствам, которые могут не существовать. Оператор ?. позволяет нам делать это безопасно. Если user.address существует, он пытается получить доступ к street. Если user.phoneNumber не существует, он останавливается и возвращает undefined вместо того, чтобы выбрасывать ошибку.

Таблица методов

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

Метод	Описание
BigInt	Позволяет работать с large integers
?? (Nullish Coalescing)	Предоставляет значение по умолчанию для null или undefined
Promise.allSettled()	Ожидает завершение всех promise
String.matchAll()	Найдет все occurrences pattern в строке
?. (Optional Chaining)	Безопасно получает доступ к nested object properties

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

Credits: Image by storyset