Hi，大家好，我是Tony，是一個對於JavaScript有一點點概念的新手。

第21天，加油！
今天的學習內容是：JavaScript 箭頭函式 (Arrow Function)

學習內容來自
彭彭老師JavaScript 箭頭函式 Arrow Function
https://www.youtube.com/watch?v=GzrWyJkD3b8&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=28

昨天的學習內容：[Day 21] JavaScript AJAX 網路連線實務(利用fetch函式)
https://ithelp.ithome.com.tw/articles/10346669

1. 回顧：函式的核心組成

每一個函式都會包含以下三個部分：

• 函式的本體
• 函式的參數
• 函式的回傳值

2. 什麼是 箭頭函式 (Arrow Function)

它是函式的另一種寫法，
省去function關鍵字，用**=>**取代，
普通函式與箭頭函式的基本語法：

//普通函式寫法1
function 函式名稱(函式的參數列表){
    函式區塊內的程式碼
    return 回傳值;
};

//普通函式寫法2
let 函式名稱=function(函式的參數列表){
    函式區塊內的程式碼
    return 回傳值;
};

//箭頭函式的寫法
let 函式名稱=(函式的參數列表)=>{
    函式區塊內的程式碼
    return 回傳值;
};

實際範例如下：

//普通函式寫法1
function add(n1,n2){
    let result=n1+n2;
    return result;
};

//普通函式寫法2
let add=function(n1,n2){
    let result=n1+n2;
    return result;
};

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

3. 箭頭函式的簡化語法

函式本體只有回傳值敘述，
沒有其他指令時可以簡化

//可以簡化的箭頭函式 (有大括號)
let 函式名稱=(函式的參數列表)=>{
    return 回傳值;
};

//簡化後的箭頭函式 (用小括號)
let 函式名稱=(函式的參數列表)=>(回傳值);

實際範例如下：

//無法簡化
let add=(n1,n2)=>{
    let result=n1+n2; //除了回傳值之外還有程式，不能簡化。
    return result;
};

//可以簡化
let add=(n1,n2)=>{
    return n1+n2;  //函式中只有回傳值，可以簡化。
};

//簡化後
let add=(n1+n2)=>(n1+n2);

練習

• 練習1：用一般迴圈寫法，計算1+2+...+10的結果。

這是原本就會的內容，
之前有學過的方式，計算結果。

<script>
    let result=0
    let n=1;
    while(n<=10){
        result+=n;
        n++;
    }
    console.log(result);
</script>

網頁結果1

• 練習2：放入函式中，計算1+2+...+10的結果。

將前面的迴圈放入函式中，
並呼叫函式，印出執行的結果。

<script>
    function calculated(){
        let result=0
        let n=1;
        while(n<=10){
            result+=n;
            n++;
        }
        console.log(result);
    }
    calculated();
</script>

網頁結果2

• 練習3：放入函式中，計算1+2+...+max，累加到特定數字。

利用在函式中的參數值來寫。
順便練習另一種函式寫法

<script>
    let calculated=function(max){ //放入參數值
        let result=0
        let n=1;
        while(n<=max){  //參數值運作的地方
            result+=n;
            n++;
        }
        return result //用回傳值傳遞到函式外部
    };
    //呼叫函式
    let ans1=calculated(10); //1+2+...+10
    let ans2=calculated(20); //1+2+...+20
    let ans3=calculated(100); //1+2+...+100
    console.log(ans1,ans2,ans3);
</script>

網頁結果3
正確列出累加到10、20、100。

• 練習4：用箭頭函式寫出，計算1+2+...+max，累加到特定數字。

改成使用箭頭函式來寫。

<script>
    let calculated=(max)=>{
        let result=0
        let n=1;
        while(n<=max){
            result+=n;
            n++;
        }
        return result
    };
    let ans1=calculated(10); //1+2+...+10
    let ans2=calculated(20); //1+2+...+20
    let ans3=calculated(100); //1+2+...+100
    console.log(ans1,ans2,ans3);
</script>

網頁結果4
得到的結果也是一樣，正確跑出來。

• 練習5：一個乘法的箭頭函式，並寫出簡化的版本

<script>
    //乘法的箭頭函式
    let multiply1=(n1,n2)=>{
        return n1*n2;
    };    
    let ans1=multiply1(3,4);
    let ans2=multiply1(12,53);    
    console.log(ans1,ans2);
    
    //簡化後
    let multiply2=(n1,n2)=>(n1*n2);
    let ans3=multiply2(3,4);
    let ans4=multiply2(12,53);    
    console.log(ans1,ans2);
</script>

網頁結果5
成功得到一樣的結果。

以上就是今天學習的內容。
有感覺自己之前學到的東西漸漸開始要融會貫通了。
謝謝大家，我們明天見！