ECMAScript 2018：初学者的友好指南

你好，未来的JavaScript大师们！我很高兴能成为你们在这段激动人心的ECMAScript 2018之旅中的向导。作为一名有着多年教学经验的程序员，我迫不及待地想与你们分享这些新特性。别担心，如果你是编程新手——我们会一步一步来，很快你就能像专业人士一样编写JavaScript代码！

ECMAScript 2018中的新增特性

ECMAScript 2018，也称为ES9，为JavaScript语言带来了一些令人兴奋的增强。这就像为你的编程冒险获得了一个闪亮的新工具箱！让我们逐一深入了解这些特性。

JavaScript的异步迭代

想象一下你在一个自助餐前，不是一次性把所有东西堆在盘子里，而是可以神奇地在你准备吃的时候召唤每一道菜。异步迭代就是对你的代码做的类似事情！

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，或正则表达式，是文本处理的瑞士军刀。ECMAScript 2018为这个工具添加了一些很酷的新技巧。

Unicode属性转义

这个特性允许我们根据字符的Unicode属性进行匹配。这在处理国际文本时非常有用！

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

在这里，\p{Script=Greek}匹配希腊脚本中的任何字符。u标志启用Unicode模式。

后瞻断言

现在我们可以检查匹配之前的内容，而不仅仅是之后。这就像在编程世界中能够窥视你的肩膀后面！

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

在这个例子中，(?<=\$)是一个正向后瞻，确保我们的匹配前面有一个美元符号，但不包括美元符号在内。

命名捕获组

我们现在可以给捕获组命名，使我们的正则表达式更具可读性和可维护性。

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"

这就像给你的工具箱中的隔间贴上标签——一切都更容易找到！

JavaScript的Promise finally()

JavaScript中的承诺就像与朋友制定计划。有时计划会成功，有时不会，但无论如何，你之后可能都想做点什么。这时finally()就派上用场了！

function fetchData() {
return new Promise((resolve, reject) => {
// 模拟API调用
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve("数据获取成功！");
} else {
reject("获取数据失败");
}
}, 1000);
});
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log("操作完成"));

在这个例子中，无论承诺是解决还是拒绝，finally块都会运行。这就像说“无论我们成功还是失败，让我们清理一下然后回家。”

JavaScript的剩余对象属性

对象字面量中的扩展运算符（...）就像有一个神奇的袋子，可以装下所有的剩余部分。当你想要将某些属性与其他属性分开时，这非常有用。

const person = {
name: "Alice",
age: 30,
city: "奇境",
occupation: "探险家"
};

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

console.log(name);  // "Alice"
console.log(age);   // 30
console.log(rest);  // { city: "奇境", occupation: "探险家" }

在这个例子中，我们取出name和age，而其他所有东西都塞进rest。这就像整理衣服——袜子放在一堆，其他所有东西放在另一堆！

结论

就这样，各位！我们一起探索了ECMAScript 2018的激动人心的新特性。记住，学习的最好方式是实践，所以不要害怕尝试这些新工具。编程就像烹饪——练习越多，你就越擅长！

以下是我们在本文中讨论的方法的快速参考表：

特性	描述
for-await-of	允许异步迭代承诺
Unicode属性转义	在RegExp中根据Unicode属性匹配字符
后瞻断言	在RegExp中基于前面的内容检查匹配
命名捕获组	在RegExp中为捕获组命名
Promise.prototype.finally()	当承诺解决时指定要运行的回调
扩展对象属性	将剩余的属性收集到一个新对象中

快乐编码，愿你的JavaScript冒险永远充满激情！

Credits: Image by storyset