JavaScript - ECMAScript 2019：初學者指南

你好，未來的編程超巨星！我很興奮能成為你進入ECMAScript 2019世界的導遊。作為一個教了多年編程的人，我迫不及待地想與你分享這種語言的奇妙之處。所以，拿起你的虛擬筆記本，我們一起來探索吧！

ECMAScript 2019 的介紹

在我們開始之前，讓我們快速聊聊ECMAScript是什麼。想像JavaScript是一個美味的蛋糕，而ECMAScript則是配方。每年，配方都會被微調和改進，2019年也不例外。ECMAScript 2019為我們帶來了一些美味的新功能，讓我們的JavaScript蛋糕更加美味！

ECMAScript 2019 中新增的功能

ECMAScript 2019引入了多項令人興奮的功能，讓我們的編程生活更加輕鬆。我們一個一個來探索，好嗎？

JavaScript Array flat() 方法

你有沒有過一個滿是盒子的凌亂房間？JavaScript中的嵌套數組就像這樣。flat()方法就像一個神奇的清潔機器人，打開所有那些盒子，把所有東西放在一個整齊的層次中。

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

const messyRoom = [1, 2, [3, 4, [5, 6]]];
const tidyRoom = messyRoom.flat(2);
console.log(tidyRoom); // 輸出: [1, 2, 3, 4, 5, 6]

在這個例子中，messyRoom是我們的嵌套數組。flat(2)方法深入兩個層次來展平數組。結果是tidyRoom，所有數字都在同一層次上。很棒吧？

JavaScript Array flatMap()

現在，想像一下如果我們的清潔機器人不僅能整理，還能在過程中轉化物品。這就是flatMap()所做的！它就像map()和flat()生下了一個超級能力的寶寶。

這裡有一個有趣的例子：

const pets = ["dog", "cat", "fish"];
const petSounds = pets.flatMap(pet => {
if (pet === "dog") return ["woof", "bark"];
if (pet === "cat") return ["meow"];
return [];
});
console.log(petSounds); // 輸出: ["woof", "bark", "meow"]

在這段代碼中，我們將pets數組轉化為一個包含它們聲音的新數組。注意，狗有兩種聲音，但它們最終都在同一個展平的數組中。魚太安靜了，所以它們沒有進入名單！

修訂版的 Array sort()

sort()方法在ECMAScript 2019中略有改動。它現在保證數組將以穩定的方式排序。這是什麼意思呢？如果排序函數認為兩個項目相等，它們將保持彼此原始的順序。

讓我們看一個例子：

const students = [
{name: "Alice", grade: "B"},
{name: "Bob", grade: "A"},
{name: "Charlie", grade: "B"},
{name: "David", grade: "A"}
];

students.sort((a, b) => a.grade.localeCompare(b.grade));
console.log(students);
/* 輸出：
[
{name: "Bob", grade: "A"},
{name: "David", grade: "A"},
{name: "Alice", grade: "B"},
{name: "Charlie", grade: "B"}
]
*/

在這個例子中，我們根據學生的成績來排序。注意Bob和大衛（都是A等）保持了他們原始的順序，Alice和Charlie（都是B等）也是一樣。這種穩定的排序在許多應用程序中都可能非常關鍵！

JavaScript Object fromEntries

你有沒有過這樣的願望：把一堆鍵值對變成一個對象？現在你可以用Object.fromEntries()做到了！這就像魔法，但更好，因為它是JavaScript。

看看這個：

const entries = [
['name', 'Alice'],
['age', 25],
['city', '奇異國']
];

const person = Object.fromEntries(entries);
console.log(person);
// 輸出: { name: 'Alice', age: 25, city: '奇異國' }

在這個例子中，我們從一個鍵值對的數組開始。Object.fromEntries()將其轉化為一個對象，其中每對成為一個屬性。這是Object.entries()的反操作，我們已經有一段時間了。

可選的 catch 綁定

錯誤處理現在變得更加平滑，因為引入了可選的catch綁定。以前，我們總是在catch子句中指定一個錯誤參數，即使我們不使用它。現在，如果我們不需要它，我們可以省略它。

這是它看起來的樣子：

// ECMAScript 2019之前
try {
// 一些可能會拋出錯誤的代碼
} catch (error) {
console.log("發生了一個錯誤");
}

// 使用ECMAScript 2019
try {
// 一些可能會拋出錯誤的代碼
} catch {
console.log("發生了一個錯誤");
}

看我們如何從第二個例子中刪除了(error)部分？這就是可選的catch綁定在起作用。這是一個小改變，但當我們不需要使用錯誤對象時，它可以讓我們的代碼更乾淨。

修訂版的 JSON.stringify()

JSON.stringify()在ECMAScript 2019中變得更加聰明。它現在更好地處理一些Unicode字符，確保我們的JSON保持有效。

這有一個例子：

const obj = { name: "Pikachu\uD800" };
console.log(JSON.stringify(obj));
// 輸出: {"name":"Pikachu�"}

在這個例子中，\uD800是一個未配對的代理，這可能會在某些JSON解析器中引起問題。新的JSON.stringify()將其替換為Unicode替換字符（�）以保持JSON的有效性。

修訂版的 Function toString()

函數的toString()方法現在返回函數的確切源代碼，包括任何空白和註釋。這就像獲得了你函數的完美影印！

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

function greet(name) {
// 這是一個問候函數
console.log(`Hello, ${name}!`);
}

console.log(greet.toString());
/* 輸出：
function greet(name) {
// 這是一個問候函數
console.log(`Hello, ${name}!`);
}
*/

正如你所看到的，輸出包括了註釋並保留了原始格式。這對於除錯或生成文檔非常有用！

在字符串字面量中允許使用分隔符

ECMAScript 2019帶來了一個小但有用的小改變：你现在可以在字符串字面量中使用U+2028（行分隔符）和U+2029（段落分隔符）而無需轉義。

這有一個例子：

const text = "Line 1 separator→\u2028←Line 2";
console.log(text);
// 輸出：
// Line 1
// Line 2

這個改變讓處理可能包含這些分隔符的文本更加容易，特別是當處理來自其他來源數據時。

JavaScript String trimStart() 和 trimEnd()

最後但同樣重要的是，我們得到了兩個新的字符串方法：trimStart()和trimEnd()。這些方法與trim()相似，但它們只從字符串的一端移除空白。

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

const messy = "   Hello, World!   ";
console.log(messy.trimStart()); // 輸出: "Hello, World!   "
console.log(messy.trimEnd());   // 輸出: "   Hello, World!"
console.log(messy.trim());      // 輸出: "Hello, World!"

這些方法在只想清理字符串的一側時非常有用。它們是較老的trimLeft()和trimRight()方法的別名，但名稱更清晰地描述了它們的作用。

結論

這就是全部，各位！我們一起穿越了ECMAScript 2019令人興奮的新功能。從展平數組到整理字符串，這些新增功能讓我們的JavaScript更強大，更容易使用。

記住，最好的學習方式是實踐。所以，去嘗試在你的代碼中使用這些新功能。不要害怕犯錯誤 - 我們就是這樣學習和成長為程序員的。

快樂編程，願你的JavaScript冒險沒有bug，充滿樂趣！

方法	描述
Array.prototype.flat()	將嵌套數組展平到指定深度
Array.prototype.flatMap()	使用映射函數映射每個元素，然後展平結果
Array.prototype.sort()	在原地對數組元素進行排序（現在是穩定的）
Object.fromEntries()	將鍵值對列表轉換為對象
try...catch	現在支持可選的catch綁定
JSON.stringify()	改進了對Unicode字符的處理
Function.prototype.toString()	現在返回函數的確切源代碼
String.prototype.trimStart()	從字符串開頭移除空白
String.prototype.trimEnd()	從字符串結尾移除空白

Credits: Image by storyset