# JavaScript -箭頭函式
###### tags: `javascript` `箭頭函式` `hoisting` `map`
## 函式陳述式與函式表達式差異
### 函式陳述式
* 具 hoisting 效果，可於宣告前或宣告後執行該函式。
```javascript=
// 函式陳述式
function numA(x){
return x * x;
}
console.log(numA(3)); //9
```
### 函式表達式
* 賦予一個"變數"為 function。
* 不具 hoisting 效果，若於宣告前執行該函式程式會出錯。
```javascript=
// 函式表達式 (賦予一個"變數"為 function)
const numB = function(x){
return x * x;
}
console.log(numB(3)); //9
```
## 箭頭函式
### 基本寫法
* 函式表達式的簡化版：去掉 function，改寫為 =>
```javascript=
const numA = (x) => {
return x * x;
}
console.log(numA(3)); //9
```
* 可代入多個參數
```javascript=
const numB = (x, y) => {
let a = 1;
let b = 2;
return a*b*x*y;
}
console.log(numB(1,3)); //6
```
### 縮寫寫法
* point1. 如果函式內容有搭配 return，可省略大括號 {} 與 return
```javascript=
const numA = (x) => `數字相乘 ${x*x}`;
console.log(numA(4)); //16
// 原本基本寫法
const num = (x) => {
return `數字相乘 ${x*x}`;
}
console.log(num(2)); //4
```
* point2. 如果只有一個參數，可以省略小括號 ()
```javascript=
const numB = x => `數字相乘 ${x*x}`;
console.log(numB(3)); //9
```
* point3. 沒有參數，還是要寫小括號 () 才行!
```javascript=
const numC = () => `數字為 ${0}`;
console.log(numC());
```
* point4. 如果多個參數，要寫小括號 ()
```javascript=
const numD = (x,y) => `數字相乘 ${x*y}`;
console.log(numD(2,3)); //6
```
### 陣列操作 map、filter 搭配箭頭函式寫法
#### Array.map()陣列處理方法
* 函式表達式
```javascript=
// 函式表達式
const newData = data.map(function(item){
return item + 2;
})
console.log(newData);
// [4, 6, 8, 10, 12]
```
* 箭頭函式精簡寫法
```javascript=
// 箭頭函式精簡寫法
const newData = data.map(item => item + 2);
console.log(newData);
// [4, 6, 8, 10, 12]
```
* [Day13【ES6 小筆記】Array.map() - 處理陣列最佳選擇](https://ithelp.ithome.com.tw/articles/10215281)
Sign in with Wallet
Connect another wallet