# <font class="h2">箭頭函式</font>

###### tags: `javascript`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>

==箭頭函式不是語法糖(語法糖不會影響原來運作)==
<br>

### <font class="h4">函式陳述式</font>

function numA(x){
    return x*x;
}
console.log(numA(3));//9

<br>

### <font class="h4">函式表達式</font>

const numB = function(x){
    return x*x;
}
console.log(numB(3));//9

<br>

### <font class="h3">箭頭函式</font>
:::info
**寫法一:**

(參數列表)=>(回傳值)

範例:

//傳統的函式宣告
let add=function(n1,n2){
    return n1+n2
};

//箭頭函式的寫法
let add=(n1,n2)=>(n1+n2);

用箭頭函式就不用寫return
<br>

**寫法二:**

(參數列表)=>{函式內部程式}

範例:

//傳統的函式宣告
let add=function(n1,n2){
    return n1+n2
};

//箭頭函式的寫法
let add=(n1,n2)=>{
    return n1+n2
};

:::

範例:

const numB = (x,y) =>{
    const a =3;
    const b =4;
    return a*b*x*y;
}
console.log(numB(4,5));

<br>

### <font class="h4">箭頭函式再縮寫</font>
1. 如果函式會搭配到return(表達式)可以把大括號拿掉
2. 如果只有一個參數，可以省略小括號
3. 但如果沒有參數，還是要有空括號

const num = (x) =>{
    return`數字相乘${x*x}`;
}
console.log(num(3));//數字相乘9

如果函式會搭配到return可以縮寫為

const num = (x) => `數字相乘${x*x}`;
console.log(num(3));

如果函式只有使用一個參數可以拿掉小括號

const num = x => `數字相乘${x*x}`;
console.log(num(3));

<br><br>

### <font class="h4">陣列操作map、filter</font>

const data = [1,8,13,20];
const newData = data.map(function(item){
    return item+2;
})
console.log(newData);//[3,10,15,22]

可以改寫為

const data = [1,8,13,20];
const newData = data.map((item) =>{
    return item+2;
})
console.log(newData);//[3,10,15,22]

如果函式會搭配到return還可以再更精簡寫為

const data = [1,8,13,20];
const newData = data.map((item) => item+2)
console.log(newData);//[3,10,15,22]

如果參數只有一個還可以把小括號拿掉

const data = [1,8,13,20];
const newData = data.map(item => item+2)
console.log(newData);//[3,10,15,22]

<br><br>

### <font class="h3"> 箭頭函式與傳統函式不同之處</font>
### <font class="h4">箭頭函式沒有argument這個參數</font>
傳統函式在執行的時候會自動帶上arguments這個參數，arguments會將我們傳入的參數全部都列出來。

const nums = () =>{
    console.log(arguments);
}
nums(10,50,100,50,5,1,1,1,500);//會報錯

<br>

const nums = (...arg) =>{
    console.log(arg);
}
nums(10,50,100,50,5,1,1,1,500);

如果要將沒有列出來的參數給取出來，就要使用「其餘參數」
<br><br>

### <font class="h4">箭頭函式沒有自己的this</font>
箭頭函式的this會指向父層