ECMAScript 2018: дружеское руководство для начинающих

Здравствуйте, будущие маги JavaScript! Я рад стать вашим проводником в этом увлекательном путешествии по ECMAScript 2018. Как кто-то, кто уже давно teaches programming, я с нетерпением жду возможности поделиться с вами этими новыми возможностями. Не волнуйтесь, если вы новички в программировании – мы будем двигаться шаг за шагом, и вскоре вы будете писать JavaScript, как профи!

ECMAScript 2018

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

ECMAScript 2018, также известный как ES9, принес了一些 fantastic additions к языку JavaScript. Это как получить сверкающий новый ящик инструментов для ваших coding adventures! Давайте погрузимся в эти функции одну за другой.

Асинхронная итерация в JavaScript

Представьте, что вы на buffets, и вместо того чтобы набивать все на свою тарелку сразу, вы можете магически призывать каждое блюдо, когда будете готовы съесть его. Это примерно то, что делает асинхронная итерация с вашим кодом!

Цикл `for-await-of`

Этот новый цикл позволяет нам работать с асинхронными источниками данных更容易. Вот пример:

async function* numberGenerator() {
yield Promise.resolve(1);
yield Promise.resolve(2);
yield Promise.resolve(3);
}

async function printNumbers() {
for await (const num of numberGenerator()) {
console.log(num);
}
}

printNumbers();
// Вывод:
// 1
// 2
// 3

В этом примере numberGenerator - это асинхронная генераторная функция, которая возвращает обещания. Цикл for-await-of ждет, пока каждое обещание не будет выполнено, прежде чем перейти к следующей итерации. Это как иметь терпеливого друга, который ждет, пока вы не съедите каждый кусочек, прежде чем предложить следующий!

Новые функции объекта RegExp()

RegExp, или регулярные выражения, как швейцарский армейский нож для text processing. ECMAScript 2018 добавил несколько cool new tricks к этому инструменту.

Ускользания Unicode свойств

Эта функция позволяет нам соответствовать символам на основе их Unicode свойств. Это super helpful при работе с международным текстом!

const greekSymbol = "π";
console.log(/\p{Script=Greek}/u.test(greekSymbol)); // true

Здесь, \p{Script=Greek} соответствует любому символу в греческом письме. Флаг u включает режим Юникода.

Lookbehind assertions

Теперь мы можем проверить, что precedes наш матч, а не только следует за ним. Это как если бы вы могли peek over your shoulder в мире кодирования!

const price = "$123.45";
console.log(price.match(/(?<=\$)\d+(\.\d*)?/)[0]); // "123.45"

В этом примере (?<=\$) - это положительное lookbehind, которое обеспечивает соответствие нашего матча, precedes им долларом, не включая сам доллар в соответствие.

Именованные capture groups

Теперь мы можем называть наши capture groups, делая наши регулярные выражения более читаемыми и maintainable.

const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = dateRegex.exec("2023-05-15");
console.log(match.groups.year);  // "2023"
console.log(match.groups.month); // "05"
console.log(match.groups.day);   // "15"

Это как labeling the compartments в вашем ящике инструментов – все становится легче найти!

Метод `Promise.prototype.finally()`

Обещания в JavaScript как если бы вы составляли план с другом. Иногда это срабатывает, иногда нет, но в любом случае, вам может понадобиться сделать что-то afterwards. Вот где comes finally() в игру!

function fetchData() {
return new Promise((resolve, reject) => {
// Симуляция вызова API
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve("Data fetched successfully!");
} else {
reject("Error fetching data");
}
}, 1000);
});
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log("Operation completed"));

В этом примере, независимо от того, выполняется ли обещание или отклоняется, блок finally всегда будет выполняться. Это как если бы вы сказали "Whether we succeed or fail, let's clean up and go home."

Свойства объекта Rest

Оператор rest (...) в объектных литералах как magic bag, который может holding все оставшиеся части. Это super handy, когда вы хотите отделить некоторые свойства от rest.

const person = {
name: "Alice",
age: 30,
city: "Wonderland",
occupation: "Explorer"
};

const { name, age, ...rest } = person;

console.log(name);  // "Alice"
console.log(age);   // 30
console.log(rest);  // { city: "Wonderland", occupation: "Explorer" }

В этом примере мы вытаскиваем name и age, а все остальное goes into rest. Это как sorting your laundry – socks in one pile, everything else in another!

Заключение

И вот мы и добрались до конца, друзья! Мы совершили путешествие через захватывающие новые функции ECMAScript 2018. Помните, что лучший способ учиться – это doing, так что не бойтесь экспериментировать с этими новыми инструментами. программирование как cooking – чем больше вы практикуетесь, тем лучше вы становитесь!

Вот quick reference table методов, которые мы рассмотрели:

Feature	Description
`for-await-of`	Позволяет асинхронную итерацию по обещаниям
Unicode Property Escapes	Corresponds characters based on Unicode properties in RegExp
Lookbehind Assertions	Проверяет соответствие на основе того, что precedes в RegExp
Named Capture Groups	Позволяет называть capture groups в RegExp
`Promise.prototype.finally()`	Указывает callback для выполнения после завершения обещания
Rest Object Properties	Collects remaining properties into a new object