JavaScript - ECMAScript 2020：初學者指南

Hello, 有志於成為程序員的你們！我很高興能成為你們在ECMAScript 2020精彩世界中的引路人。作為一個有多年經驗的計算機科學教師，我見過無數學生在掌握這些概念時眼睛發亮。那麼，讓我們一起跳進去，探索ES2020為JavaScript語言帶來的奇妙功能吧！

ECMAScript 2020新增功能

ECMAScript 2020，也被稱為ES2020，就像是一個閃亮的新工具箱，為JavaScript開發者提供了許多令人興奮的功能，讓我們的編碼生活變得更加輕鬆和高效。讓我們一起打開這個工具箱，看看裡面有哪些好東西！

BigInt 基本數據類型

想像你在數夜空中的星星。有數十億顆！過去，JavaScript對數字的大小有限制。但现在，有了BigInt，天空才是极限（雙關語）！

BigInt讓我們能夠處理非常大的整數。以下是如何使用它的方法：

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber);
// 輸出：1234567890123456789012345678901234567890n

const result = bigNumber + 1n;
console.log(result);
// 輸出：1234567890123456789012345678901234567891n

在這個例子中，我們通過在數字末尾加上'n'來創建一個BigInt。'n'告訴JavaScript，"嘿，這是一個BigInt！"我們可以在BigInt上進行與普通數字相同的操作，但記得在與BigInt一起使用的任何數字後加上'n'。

空值合並運算符 (??)

你有沒有玩過"猜禮物"遊戲？你搖盒子，如果聽不到聲音，你就猜它是空的。空值合並運算符就像這樣，但它是針對代碼的！

這個運算符幫助我們檢查一個值是否為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()等待它們兩個都完成，然後給我們每個promise的狀態。

String matchAll() 方法

你有沒有玩過"在哪裡，Waldo？"遊戲？matchAll()就像是在文本中玩"在哪裡，Waldo？"！它幫助我們找到字符串中所有模式的出现。

讓我們看看它是如何工作的：

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]
// ]

在這裡，我們正在搜索我們文本中所有"at"的出现。matchAll()返回一個迭代器，我們使用展開運算符(...)將其轉換為數組。每個匹配都給我們提供關於它在字符串中的位置的信息。

可選連鎖運算符 (?.)

最後但同樣重要的是，讓我們來談談可選連鎖運算符。它就像一個謹慎的探險家，小心翼翼地檢查每一步路徑，然後才前進。

以下是如何工作的：

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	讓我們能夠處理大整數
?? (空值合並)	為null或undefined提供默認值
Promise.allSettled()	等待所有promise完成
String.matchAll()	在字符串中找到所有模式的出现
?. (可選連鎖)	安全地訪問嵌套對象屬性

這就是ECMAScript 2020的精彩新功能，各位！記住，最好的學習方式是實踐。所以，打開你的代碼編輯器，開始試驗這些新工具吧。快樂編程，願你的JavaScript旅程充滿激情和發現！

Credits: Image by storyset