---
# System prepended metadata

title: "\U0001F3C5 Day 29 - 箭頭函式"
tags: [JS 直播班 - 2025 秋季班]

---

# 🏅 Day 29 - 箭頭函式

### 寫法
宣告變數、並賦予它函式，我們稱這段 code 為「 函式表達式 」，下方範例都屬於函式表達式。
在 ES6 函式表達式中我們可以將 `function` 關鍵字移除並在參數後加入箭頭 `=>` 將程式碼簡化，此時即為箭頭函式。
```javascript=
/* 傳統函式 */
let cat = function(name){
  return `我的貓貓叫 ${name}`;
};
console.log(cat('Miu'));       // "我的貓貓叫 Miu"


/* 箭頭函式 */
let arrowCat = (name) => {     // function 改為 =>
  return `我的貓貓叫 ${name}`;
};
console.log(arrowCat('Miu'));  // "我的貓貓叫 Miu"
```

若是當 `{ }` 內程式碼只有一行時，則可以再簡化：
```javascript=
// 將 return 以及 {} 移除，簡化成一行，此時自動會有 return 的作用
let arrowCat = (name) => `我的貓貓叫 ${name}`;
console.log (arrowCat('Miu'));  // "我的貓貓叫 Miu"
```
> **注意：**
> 由於 `{}` 大括號內可以加入多行程式碼，所以寫成一行但沒有移除大括號時不會自動帶入 return：
> ```javascript=
> let calcPlus = (num) => num + 1;
> let calcPlusNoReturn = (num) => { num + 1 };  // 不會自動帶入 return
> 
> // 比較
> let calcPlusSum = calcPlus(3);
> let calcPlusNoReturnSum = calcPlusNoReturn(3);
> 
> console.log(calcPlusSum);          //  4
> console.log(calcPlusNoReturnSum);  //  undefined
> ```

若是當只有一個參數時，我們可以再簡化，將參數旁的小括號 `()` 移除：
```javascript=
// 移除 () 
let arrowCat = name => `我的貓貓叫 ${name}`;
console.log (arrowCat('Miu'));  // "我的貓貓叫 Miu"
```
> **注意：**
> 若沒有參數，不能移除 `()`
> ```javascript=
> let sayHello = () => `Hello!`;
> sayHello(); // Hello!
> ```


問題
---
試著用箭頭函式寫寫看 forEach 吧！
```javascript=
let pokemon = ['呆呆獸','沼王','噴火龍','雷丘'];
pokemon.forEach(function(item, index) {
 console.log(`${index+1} : ${item}`);
})
```


<!-- 解答：  

```javascript=
let pokemon = ['呆呆獸','沼王','噴火龍','雷丘'];

pokemon.forEach((item, index) => { 
  console.log(`${index+1} : ${item}`);
});
```
-->