ES6中有哪些箭頭函數

這期內容當中小編將會給大家帶來有關ES6中有哪些箭頭函數，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

語法

我們先來看看箭頭函數的語法：

([param] [, param]) => {
  statements
}
param => expression

param 是參數，根據參數個數不同，分這幾種情況：

() => { … } // 零個參數用 () 表示；
x => { … } // 一個參數可以省略 ()；
(x, y) => { … } // 多參數不能省略 ()；

示例

我們再來看看一些示例，看看在ES5中的函數怎么通過ES6中的箭頭函數來替代吧：

// ES5
var selected = allJobs.filter(function (job) {
 return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());

當然，也可以定義多個參數：

// ES5
var total = values.reduce(function (a, b) {
 return a + b;
}, 0);
// ES6
var total = values.reduce((a, b) => a + b, 0);

當然=>后面也不一定非得接return 之后的語句，看下面：

// ES5
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
 playTrumpet();
 fireConfettiCannon();
});

但是需要注意的是，多行語句需要用{}括起來，單行表達式不需要{}，并且會作為函數返回值。

x => { return x * x }; // 函數返回 x * x
x => x * x; // 同上一行
x => return x * x; // SyntaxError 報錯，不能省略 {}
x => { x * x }; // 合法，沒有定義返回值，返回 undefined

和普通函數一樣，箭頭函數也可以使用剩余參數和默認參數。

var func1 = (x = 1, y = 2) => x + y;
func1(); // 得到 3
var func2 = (x, ...args) => { console.log(args) };
func2(1,2,3); // 輸出 [2, 3]

特性

介紹完了箭頭表達式的語法和示例，我們就需要思考一下了。如果箭頭表達式僅僅就是簡化了函數的命名，我們為什么要改變原來的習慣而去使用它呢？所以我們需要了解一下箭頭函數的特性。

箭頭函數內部沒有constructor方法，也沒有prototype，所以不支持new操作。但是它對this的處理與一般的普通函數不一樣。箭頭函數的 this 始終指向函數定義時的 this，而非執行時。我們通過一個例子來理解:

var o = {
  x : 1,
  func : function() { console.log(this.x) },
  test : function() {
    setTimeout(function() {
      this.func();
    }, 100);
  }
};
o.test(); // TypeError : this.func is not a function

上面的代碼會出現錯誤，因為this的指向從o變為了全局（函數調用中的this都是指向全局的）。如果大家對JavaScript中的this不是很熟悉的話，可以看看前面的一篇文章《javascript中this的用法實例詳解》。好了，回歸正題，我們需要修改上面的代碼如下：

var o = {
  x : 1,
  func : function() { console.log(this.x) },
  test : function() {
    var _this = this;
    setTimeout(function() {
      _this.func();
    }, 100);
  }
};
o.test();

通過使用外部事先保存的this就行了。這里就可以利用到箭頭函數了，我們剛才說過，箭頭函數的 this 始終指向函數定義時的 this，而非執行時。所以我們將上面的代碼修改如下：

var o = {
  x : 1,
  func : function() { console.log(this.x) },
  test : function() {
    setTimeout(() => { this.func() }, 100);
  }
};
o.test();

這回this就指向o了。

我們還需要注意一點的就是這個this是不會改變指向對象的，我們知道call和apply可以改變this的指向，但是在箭頭函數中是無效的。

var x = 1,
  o = {
    x : 10,
    test : () => this.x
  };
o.test(); // 1
o.test.call(o); // 依然是1

上述就是小編為大家分享的ES6中有哪些箭頭函數了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。