箭頭函數（arrow function）

箭頭函數相當于一個匿名函數

x => x * x; //同等于下面的匿名函數 //x - >傳參 //x * x -> returnfunction(x) {return x * x; }

如果箭頭函數含表達式就必須加{...} 和 return

x => {if(x>10) {return x + x;}else {return x * x;} }

如果箭頭函數不是一個參數，參數就必須加()->(x,y)

//兩個參數 (x,y) => x * y //沒有參數 () = > 1 + 4 //可變參數 var fn = (x,...rest) => {for(var i = 0;i < rest.length; i++) {x += rest[i]}return x; } //rest是個Array [4,5] fn(1,4,5);//10

如果return的值是一個對象需要加()進行區分，防止沖突

var fn = x => { foo: x } fn(3);//undefinedvar fn = x => ({ foo: x }) fn(3);//Object {foo: 3}

箭頭函數中的this由上下文決定

//es6 =>寫法var obj = {age: 18,fnc : function (x) {var fn = x => this.age + x;//this->objreturn fn(x);} } obj.fnc(5)//23//es5寫法//錯誤的寫法 var obj = {age: 18,fnc : function (x) {var fn = function (x) {return this.age + x;//this->window} return fn(x);} } obj.fnc(5)//NaN //正確的寫法 var obj = {age: 18,fnc : function (x) {var that = this;//this->objvar fn = function (x) {return that.age + x;} return fn(x);} } obj.fnc(5)//23

如果用call()或者apply()調用箭頭函數時，無法對this進行綁定（傳入的第一個參數被忽略）：

var obj = {age: 18,fnc : function (x) {var fn = x => this.age + x;//this->objreturn fn.call({age:20},x);//用call無法改變this的指向，箭頭函數中的age依然等于18} } obj.fnc(5)//23

總結

以上是生活随笔為你收集整理的es6中的箭头函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。