JavaScript - ES6：現代JavaScript初學者指南

你好啊，未來的JavaScript大師！我很興奮能成為你進入ES6世界的引路人，這個改變遊戲規則的JavaScript更新，徹底改變了我們寫代碼的方式。作為一個教導編程超過十年的老師，我迫不及待地想與你分享ES6的魔法。所以，拿起你的魔杖（或鍵盤），讓我們一起潛入水中！

ES6新增功能

ES6，也稱為ECMAScript 2015，為JavaScript帶來了大量的新功能。就像JavaScript去超級英雄學校學習後，帶回了一整套全新的超能力！讓我們一一探討這些超能力。

JavaScript箭頭函數

箭頭函數就像是普通函數的酷炫表親。它們更短、更苗條，有时甚至更強大。讓我們看一個例子：

// 舊方法
function sayHello(name) {
return "Hello, " + name + "!";
}

// 箭頭函數方法
const sayHello = (name) => `Hello, ${name}!`;

console.log(sayHello("Alice")); // 輸出：Hello, Alice!

在這個例子中，我們將一個普通函數轉換成了箭頭函數。注意我們是如何去掉function關鍵字並添加=>（胖箭頭）的。這就像我們的函數去減肥並變得驚艷一樣！

JavaScript Array find() 方法

find()方法就像是你數組的偵探。它在數組中搜索並返回第一個通過測試的元素。這是它如何工作的：

const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find(num => num % 2 === 0);

console.log(firstEvenNumber); // 輸出：2

在這個例子中，我們的find()方法正在尋找第一個偶數。它檢查每個數字，當它找到一個能夠被2整除且沒有餘數的數字時，就返回那個數字。

JavaScript Array findIndex()

findIndex()是find()的表親。它不是返回元素，而是返回第一個通過測試的元素的索引。讓我們看看它是如何工作的：

const fruits = ["apple", "banana", "cherry", "date"];
const indexOfLongFruit = fruits.findIndex(fruit => fruit.length > 5);

console.log(indexOfLongFruit); // 輸出：1

在這裡，我們正在尋找第一個超過5個字母的水果。"Banana"是第一個滿足這個條件的，所以返回它的索引（1）。

JavaScript Array from()

Array.from()就像是一個魔術師，能夠將類數組對象或可迭代對象轉換成真正的數組。當我們與DOM元素一起工作時，這特別有用。這是一個例子：

const name = "Alice";
const nameArray = Array.from(name);

console.log(nameArray); // 輸出：["A", "l", "i", "c", "e"]

在這個例子中，我們將一個字符串轉換成了字符數組。相當厲害吧？

JavaScript Array keys()

keys()方法返回一個包含數組鍵的Array Iterator對象。它就像獲得了到你數組所有索引的VIP通行證。讓我們看看它是如何工作的：

const fruits = ["apple", "banana", "cherry"];
const keys = fruits.keys();

for (let key of keys) {
console.log(key);
}
// 輸出：
// 0
// 1
// 2

這個方法讓我們能夠訪問到我們數組的索引，在某些情況下這非常有用。

JavaScript類

ES6中的類將面向對象編程以更直觀的方式帶到了JavaScript中。它們就像是創建對象的藍圖。讓我們創建一個簡單的類：

class Dog {
constructor(name) {
this.name = name;
}

bark() {
return `${this.name} says woof!`;
}
}

const myDog = new Dog("Buddy");
console.log(myDog.bark()); // 輸出：Buddy says woof!

在這個例子中，我們創建了一個Dog類，它有一個構造函數和一個方法。然後我們可以用這個類來創造新的Dog對象。

JavaScript const關鍵字

const關鍵字就像是一個保險箱，一旦你將值放入其中，它就被鎖得牢牢的，不能被更改。它對於不應該被重新賦值的值來說是完美的。這是它如何工作的：

const PI = 3.14159;
// PI = 3; // 這會導致錯誤

console.log(PI); // 輸出：3.14159

在這個例子中，我們將PI聲明為常量。如果我們試圖重新賦值，JavaScript會抛出錯誤。

JavaScript let關鍵字

let就像是var的更有責任感的兄弟。它提供了塊級作用域，這可以幫助防止許多常見的編程錯誤。這是個例子：

let x = 1;

if (true) {
let x = 2; // 這是另一個'x'
console.log(x); // 輸出：2
}

console.log(x); // 輸出：1

在這個例子中，if塊中的x與外部的是不同的變量，這要感謝let的塊級作用域。

JavaScript默認參數

默認參數就像是給你函數的安全網。它們為參數提供默認值，如果沒有傳遞參數或傳遞的是undefined。讓我們看看它是如何工作的：

function greet(name = "Guest") {
return `Hello, ${name}!`;
}

console.log(greet()); // 輸出：Hello, Guest!
console.log(greet("Alice")); // 輸出：Hello, Alice!

在這個例子中，如果我們不提供名字，函數會使用"Guest"作為默認值。

JavaScript for...of循環

for...of循環是一種新的、更簡潔的迭代可迭代對象（如數組）的方式。它就像是一個導遊，帶你穿越你的數據。這是它如何工作的：

const fruits = ["apple", "banana", "cherry"];

for (let fruit of fruits) {
console.log(fruit);
}
// 輸出：
// apple
// banana
// cherry

這個循環會自動迭代數組中的每個元素，使代碼更清潔、更易於閱讀。

JavaScript函數剩余參數

剩余參數就像是捕捉所有傳遞給函數的額外參數的網。它由三個點（...）後跟一個名稱表示。這是一個例子：

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 輸出：10

在這個例子中，...numbers捕捉所有參數並將它們放入一個數組中，然後我們對這個數組求和。

JavaScript模塊

ES6中的模塊就像是樂高積木，它們讓你將代碼拆分成獨立的文件，並根據需要導入/導出功能。這是一個簡單的例子：

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // 輸出：8
console.log(subtract(5, 3)); // 輸出：2

這種模塊化方法有助於保持代碼的組織和可重用性。

JavaScript Map對象

Map對象就像是超級強大的對象。它們允許鍵為任何類型，並保持條目順序。這是它們如何工作的：

const myMap = new Map();

myMap.set('name', 'Alice');
myMap.set(1, 'number one');

console.log(myMap.get('name')); // 輸出：Alice
console.log(myMap.get(1)); // 輸出：number one

Map在需要將附加數據與對象關聯時特別有用。

新的全局方法

ES6引入了幾個新的全局方法。讓我們看一個：isFinite()。

console.log(Number.isFinite(10)); // 輸出：true
console.log(Number.isFinite(Infinity)); // 輸出：false
console.log(Number.isFinite("10")); // 輸出：false

這個方法檢查一個值是否是有限數字，返回true或false。

新的JavaScript Math方法

ES6還帶來了新的Math方法。其中一個是Math.trunc()，它移除數字的小數部分：

console.log(Math.trunc(4.9)); // 輸出：4
console.log(Math.trunc(-4.2)); // 輸出：-4

這個方法在需要處理整數時非常有用。

新的Number方法

還引入了新的Number方法。讓我們看Number.isInteger()：

console.log(Number.isInteger(10)); // 輸出：true
console.log(Number.isInteger(10.5)); // 輸出：false

這個方法檢查一個值是否是整數。

新的Number屬性

ES6添加了新的Number屬性。這裡有一個例子，使用Number.EPSILON：

console.log(Number.EPSILON); // 輸出：2.220446049250313e-16

EPSILON代表兩個可表示數字之間的最小間隔。

JavaScript Promise

Promise就像是JavaScript中的IOU。它們代表一個可能還不可用，但將在將來某個時點可用的值。這是一個簡單的例子：

const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Success!");
}, 1000);
});

myPromise.then(result => console.log(result)); // 輸出1秒後：Success!

Promise對於處理JavaScript中的異步操作至關重要。

JavaScript Set對象

Set對象是唯一值的集合。它們就像是没有重复元素的数组。這是它們如何工作的：

const mySet = new Set([1, 2, 3, 3, 4]);

console.log(mySet); // 輸出：Set(4) {1, 2, 3, 4}

Set自動移除重复值，這在某些情況下非常有用。

JavaScript新字符串方法

ES6引入了幾個新的字符串方法。讓我們看startsWith()：

const str = "Hello, world!";

console.log(str.startsWith("Hello")); // 輸出：true
console.log(str.startsWith("world")); // 輸出：false

這個方法檢查字符串是否以指定的字符開始。

JavaScript Symbol

Symbol是ES6中的一個新的原始類型。它們是唯一且不可變的，通常用作對象的屬性鍵。這是一個例子：

const mySymbol = Symbol("mySymbol");
const obj = {
[mySymbol]: "Hello, Symbol!"
};

console.log(obj[mySymbol]); // 輸出：Hello, Symbol!

Symbol用於在對象中創建非字符串屬性鍵。

JavaScript Spread運算符

Spread運算符（...）就像是一根魔法棒，能夠將可迭代對象展開成為個別元素。它非常多功能。這是一個例子：

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // 輸出：[1, 2, 3, 4, 5]

Spread運算符將arr1展開成為arr2中的個別元素。

結論

我們一起走過了很多內容，不是嗎？ES6為JavaScript帶來了如此多的新功能，我們只是略為觸及了皮毛。記住，掌握這些概念的關鍵在於練習。所以，出去編寫代碼吧！試試這些新功能，犯錯誤，修理它們，並在過程中玩得開心。在你知曉之前，你將會像專家一樣寫出現代的JavaScript代碼！

這裡是一個我們討論過的方法總結表：

方法	描述
箭頭函數	寫函數表達式的更短語法
Array.find()	返回數組中第一個滿足提供測試函數的元素值
Array.findIndex()	返回數組中第一個滿足提供測試函數的元素索引
Array.from()	從類數組對象或可迭代對象創建新的、淺複製的數組實例
Array.keys()	返回一個包含數組鍵的新Array Iterator對象
類	為創建對象提供模板，提供面向對象編程的更清晰語法
const	聲明一個區塊級別的、不可變的常量
let	聲明一個區塊級別的局部變量
Default Parameters	允許命名參數初始化默認值，如果未傳遞參數或傳遞的是undefined
for...of	創建一個迭代可迭代對象的循環
Rest Parameter	允許函數接受不定數量的參數作為數組
模塊	讓你將代碼拆分成獨立的文件，並根據需要導入/導出功能
Map	一個包含鍵值對的集合，類似於對象，但允許鍵為任何類型
Number.isFinite()	檢查一個值是否是有限數字
Math.trunc()	返回數字的整數部分，去掉任何小數位
Number.isInteger()	檢查一個值是否是整數
Number.EPSILON	代表兩個可表示數字之間的最小間隔
Promise	代表異步操作的終結（或失敗）
Set	唯一值的集合
String.startsWith()	檢查字符串是否以指定的字符開始
Symbol	一個唯一且不可變的原始值
Spread Operator	允許可迭代對象展開成為個別元素

快樂編程，並且願ES6與你同在！

Credits: Image by storyset