ES6學習箭頭函數

箭頭函數做用

1.函數目的指向性可讀性更好
2.簡化代碼
3.提高開發效率 普通函數與箭頭函數對比

function sum (a,b) {
        return a + b
    }
    let sum = (a,b) => a + b
    console.log(sum (10,20))  // 30
複製代碼

箭頭函數返回值若是不是對象，不須要寫{}，若是是對象，須要使用（）包裹。

let sum = (a,b) => ({a:a,b:b})
複製代碼

es5多重返回不方便

function sum (x) {
        return function (y) {
            return function (z) {
                return x + y + z
            }
        }
    }
    var sum1 = sum(1)
    var sum2 = sum1(2)
    var sum3 = sum2(3)
    console.log(sum3) //6
複製代碼

上面代碼換成箭頭函數會簡化不少

let sum = x => y => z => x + y + z
    console.log(sum(1)(2)(3)) // 6
複製代碼

箭頭函數特色

1.不用寫function關鍵字
2.只能用做函數使用不能new，沒有原型
3.參數不能重複命名
4.返回值能夠不寫return，可是有時須要配合{}
5.內部arguments this 由定義時外圍最接近一層的非箭頭函數的arguments和this決定其值 下面例子看出arguments輸出爲箭頭函數定義時外圍函數的arguments

function outer () {
        let sum = (a,b) => {
        console.log(arguments,a,b) //[5,6,7],3,4
    }
    sum(3,4)
    }
    outer(5,6,7)
複製代碼

箭頭函數的this除了外界沒有定義函數指向window，其餘和arguments用法相同

let sum = () => {
        console.log(this) //window
        console.log(arguments) //報錯，arguments沒有定義
    }
複製代碼

箭頭函數配合數組的map,forEach,filter等方法使用會更好。

有錯誤歡迎指出，謝謝觀看。

廣告：
做者github：github.com/webxukai
做者gitee：gitee.com/webxukai
做者微信：e790134972
做者QQ:我想你應該知道了！
做者QQ郵箱：同上，呵呵！

ES6其餘文章：

ES6學習let&const
juejin.im/post/5c683e…
ES6學習...運算符
juejin.im/post/5c6917…
ES6學習解構賦值 juejin.im/post/5c692b…