淺談ES6箭頭函數

一、什麼是箭頭函數

箭頭函數是ES6新增的一種定義函數的方式，簡化了function方式定義函數的寫法，由於寫法簡便可以在部分場景取代function。

二、如何使用箭頭函數

const str2number = str => Number(str);
//相當於下面的寫法
const str2number = function (str) {
    return Number(str)
}

箭頭函數使得表達更加簡潔

三、使用箭頭函數的注意事項：

• 如果箭頭函數不需要參數或者有多個參數，就使用圓括號代表參數部分

const sum = (num1,num2) => num1 + num2

const getName = () => 'Kobe'

• 如果箭頭函數的代碼塊部分多於一條語句，就要使用大括號將其括起來，井使用 return語句返回

const findMaxNumber = (...rest) => {
    const maxNumber = Math.max(...rest)
    return maxNumber;
}

 

• 由於大括號被解釋爲代碼塊，所以如果箭頭函數直接返回 個對象，必須在對象外面加上 括號。

const getTempitem = id => ({id:id,name:'temp'})

• 箭頭函數可以與變量的解構結合使用

const getFullName = ({firstName,lastName}) => firstName + ' ' + lastName

四、箭頭函數的特點

• 箭頭函數沒有自己的this，它的this指向定義時外層第一個非箭頭函數的代碼塊的this；
• 函數體內的this永遠指向定義時的所在的對象，而不是運行時的this，即使使用call和apply也無法改變this指向
• 由於箭頭函數沒有自己的this，所以箭頭函數無法作爲構造函數，無法爲原型對象添加方法，無法作爲對象的方法屬性
• 不可以使用argumens對象，該對象在函數體內不存在；如果要用，可以使用rest參數替代
• 不可以使用yield命令，因此箭頭函數無法作爲Generator函數

使用箭頭函數常見的坑就是this的指針問題，包括使用箭頭函數作爲構造函數，爲原型對象添加方法等等。

//根據id尋找索引
Array.prototype.findIndex = (id) =>{
    let index = 0;
    //正常情況下這個this是調用的數組，但是箭頭函數的this指向外層代碼塊的this，在這裏
    //也就是window，這就回導致this.forEach是undefined
    this.forEach((item,i)=>{
        if(item.id === id){
            index =i;
        }
    })
    return index
}

五、箭頭函數的作用

• 簡化回調函數

//正常函數寫法
[1,2,3].map(function(x){
    return x*x
})
//箭頭函數寫法
[1,2,3].map(x=>x*x)

• 箭頭函數可以讓this指向固定化，這種特性非常有利於封裝回調函數

​​​​​​​