摘要:令人震驚的箭頭函數引入了寫入函數的新語法。使用箭頭函數創建簡單對象時有一個警告。代碼因此被默默地解釋為一個不執行任何操作并返回未定義的箭頭函數。內部函數是一個箭頭函數,所以它從封閉范圍繼承此函數。
箭頭從一開始就一直是JavaScript的一部分。第一個JavaScript教程建議在HTML注釋中包裝內聯腳本。這會阻止不支持JS的瀏覽器錯誤地將JS代碼顯示為文本。你會寫這樣的東西:
舊的瀏覽器會看到兩個不支持的標簽和評論;只有新的瀏覽器會看到JS代碼。
為了支持這種奇怪的黑客攻擊,瀏覽器中的JavaScript引擎對待這些字符也表示單行注釋。奇怪的是,而在HTML中 - >之前的字符是注釋,在JS中, - >之后的其余部分是注釋。
只有當它出現在一行的開頭時,此箭頭才表示注釋。
function countdown(n) { while (n --> 0) // "n goes to zero" alert(n); blastoff(); }
循環運行直到n變為0.這也不是ES6中的一項新功能,而是熟悉的功能的組合。你能弄清楚這里發生了什么嗎?像往常一樣,這個難題的答案可以在StackOverflow中找到.。
當然也有小于或等于運算符,<=。也許你可以在你的JS代碼中找到更多箭頭。
函數表達式無處不在JavaScript的一個有趣功能是,只要您需要某個功能,您就可以在運行代碼的中間直接鍵入該功能。
例如,假設你試圖告訴瀏覽器當用戶點擊一個特定的按鈕時該做什么。你開始輸入:
$("#confetti-btn").click()
jQuery的.click()方法有一個參數:function。沒問題。你可以在這里輸入一個函數:
$("#confetti-btn").click(function (event) { playTrumpet(); fireConfettiCannon(); });
像這樣編寫代碼現在對我們來說很自然。所以很奇怪,在JavaScript推廣這種編程之前,許多語言都沒有這個功能。當然,Lisp在1958年有函數表達式,也稱為lambda函數。但是C ++,Python,C#和Java都存在多年,沒有它們。
令人震驚的箭頭函數ES6引入了寫入函數的新語法。
// ES5 var selected = allJobs.filter(function (job) { return job.isSelected(); }); // ES6 var selected = allJobs.filter(job => job.isSelected());
當你只需要一個帶有一個參數的簡單函數時,新的箭頭函數語法就是_Identifier => Expression_。你可以跳過鍵入function并返回,以及一些括號,大括號和分號。
要用多個參數(或者沒有參數,或者其他參數或者默認值,或者一個解構參數 )來編寫一個函數,你需要在參數列表中添加括號。
// ES5 var total = values.reduce(function (a, b) { return a + b; }, 0); // ES6 var total = values.reduce((a, b) => a + b, 0);
我覺得它看起來不錯。
那么沒有如此功能的設置呢?箭頭函數可以包含一個語句塊,而不僅僅是一個表達式。回想一下我們之前的例子:
// ES5 $("#confetti-btn").click(function (event) { playTrumpet(); fireConfettiCannon(); });
以下是ES6的寫法:
// ES6 $("#confetti-btn").click(event => { playTrumpet(); fireConfettiCannon(); });
請注意,具有塊體的箭頭函數不會自動返回值。為此使用返回語句。
使用箭頭函數創建簡單對象時有一個警告。所以需要始終用圓括號包裝對象:
// create a new empty object for each puppy to play with var chewToys = puppies.map(puppy => {}); // BUG! var chewToys = puppies.map(puppy => ({})); // ok
不幸的是,空對象{}和空塊{}看起來完全一樣。 ES6中的規則是{緊跟在箭頭后面總是被視為塊的開始,而不是對象的開始。代碼_puppy => {}_因此被默默地解釋為一個不執行任何操作并返回未定義的箭頭函數。
更令人困惑的是,像{key:value}這樣的對象文字看起來就像一個包含標簽語句的塊 - 至少,這就是它對JavaScript引擎的外觀。幸運的是 "{ " 是唯一不明確的字符,所以用圓括號包裝對象文字是你需要記住的唯一技巧。
關于this普通函數函數和箭頭函數之間的行為有一個細微的差別:箭頭函數內部的this是詞法作用域,由上下文確定
在我們試圖找出實際意義之前,讓我們稍微回顧一下。
讓我們看看下面這個例子:
{ ... addAll: function addAll(pieces) { var self = this; // 如果不使用,this指向window或undefined _.each(pieces, function (piece) { self.add(piece); }); }, ... }
在這里,你想在內部函數中使用this.add(piece)。所以,臨時變量self用于將"this"外部值偷運到內部函數中。 (另一種方法是在內部函數中使用.bind(this),這兩種方法都不是特別漂亮。)
// ES6 { ... addAll: function addAll(pieces) { _.each(pieces, piece => this.add(piece)); }, ... }
在ES6版本中,請注意addAll方法從其調用者接收到此信息。內部函數是一個箭頭函數,所以它從封閉范圍繼承此函數。
ES6還提供了一種在對象文字中編寫方法的更簡便方法!所以上面的代碼可以進一步簡化:
// ES6 with method syntax { ... addAll(pieces) { _.each(pieces, piece => this.add(piece)); }, ... }
在方法和箭頭之間,我可能再也不會輸入“function”了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/94989.html
摘要:有傳聞說,箭頭函數的語法,是受到了的影響,并且它與中的語法一樣,共享上下文。箭頭函數是新增加的一個特性。箭頭函數沒有自己的值,其值是通過繼承其它傳入對象而獲得的通常來說是上一級外部函數的的指向。 箭頭函數 1. 簡單的定義: 胖箭頭函數 Fat arrow functions,又稱箭頭函數,是一個來自ECMAScript 2015(又稱ES6)的全新特性。有傳聞說,箭頭函數的語法=>,...
摘要:基本用法允許使用箭頭定義函數。不可以當作構造函數,也就是說,不可以使用命令,否則會拋出一個錯誤。箭頭函數綁定,很大程度上解決了這個困擾。函數綁定箭頭函數可以綁定對象,大大減少了顯式綁定對象的寫法。 基本用法ES6允許使用箭頭(=>)定義函數。 var f = v => v;上面的箭頭函數等同于: var f = function(v) { return v;};如果箭頭函數不需要參數...
摘要:錯誤的寫法錯誤的寫法中的構造函數新增了支持默認參數和不定參數。箭頭函數的簡單理解箭頭函數的左邊表示輸入的參數,右邊表示輸出的結果。但是有了尾調用優化之后,遞歸函數的性能有了提升。 作為前端切圖仔,越發覺得自己離不開函數了。 說到JavaScript函數,腦子里都是匿名函數、普通函數、閉包函數、構造函數......然后還能說出一大堆函數的概念。如果你達到這個水平,那么函數對你來說沒有難度...
摘要:但是因為箭頭函數沒有自己的,它的其實是繼承了外層執行環境中的,且指向永遠不會隨在哪里調用被誰調用而改變,所以箭頭函數不能作為構造函數使用,或者說構造函數不能定義成箭頭函數,否則用調用時會報錯報錯箭頭函數沒有自己的箭頭函數沒有自己的對象。 這篇文章我們來了解一下ES6中的箭頭函數。首先會介紹一下箭頭函數的基本語法,因為基本語法比較好理解,我們用示例做簡單介紹即可。之后,我們重點來討論一下...
閱讀 2048·2021-11-08 13:22
閱讀 2509·2021-09-04 16:40
閱讀 1153·2021-09-03 10:29
閱讀 1718·2019-08-30 15:44
閱讀 2125·2019-08-30 11:13
閱讀 2793·2019-08-29 17:07
閱讀 1970·2019-08-29 14:22
閱讀 1252·2019-08-26 14:00