深入ES6：箭頭函數(shù)

MasonEast 發(fā)布于2019-08-22 17:14 / 640人閱讀

摘要：令人震驚的箭頭函數(shù)引入了寫入函數(shù)的新語法。使用箭頭函數(shù)創(chuàng)建簡單對象時有一個警告。代碼因此被默默地解釋為一個不執(zhí)行任何操作并返回未定義的箭頭函數(shù)。內(nèi)部函數(shù)是一個箭頭函數(shù)，所以它從封閉范圍繼承此函數(shù)。

箭頭從一開始就一直是JavaScript的一部分。第一個JavaScript教程建議在HTML注釋中包裝內(nèi)聯(lián)腳本。這會阻止不支持JS的瀏覽器錯誤地將JS代碼顯示為文本。你會寫這樣的東西：

舊的瀏覽器會看到兩個不支持的標簽和評論;只有新的瀏覽器會看到JS代碼。

為了支持這種奇怪的黑客攻擊，瀏覽器中的JavaScript引擎對待這些字符也表示單行注釋。奇怪的是，而在HTML中 - >之前的字符是注釋，在JS中， - >之后的其余部分是注釋。

只有當它出現(xiàn)在一行的開頭時，此箭頭才表示注釋。

function countdown(n) {
  while (n --> 0)  // "n goes to zero"
    alert(n);
  blastoff();
}

循環(huán)運行直到n變?yōu)?.這也不是ES6中的一項新功能，而是熟悉的功能的組合。你能弄清楚這里發(fā)生了什么嗎？像往常一樣，這個難題的答案可以在StackOverflow中找到.。

當然也有小于或等于運算符，<=。也許你可以在你的JS代碼中找到更多箭頭。

函數(shù)表達式無處不在

JavaScript的一個有趣功能是，只要您需要某個功能，您就可以在運行代碼的中間直接鍵入該功能。

例如，假設你試圖告訴瀏覽器當用戶點擊一個特定的按鈕時該做什么。你開始輸入：

$("#confetti-btn").click()

jQuery的.click（）方法有一個參數(shù)：function。沒問題。你可以在這里輸入一個函數(shù)：

$("#confetti-btn").click(function (event) {
  playTrumpet();
  fireConfettiCannon();
});

像這樣編寫代碼現(xiàn)在對我們來說很自然。所以很奇怪，在JavaScript推廣這種編程之前，許多語言都沒有這個功能。當然，Lisp在1958年有函數(shù)表達式，也稱為lambda函數(shù)。但是C ++，Python，C＃和Java都存在多年，沒有它們。

令人震驚的箭頭函數(shù)

ES6引入了寫入函數(shù)的新語法。

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

// ES6
var selected = allJobs.filter(job => job.isSelected());

當你只需要一個帶有一個參數(shù)的簡單函數(shù)時，新的箭頭函數(shù)語法就是_Identifier => Expression_。你可以跳過鍵入function并返回，以及一些括號，大括號和分號。

要用多個參數(shù)（或者沒有參數(shù)，或者其他參數(shù)或者默認值，或者一個解構參數(shù) ）來編寫一個函數(shù)，你需要在參數(shù)列表中添加括號。

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

// ES6
var total = values.reduce((a, b) => a + b, 0);

我覺得它看起來不錯。

那么沒有如此功能的設置呢？箭頭函數(shù)可以包含一個語句塊，而不僅僅是一個表達式。回想一下我們之前的例子：

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

以下是ES6的寫法：

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

請注意，具有塊體的箭頭函數(shù)不會自動返回值。為此使用返回語句。

使用箭頭函數(shù)創(chuàng)建簡單對象時有一個警告。所以需要始終用圓括號包裝對象：

// create a new empty object for each puppy to play with
var chewToys = puppies.map(puppy => {});   // BUG!
var chewToys = puppies.map(puppy => ({})); // ok

不幸的是，空對象{}和空塊{}看起來完全一樣。 ES6中的規(guī)則是{緊跟在箭頭后面總是被視為塊的開始，而不是對象的開始。代碼_puppy => {}_因此被默默地解釋為一個不執(zhí)行任何操作并返回未定義的箭頭函數(shù)。

更令人困惑的是，像{key：value}這樣的對象文字看起來就像一個包含標簽語句的塊 - 至少，這就是它對JavaScript引擎的外觀。幸運的是 "{ " 是唯一不明確的字符，所以用圓括號包裝對象文字是你需要記住的唯一技巧。

關于this

普通函數(shù)函數(shù)和箭頭函數(shù)之間的行為有一個細微的差別：箭頭函數(shù)內(nèi)部的this是詞法作用域，由上下文確定

在我們試圖找出實際意義之前，讓我們稍微回顧一下。

讓我們看看下面這個例子：

{
  ...
  addAll: function addAll(pieces) {
    var self = this; // 如果不使用,this指向window或undefined
    _.each(pieces, function (piece) {
      self.add(piece);
    });
  },
  ...
}

在這里，你想在內(nèi)部函數(shù)中使用this.add（piece）。所以，臨時變量self用于將"this"外部值偷運到內(nèi)部函數(shù)中。（另一種方法是在內(nèi)部函數(shù)中使用.bind（this），這兩種方法都不是特別漂亮。）

// ES6
{
  ...
  addAll: function addAll(pieces) {
    _.each(pieces, piece => this.add(piece));
  },
  ...
}

在ES6版本中，請注意addAll方法從其調(diào)用者接收到此信息。內(nèi)部函數(shù)是一個箭頭函數(shù)，所以它從封閉范圍繼承此函數(shù)。

ES6還提供了一種在對象文字中編寫方法的更簡便方法！所以上面的代碼可以進一步簡化：

// ES6 with method syntax
{
  ...
  addAll(pieces) {
    _.each(pieces, piece => this.add(piece));
  },
  ...
}

在方法和箭頭之間，我可能再也不會輸入“function”了。

GPU云服務器云服務器箭頭函數(shù) ES6 es6-系列 ES6入門

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94989.html

ES6 箭頭函數(shù) 從了解到深入

摘要：有傳聞說，箭頭函數(shù)的語法，是受到了的影響，并且它與中的語法一樣，共享上下文。箭頭函數(shù)是新增加的一個特性。箭頭函數(shù)沒有自己的值，其值是通過繼承其它傳入對象而獲得的通常來說是上一級外部函數(shù)的的指向。箭頭函數(shù) 1. 簡單的定義：胖箭頭函數(shù) Fat arrow functions，又稱箭頭函數(shù)，是一個來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞說，箭頭函數(shù)的語法=>，...

Eminjannn 2019-08-20 16:37 評論0 收藏0
es6箭頭函數(shù)深入學習1

摘要：基本用法允許使用箭頭定義函數(shù)。不可以當作構造函數(shù)，也就是說，不可以使用命令，否則會拋出一個錯誤。箭頭函數(shù)綁定，很大程度上解決了這個困擾。函數(shù)綁定箭頭函數(shù)可以綁定對象，大大減少了顯式綁定對象的寫法。基本用法ES6允許使用箭頭（=>）定義函數(shù)。 var f = v => v;上面的箭頭函數(shù)等同于： var f = function(v) { return v;};如果箭頭函數(shù)不需要參數(shù)...

娣辯孩 2019-08-23 14:21 評論0 收藏0
《深入理解ES6》筆記——函數(shù)（3）

摘要：錯誤的寫法錯誤的寫法中的構造函數(shù)新增了支持默認參數(shù)和不定參數(shù)。箭頭函數(shù)的簡單理解箭頭函數(shù)的左邊表示輸入的參數(shù)，右邊表示輸出的結果。但是有了尾調(diào)用優(yōu)化之后，遞歸函數(shù)的性能有了提升。作為前端切圖仔，越發(fā)覺得自己離不開函數(shù)了。說到JavaScript函數(shù)，腦子里都是匿名函數(shù)、普通函數(shù)、閉包函數(shù)、構造函數(shù)......然后還能說出一大堆函數(shù)的概念。如果你達到這個水平，那么函數(shù)對你來說沒有難度...

DoINsiSt 2019-08-20 18:04 評論0 收藏0
ES6 - 箭頭函數(shù)、箭頭函數(shù)與普通函數(shù)的區(qū)別總結

摘要：但是因為箭頭函數(shù)沒有自己的，它的其實是繼承了外層執(zhí)行環(huán)境中的，且指向永遠不會隨在哪里調(diào)用被誰調(diào)用而改變，所以箭頭函數(shù)不能作為構造函數(shù)使用，或者說構造函數(shù)不能定義成箭頭函數(shù)，否則用調(diào)用時會報錯報錯箭頭函數(shù)沒有自己的箭頭函數(shù)沒有自己的對象。這篇文章我們來了解一下ES6中的箭頭函數(shù)。首先會介紹一下箭頭函數(shù)的基本語法，因為基本語法比較好理解，我們用示例做簡單介紹即可。之后，我們重點來討論一下...

scola666 2019-08-23 16:32 評論0 收藏0