JavaScript - 箭頭函數：初學者指南

你好，未來的 JavaScript 巫師們！? 今天，我們將踏上一段令人興奮的旅程，探索箭頭函數的世界。別擔心如果你是編程新手——我將成為你的友好導遊，我們將一步步學習。到了這個教學的結尾，你將能像數字羅賓漢一樣射出箭矢！讓我們來看看吧！

JavaScript - Arrow Functions

箭頭函數是什麼？

想像你在給朋友寫信。你可以寫一封長長的正式信件，或者你可以發一條快速的文字消息。箭頭函數就像那條文字消息——它們是一種更短、更脆的書寫 JavaScript 函數的方式。

讓我們從一個傳統函數開始，然後看看我們如何將其轉換為箭頭函數：

// 傳統函數
function greet(name) {
return "Hello, " + name + "!";
}

// 箭頭函數
const greetArrow = (name) => {
return "Hello, " + name + "!";
};

看起來簡潔多了吧？function 關鍵字消失了，被一個時尚的小箭頭 => 取代。就像我們的函數做了一次時尚的改頭換面！

單行箭頭函數

現在，讓我們使其更加時髦。當你的箭頭函數只有一個語句時，你可以使其超級緊湊：

const greetArrowCompact = (name) => "Hello, " + name + "!";

哇！我們移除了大括號 {} 和 return 關鍵字。就像我們的函數去減肥並丟掉了所有的語法負擔！

多行箭頭函數

但如果我们希望函數做更多的事情呢？沒問題！我們仍然可以使用箭頭函數，但需要將那些大括號拿回來：

const greetWithTime = (name) => {
const currentTime = new Date().getHours();
let greeting = "Good ";
if (currentTime < 12) greeting += "morning";
else if (currentTime < 18) greeting += "afternoon";
else greeting += "evening";
return `${greeting}, ${name}!`;
};

這個函數不僅問候你，還會檢查時間以給你一個恰當的問候。就像在你的代碼中有一個有禮貌的管家！

實際範例：讓我們來點實際的

讓我們用一個真實世界的例子來實際應用箭頭函數。想像我們正在構建一個簡單的计算器：

const calculator = {
add: (a, b) => a + b,
subtract: (a, b) => a - b,
multiply: (a, b) => a * b,
divide: (a, b) => (b !== 0 ? a / b : "Cannot divide by zero!"),
};

console.log(calculator.add(5, 3)); // 輸出: 8
console.log(calculator.subtract(10, 4)); // 輸出: 6
console.log(calculator.multiply(3, 7)); // 輸出: 21
console.log(calculator.divide(15, 3)); // 輸出: 5
console.log(calculator.divide(10, 0)); // 輸出: Cannot divide by zero!

看看這有多乾淨、易讀！每個操作都是箭頭函數，使我們的计算器對象看起來整潔又乾脆。

無參數箭頭函數

有時候，你可能需要一個不需要任何參數的函數。箭頭函數也可以滿足你：

const sayHello = () => "Hello, world!";
console.log(sayHello()); // 輸出: Hello, world!

就像一個總是問候世界的函數，無論何時！

有參數箭頭函數

我們之前已經見過這個，但讓我們來分解一下：

const multiply = (a, b) => a * b;
console.log(multiply(4, 6)); // 輸出: 24

在這裡，a 和 b 是參數。箭頭函數接收這兩個數字並將它們相乘。簡潔而優雅！

箭頭函數作為表達式

箭頭函數可以用作表達式，這意味著你可以將它們用在普通函數表達式的位置：

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((num) => num * num);
console.log(squaredNumbers); // 輸出: [1, 4, 9, 16, 25]

在這裡，我們在 map 方法中使用了箭頭函數來平方數組中的每個數字。就像給每個數字一點小小的力量提升！

有默認參數的箭頭函數

箭頭函數也可以有默認參數，就像普通函數一樣：

const greetWithDefault = (name = "Guest") => `Hello, ${name}!`;
console.log(greetWithDefault()); // 輸出: Hello, Guest!
console.log(greetWithDefault("Alice")); // 輸出: Hello, Alice!

這對於當你希望函數即使在有人忘記傳遞參數時也能正常工作非常有用。就像有一個備用計劃！

使用箭頭函數的好處

現在我們已經看到了箭頭函數在實際操作中的表現，來談談它們為什麼如此出色：

簡潔的語法：它們使你的代碼更短，更容易閱讀。
隱含的返回：對於單語句函數，你不需要寫 return。
Lexical this 綁定：（我們會在更進一步的課程中涵蓋這個，但這是一個很大的優點！）
適合函數式編程：它們與 map、filter 和 reduce 這樣的方法一起使用非常棒。

使用箭頭函數的限制

但請記住，能力越大，責任越大。箭頭函數並非總是最佳選擇：

沒有 this 綁定：它們沒有自己的 this，在某些情況下可能會有問題。
不能用作構造函數：你不能對箭頭函數使用 new。
沒有 arguments 對象：箭頭函數沒有 arguments 對象。
不適合用作方法：它們作為對象方法使用時可能會行為異常。

以下是箭頭函數語法的總結：

類型	語法	範例
無參數	`() => { ... }`	`const sayHi = () => { console.log("Hi!"); };`
一個參數	`param => { ... }`	`const double = x => { return x * 2; };`
多個參數	`(param1, param2) => { ... }`	`const add = (a, b) => { return a + b; };`
單語句	`param => expression`	`const square = x => x * x;`
返回物件字面量	`param => ({ key: value })`	`const createObj = x => ({ value: x });`

至此，各位！你剛剛通過箭頭函數升級了你的 JavaScript 技能。記住，熟練來自練習，所以去用箭頭改造你的代碼吧！開心編程！??

Credits: Image by storyset