這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)ES6中有哪些箭頭函數(shù)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作與策劃設(shè)計(jì),祁陽(yáng)網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:祁陽(yáng)等地區(qū)。祁陽(yáng)做網(wǎng)站價(jià)格咨詢:028-86922220

語(yǔ)法

我們先來(lái)看看箭頭函數(shù)的語(yǔ)法：

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

param 是參數(shù)，根據(jù)參數(shù)個(gè)數(shù)不同，分這幾種情況：

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

示例

我們?cè)賮?lái)看看一些示例，看看在ES5中的函數(shù)怎么通過(guò)ES6中的箭頭函數(shù)來(lái)替代吧：

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

當(dāng)然，也可以定義多個(gè)參數(shù)：

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

當(dāng)然=>后面也不一定非得接return 之后的語(yǔ)句，看下面：

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

但是需要注意的是，多行語(yǔ)句需要用{}括起來(lái)，單行表達(dá)式不需要{}，并且會(huì)作為函數(shù)返回值。

x => { return x * x }; // 函數(shù)返回 x * x
x => x * x; // 同上一行
x => return x * x; // SyntaxError 報(bào)錯(cuò)，不能省略 {}
x => { x * x }; // 合法，沒(méi)有定義返回值，返回 undefined

和普通函數(shù)一樣，箭頭函數(shù)也可以使用剩余參數(shù)和默認(rèn)參數(shù)。

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

特性

介紹完了箭頭表達(dá)式的語(yǔ)法和示例，我們就需要思考一下了。如果箭頭表達(dá)式僅僅就是簡(jiǎn)化了函數(shù)的命名，我們?yōu)槭裁匆淖冊(cè)瓉?lái)的習(xí)慣而去使用它呢？所以我們需要了解一下箭頭函數(shù)的特性。

箭頭函數(shù)內(nèi)部沒(méi)有constructor方法，也沒(méi)有prototype，所以不支持new操作。但是它對(duì)this的處理與一般的普通函數(shù)不一樣。箭頭函數(shù)的 this 始終指向函數(shù)定義時(shí)的 this，而非執(zhí)行時(shí)。我們通過(guò)一個(gè)例子來(lái)理解:

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

上面的代碼會(huì)出現(xiàn)錯(cuò)誤，因?yàn)閠his的指向從o變?yōu)榱巳郑ê瘮?shù)調(diào)用中的this都是指向全局的）。如果大家對(duì)JavaScript中的this不是很熟悉的話，可以看看前面的一篇文章《javascript中this的用法實(shí)例詳解》。好了，回歸正題，我們需要修改上面的代碼如下：

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

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

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

這回this就指向o了。

我們還需要注意一點(diǎn)的就是這個(gè)this是不會(huì)改變指向?qū)ο蟮?，我們知?strong>call和apply可以改變this的指向，但是在箭頭函數(shù)中是無(wú)效的。

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

上述就是小編為大家分享的ES6中有哪些箭頭函數(shù)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站vcdvsql.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目：ES6中有哪些箭頭函數(shù)-創(chuàng)新互聯(lián)
文章分享：http://vcdvsql.cn/article4/jjoie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站策劃、軟件開(kāi)發(fā)、ChatGPT、商城網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)