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中的Promise就像與朋友制定計劃。有時候計劃會成功，有時候不會，但無論如何，你可能都想在之後做些事情。這就是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"));

在這個例子中，無論Promise是解決還是拒絕，finally語句塊總會運行。這就像說“無論我們成功還是失敗，我們都要清理並回家。”

JavaScript Rest對象屬性

對象字面量中的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，而其餘的一切都被塞進了rest。這就像整理衣服——襪子一堆，其他一切一堆！

結論

好了，各位！我們已經一起走過了ECMAScript 2018的令人興奮的新特性。記住，最好的學習方式就是實踐，所以不要害怕嘗試這些新工具。編程就像烹飪——越多練習，你就越擅長！

這裡是我們所涵蓋的方法的快速參考表：

特性	描述
for-await-of	允許異步迭代過Promise
Unicode屬性轉義	在RegExp中根據Unicode屬性匹配字符
後瞻斷言	在RegExp中基於前面的匹配來檢查
命名捕獲組	在RegExp中為捕獲組命名
Promise.prototype.finally()	當Promise解決時指定要運行的回調
Rest對象屬性	在對象字面量中收集剩餘屬性到新的對象

快樂編程，並祝你們的JavaScript冒險永遠充滿刺激！

Credits: Image by storyset