成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

MasonEast / 690人閱讀

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

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



舊的瀏覽器會(huì)看到兩個(gè)不支持的標(biāo)簽和評(píng)論;只有新的瀏覽器會(huì)看到JS代碼。


為了支持這種奇怪的黑客攻擊，瀏覽器中的JavaScript引擎對(duì)待這些字符也表示單行注釋。奇怪的是，而在HTML中 - >之前的字符是注釋?zhuān)贘S中， - >之后的其余部分是注釋。


只有當(dāng)它出現(xiàn)在一行的開(kāi)頭時(shí)，此箭頭才表示注釋。


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



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


當(dāng)然也有小于或等于運(yùn)算符，<=。也許你可以在你的JS代碼中找到更多箭頭。

函數(shù)表達(dá)式無(wú)處不在

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


例如，假設(shè)你試圖告訴瀏覽器當(dāng)用戶(hù)點(diǎn)擊一個(gè)特定的按鈕時(shí)該做什么。你開(kāi)始輸入：


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



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


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



像這樣編寫(xiě)代碼現(xiàn)在對(duì)我們來(lái)說(shuō)很自然。所以很奇怪，在JavaScript推廣這種編程之前，許多語(yǔ)言都沒(méi)有這個(gè)功能。當(dāng)然，Lisp在1958年有函數(shù)表達(dá)式，也稱(chēng)為lambda函數(shù)。但是C ++，Python，C＃和Java都存在多年，沒(méi)有它們。

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

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


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

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



當(dāng)你只需要一個(gè)帶有一個(gè)參數(shù)的簡(jiǎn)單函數(shù)時(shí)，新的箭頭函數(shù)語(yǔ)法就是_Identifier => Expression_。你可以跳過(guò)鍵入function并返回，以及一些括號(hào)，大括號(hào)和分號(hào)。


要用多個(gè)參數(shù)（或者沒(méi)有參數(shù)，或者其他參數(shù)或者默認(rèn)值，或者一個(gè)解構(gòu)參數(shù) ）來(lái)編寫(xiě)一個(gè)函數(shù)，你需要在參數(shù)列表中添加括號(hào)。


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

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



我覺(jué)得它看起來(lái)不錯(cuò)。


那么沒(méi)有如此功能的設(shè)置呢？箭頭函數(shù)可以包含一個(gè)語(yǔ)句塊，而不僅僅是一個(gè)表達(dá)式?；叵胍幌挛覀冎暗睦樱?/p>

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



以下是ES6的寫(xiě)法：


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



請(qǐng)注意，具有塊體的箭頭函數(shù)不會(huì)自動(dòng)返回值。為此使用返回語(yǔ)句。


使用箭頭函數(shù)創(chuàng)建簡(jiǎn)單對(duì)象時(shí)有一個(gè)警告。所以需要始終用圓括號(hào)包裝對(duì)象：


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



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


更令人困惑的是，像{key：value}這樣的對(duì)象文字看起來(lái)就像一個(gè)包含標(biāo)簽語(yǔ)句的塊 - 至少，這就是它對(duì)JavaScript引擎的外觀。幸運(yùn)的是 "{ " 是唯一不明確的字符，所以用圓括號(hào)包裝對(duì)象文字是你需要記住的唯一技巧。

關(guān)于this

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


在我們?cè)噲D找出實(shí)際意義之前，讓我們稍微回顧一下。


讓我們看看下面這個(gè)例子：


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



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


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



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


ES6還提供了一種在對(duì)象文字中編寫(xiě)方法的更簡(jiǎn)便方法！所以上面的代碼可以進(jìn)一步簡(jiǎn)化：


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



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

            
                     
             
               

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

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94989.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    ES6 箭頭函數(shù) 從了解到深入
    
                                                     
    摘要：有傳聞?wù)f，箭頭函數(shù)的語(yǔ)法，是受到了的影響，并且它與中的語(yǔ)法一樣，共享上下文。箭頭函數(shù)是新增加的一個(gè)特性。箭頭函數(shù)沒(méi)有自己的值，其值是通過(guò)繼承其它傳入對(duì)象而獲得的通常來(lái)說(shuō)是上一級(jí)外部函數(shù)的的指向。

箭頭函數(shù)
1. 簡(jiǎn)單的定義：
胖箭頭函數(shù) Fat arrow functions，又稱(chēng)箭頭函數(shù)，是一個(gè)來(lái)自ECMAScript 2015（又稱(chēng)ES6）的全新特性。有傳聞?wù)f，箭頭函數(shù)的語(yǔ)法=>，...
    
                                                   
                          
    
                                
    
                                    Eminjannn
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    es6箭頭函數(shù)深入學(xué)習(xí)1
    
                                                     
    摘要：基本用法允許使用箭頭定義函數(shù)。不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用命令，否則會(huì)拋出一個(gè)錯(cuò)誤。箭頭函數(shù)綁定，很大程度上解決了這個(gè)困擾。函數(shù)綁定箭頭函數(shù)可以綁定對(duì)象，大大減少了顯式綁定對(duì)象的寫(xiě)法。

基本用法ES6允許使用箭頭（=>）定義函數(shù)。
var f = v => v;上面的箭頭函數(shù)等同于：
var f = function(v) {  return v;};如果箭頭函數(shù)不需要參數(shù)...
    
                                                   
                          
    
                                
    
                                    娣辯孩
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    《深入理解ES6》筆記——函數(shù)（3）
    
                                                     
    摘要：錯(cuò)誤的寫(xiě)法錯(cuò)誤的寫(xiě)法中的構(gòu)造函數(shù)新增了支持默認(rèn)參數(shù)和不定參數(shù)。箭頭函數(shù)的簡(jiǎn)單理解箭頭函數(shù)的左邊表示輸入的參數(shù)，右邊表示輸出的結(jié)果。但是有了尾調(diào)用優(yōu)化之后，遞歸函數(shù)的性能有了提升。

作為前端切圖仔，越發(fā)覺(jué)得自己離不開(kāi)函數(shù)了。
說(shuō)到JavaScript函數(shù)，腦子里都是匿名函數(shù)、普通函數(shù)、閉包函數(shù)、構(gòu)造函數(shù)......然后還能說(shuō)出一大堆函數(shù)的概念。如果你達(dá)到這個(gè)水平，那么函數(shù)對(duì)你來(lái)說(shuō)沒(méi)有難度...
    
                                                   
                          
    
                                
    
                                    DoINsiSt
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    ES6 - 箭頭函數(shù)、箭頭函數(shù)與普通函數(shù)的區(qū)別總結(jié)
    
                                                     
    摘要：但是因?yàn)榧^函數(shù)沒(méi)有自己的，它的其實(shí)是繼承了外層執(zhí)行環(huán)境中的，且指向永遠(yuǎn)不會(huì)隨在哪里調(diào)用被誰(shuí)調(diào)用而改變，所以箭頭函數(shù)不能作為構(gòu)造函數(shù)使用，或者說(shuō)構(gòu)造函數(shù)不能定義成箭頭函數(shù)，否則用調(diào)用時(shí)會(huì)報(bào)錯(cuò)報(bào)錯(cuò)箭頭函數(shù)沒(méi)有自己的箭頭函數(shù)沒(méi)有自己的對(duì)象。

這篇文章我們來(lái)了解一下ES6中的箭頭函數(shù)。首先會(huì)介紹一下箭頭函數(shù)的基本語(yǔ)法，因?yàn)榛菊Z(yǔ)法比較好理解，我們用示例做簡(jiǎn)單介紹即可。之后，我們重點(diǎn)來(lái)討論一下...
    
                                                   
                          
    
                                
    
                                    scola666
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<