JavaScript - ECMAScript 2017：初學者指南
你好，未來的程式設計師們！我很興奮能成為你們在ECMAScript 2017世界的精彩旅程中的導師。作為一個教了超過十年計算機科學的人，我可以向你們保證，學習JavaScript就像是數字時代中的一種超能力。那麼，讓我們一起來探索ECMAScript 2017中引入的驚人特性吧！
ECMAScript 2017新增的功能
ECMAScript 2017，也被稱為ES8，為JavaScript帶來了一些遊戲改變的特性。想像一下，這就像是你的編碼工具箱中新增了一套工具。這些功能讓我們作為開發者的生活變得更加輕鬆，並使我們的代碼更加高效。讓我們一個一個來解析它們！
字符串填充：padStart() 和 padEnd() 方法
你是否曾經需要在字符串的開頭或結尾添加額外的字符以使其達到一定的長度？嗯，ECMAScript 2017為你提供了 padStart() 和 padEnd() 方法！
padStart()
padStart() 方法用另一個字符串填充當前字符串，直到結果字符串達到給定的長度。填充從當前字符串的開頭應用。
let str = '5';
console.log(str.padStart(3, '0')); // 輸出: '005'在這個例子中，我們正在用零填充字符串 '5'，直到它變成3個字符長。這就像是在數字前添加前導零！
padEnd()
同樣，padEnd() 方法從結尾填充當前字符串。
let price = '99';
console.log(price.padEnd(5, '.00')); // 輸出: '99.00'在這裡，我們在 '99' 的結尾添加 '.00' 以使其看起來像帶有分錢的價格。
這些方法在需要為顯示或對齊文本格式化字符串時非常方便。
The Object.entries() 方法
現在，讓我們來谈谈 Object.entries()。這個方法就像是一個魔術師，將一個對象轉換為包含鍵值對的數組。當你需要遍歷對象的屬性時，它非常有用。
let person = {
name: 'Alice',
age: 30,
city: 'New York'
};
console.log(Object.entries(person));
// 輸出: [['name', 'Alice'], ['age', 30], ['city', 'New York']]在這個例子中，Object.entries() 將我們的 person 對象轉換為一個數組，其中每個元素是包含鍵值對的另一個數組。這就像打開一個行李箱並將其所有內容取出！
The Object.values() 方法
Object.values() 是 Object.entries() 的堂兄弟。它不給我們返回鍵值對，而只是返回對象中的值的數組。
let fruits = {
apple: 5,
banana: 3,
orange: 2
};
console.log(Object.values(fruits)); // 輸出: [5, 3, 2]當你只關心對象中的值而不關心它們的鍵時，這個方法非常完美。這就像獲得一個沒有價格的購物清單！
JavaScript async 和 await
現在，我們進入了異步JavaScript的領域，使用 async 和 await。這些關鍵字使處理Promises（一種處理異步操作的方式）變得更加直接和易讀。
async function fetchUserData() {
try {
let response = await fetch('https://api.example.com/user');
let userData = await response.json();
console.log(userData);
} catch (error) {
console.error('Failed to fetch user data:', error);
}
}
fetchUserData();在這個例子中，async 告訴JavaScript這個函數將與異步代碼一起工作。await 鍵字會暫停函數的執行，直到Promise被解析。這就像告訴JavaScript，“在這裡等待，直到這個任務完成再繼續。”
這使得異步代碼看起來和行為更像同步代碼，這要容易理解和讀得多！
The Object.getOwnPropertyDescriptors() 方法
這個方法可能聽起來令人生畏，但其實非常有用！它返回給定對象的所有自有屬性描述符。
let obj = {
name: 'John',
get age() { return 30; }
};
console.log(Object.getOwnPropertyDescriptors(obj));
/* 輸出:
{
name: {
value: 'John',
writable: true,
enumerable: true,
configurable: true
},
age: {
get: [Function: get age],
set: undefined,
enumerable: true,
configurable: true
}
}
*/當你需要將屬性從一個對象复制到另一個對象，包括它們的描述符（如getter和setter）時，這個方法特別有用。
JavaScript Shared Memory 和 Atomics
最後，讓我們來了解一下 Shared Memory 和 Atomics。這些功能允許JavaScript中的不同線程共享同一個內存空間，並原子性地執行操作。
// 創建一個共享緩存區
let sharedBuffer = new SharedArrayBuffer(4);
let sharedArray = new Int32Array(sharedBuffer);
// 執行原子操作
Atomics.store(sharedArray, 0, 42);
console.log(Atomics.load(sharedArray, 0)); // 輸出: 42這是進階内容，主要在需要JavaScript中的高性性能計算情況下使用。這就像多個廚師在同一個廚房中工作，能夠共享食材而不會互相干擾！
新方法的總結
這裡是一個我們討論過的新方法的快速參考表：
| 方法 | 描述 |
|---|---|
String.prototype.padStart() |
用給定的字符串填充字符串的開頭 |
String.prototype.padEnd() |
用給定的字符串填充字符串的結尾 |
Object.entries() |
返回一個給定對象的自有可枚舉字符串鍵屬性的 [key, value] 對數組 |
Object.values() |
返回一個給定對象的自有可枚舉屬性值的數組 |
Object.getOwnPropertyDescriptors() |
返回給定對象的所有自有屬性描述符 |
Atomics 方法 |
在Atomics對象上提供靜態方法的原子操作 |
這就是ECMAScript 2017引入的主要功能。記住，學習編程是一段旅程，而不是目的地。持續練習，持續探索，最重要的是，享受其中的樂趣！快樂編程！
Credits: Image by storyset