箭頭函式簡介

關於 ES6 的新增語法 :
1.讓原有 JS 撰寫更為精簡 ( 語法糖 )。
2.讓 JS 撰寫觀念更為直覺、簡便 (新方法)。

新的箭頭函式讓原有的函式寫法可以更精簡、方便，以下新舊方式來比對。

// 原來函式寫法
const callName = function (someone) {
    return '我是 ' +someone;
}
console.log(callName('小明'));
// 輸出結果 : 我是 小明

// 改成箭頭函式寫法
const callName = (someone) => {  // 把function省略掉，增加 =>
    return '我是 ' +someone;
}
console.log(callName('小明'));
// 輸出結果 : 我是 小明

函式為函式表達時，可以把箭頭函式縮寫

1. 如果程式碼內容是表達式時，可以把大括號 {} 跟 reurn 拿掉，因為 => 後會自動 reurn。

const callName = (someone) => '我是 ' +someone;  //可以把大括號{} 跟 reurn拿掉
console.log(callName('小明'));
// 輸出結果 : 我是 小明

2. 如果只有一個參數時

// 一個參數時
const callName = someone => '我是 ' +someone;  //可以參數 () 拿掉，
console.log(callName('小明'));
// 輸出結果 : 我是 小明

// 兩個參數時就要保留()
const callName = (a, b) => '我是 ' +someone;  
console.log(callName('小明'));

// 沒有參數時
const callName = () => '我是小明';  // 要保留空 ()

箭頭函式應用

搭配陣列方法

可以參考文章 連結

// 傳統陣列寫法
const arr = [15, 12, 63, 67, 1421, 124, 567, 235];
const arrDouble = arr.map(function(num) {  
    return num * 2 ;
});
console.log(arrDouble);
// 輸出結果 : (8) [30, 24, 126, 134, 2842, 248, 1134, 470]
// map可以將陣列數值一一取出，再回傳到新陣列，適合陣列數值需要一一變動的方法。

// 箭頭函式寫法
const arr = [15, 12, 63, 67, 1421, 124, 567, 235, 12, 45];
const arrDouble = arr.map(num => num * 2); // 因為只有num一個參數，可以省略()用縮寫寫法
console.log(arrDouble);
// 輸出結果 : (8) [30, 24, 126, 134, 2842, 248, 1134, 470]

平均數

// 傳統陣列寫法
const average = function () {
    const nums = Array.from(arguments);
    const total = nums.reduce(function (acc, val) {
        return acc + val
    }, 0);
    console.log(total);
    
    return total / nums.length;
}
console.log(average(1, 2, 3, 4, 5));

• 使用 arguments 把所有參數傳入新的陣列，但是 arguments 是類陣列，所以使用 Array.from 轉成純陣列。
• .reduce 一樣透過迴圈方式將值一一帶入，他會帶入前一個值，所以先帶入 0 當作前一個值開始。
• 一開始先將 0 帶入 (acc, val) 中的 acc，當作第一個值，之後跑迴圈會依序將前面的值帶入。
• (acc, val) 中的 val，就是 console.log(average(1, 2, 3, 4, 5)); 帶入的參數。
• 跑的順序就會是 total = 0+1 > 1+2 > 3+3 > 6+4 > 10+5 = 15 。
• 最後在平均陣列的個數，15 / 3 = 3 。

// 箭頭函式寫法
const average = (...num) => num.reduce((acc, val) => acc + val, 0) / nums.length;

• 使用其餘參數(...+參數)，結果會跟 Array.from(arguments); 一樣。
• 使用箭頭函式精簡成一行

方法參考

物件內 this

// 傳統陣列寫法 用AJAX方法取得遠端資料
const person = {
    data: {
    },
    getData: function() {
        const vm = this;  // 宣告另外的的變數，這邊 this 指向 person
        $.ajax({
            url: 'https://randomuser.me/api/',
            dataType: 'json',
            success: function (data) {
                console.log(data);
                vm.data = data.results[0];
                console.log('person.data', person.data);
            }
        });
    }
}
person.getData();

// 箭頭函式寫法
const person = {
    data: {
    },
    getData: function() {
        // const vm = this;  
        // 箭頭函式沒有自己的 this ，不用另外宣告，此時會使用外層的作用域
        $.ajax({
            url: 'https://randomuser.me/api/',
            dataType: 'json',
            success: (data) => {  // 省略 function
                console.log(data);
                this.data = data.results[0]; // 改回 this
                console.log('person.data', person.data);
            }
        });
    }
}
person.getData();

• 箭頭函式沒有自己的 this ，此時會使用外層的作用域，就是 getData: function() 這一層裡的作用域。