# 🏅 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}`); }); ``` -->