箭頭函數

寫法靈活

const numbers = [2, 4, 7, 89, 234];

const double = numbers.map(function (number) {
    return number * 2;
});

const double2 = numbers.map((number) => {
    return number * 2;
});

console.log(double2);

以上，兩種語法， double 與 double2 結果一樣。

簡而言之：

• 刪掉 function 關鍵字
• 加上一個 => 箭頭
• 沒有參數加 ()
• 一個參數可選擇加 ()
• 多個參數 , 分隔

隱式返回

顯示返回就是 return 關鍵字加上后面返回的內容

箭頭函數中的隱士返回就是可以把 renturn 省略掉，去掉花括號 {}。

const double2 = numbers.map(number => number * 2);

this

const Dp = {
    name: 'Dp',
    hobbies: ['Coding', 'Sleeping', 'Reading'],
    printHobbies: function () {
        this.hobbies.map(function (hobby) {
            console.log(`${this.name} loves ${hobby}`);
        });
    }
}
Dp.printHobbies();

以上，結果是

undefined loves Coding
undefined loves Sleeping
undefined loves Reading

原因 this 是在運行的時候綁定的，在以上 map 方法中的回調函數是一個獨立的函數，當一個函數獨立運行的時候，不是被作為對象的方法調用，也沒有通過當沒有 apply , bind , call 改變 this 值的話，這時候的 this 指向window`。

所以我們可以改寫

var self = this;
this.hobbies.map(function (hobby) {
    console.log(`${self.name} loves ${hobby}`);
});

達到想要的效果。

我們還可以利用箭頭函數的便利

this.hobbies.map(hobby => console.log(`${this.name} loves ${hobby}`));

這是因為箭頭函數沒有自己的 this 值，他的 this 值是繼承父級作用域的，與我們之前接觸的 this 值是在執行時動態指定的不同，箭頭函數的 this 值是詞法作用域，也就是在定義的時候就指定的，而且以后也不會隨調用方法的改變而改變。

不適用場景

• 作為構造函數，一個方法需要綁定到對象
• 當你真的需要this的時候
• 需要使用arguments對象的