• <sub id="h4knl"><ol id="h4knl"></ol></sub>
    <sup id="h4knl"></sup>
      <sub id="h4knl"></sub>
      

      <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
      • 
<strong id="h4knl"></strong>
      1. 



        
    
        
        
        
        
    
        

        

        
    
        
        
        
            
            
        深入理解JavaScript中的箭頭函數(shù)
        
            
        
                時(shí)間：2024-05-20 23:49:43 
                
                JavaScript
                我要投稿
            
        
            
            
        
                
        
                    
          
                        
                        
        • 相關(guān)推薦
          • 
                    
        
                
        
                
        關(guān)于深入理解JavaScript中的箭頭函數(shù)
        
                
        　　從一開(kāi)始箭頭就是 JavaScript 的一部分，在第一個(gè) JavaScript 中就建議將內(nèi)聯(lián)的腳本代碼包裹在 HTML 的注釋中，這可以防止那些不支持 JavaScript 的瀏覽器錯(cuò)誤滴將你的代碼顯示為明文。你也許寫(xiě)過(guò)下面這樣的代碼：
        　　古老的瀏覽器將看到兩個(gè)不被支持的標(biāo)簽和一段注釋，只有支持 JavaScript 的新瀏覽器才會(huì)將其解析為 JavaScript 代碼。
        　　為了支持這個(gè)古怪的特性，瀏覽器的 JavaScript 引擎把  也表示一個(gè)單行注釋，與 HTML 不同的是，在 HTML 中，--> 之前的部分是注釋內(nèi)容，而在 JavaScript 中，在 --> 之后的行才是注釋。
        　　只有當(dāng) --> 出現(xiàn)在一行的開(kāi)始時(shí)，才表示該箭頭是一個(gè)注釋，因?yàn)樵谄渌闆r下，--> 是一個(gè)操作符（goes to）。
        　　function countdown(n) { while (n-->0) // "n goes to zero" alert(n); blastoff();} function countdown(n) { while (n-->0) // "n goes to zero" alert(n); blastoff();}
        　　上面代碼是真實(shí)能運(yùn)行的。循環(huán)運(yùn)行直到 n 為 0，這并不是 ES6 的新特性，但結(jié)合我們熟悉的特性，這具有很強(qiáng)的誤導(dǎo)性。你能搞明白上面代碼的運(yùn)行情況嗎？你可以在 Stack Overflow 上找到相應(yīng)的解答。
        　　當(dāng)然還有一個(gè)箭頭，那就是小于等于操作符 <=，也許你還可以找到使用箭頭的地方，但我們還是停下來(lái)，看一個(gè)我們從沒(méi)見(jiàn)過(guò)的箭頭：
        　　 goes to 操作符 <=> ???
        　　那么，=> 表示什么呢？這就是本文將討論的話題。
        　　首先，我們來(lái)談?wù)労瘮?shù)。
        　　無(wú)處不在的函數(shù)表達(dá)式
        　　JavaScript 一個(gè)有趣的特點(diǎn)是，任何時(shí)候你需要一個(gè)函數(shù)，你可以很方便地創(chuàng)建它們。
        　　例如，為一個(gè)按鈕綁定點(diǎn)擊事件：
        　　$("#confetti-btn").click( $("#confetti-btn").click(
        　　jQuery 的 .click() 方法需要一個(gè)函數(shù)作為參數(shù)，我們可以很方便地就地創(chuàng)建一個(gè)函數(shù)：
        　　$("#confetti-btn").click(function (event) { playTrumpet(); fireConfettiCannon();}); $("#confetti-btn").click(function (event) { playTrumpet(); fireConfettiCannon();});
        　　現(xiàn)在對(duì)我們來(lái)說(shuō)，編寫(xiě)這樣的代碼是最自然的事了。但是在 JavaScript 流行起來(lái)之前，這種風(fēng)格的代碼看起來(lái)還是有些奇怪，因?yàn)樵谄渌Z(yǔ)言中都沒(méi)有這樣的特性。在 1958 年，Lisp 就有了函數(shù)表達(dá)式，也叫 lambda 函數(shù)，而在存在多年的 C++、Python、C# 和 Java 中沒(méi)有該特性。
        　　現(xiàn)在，這四門(mén)語(yǔ)言都有了 lambda 表達(dá)式，而且新出現(xiàn)的語(yǔ)言都普遍內(nèi)置了 lambda 表達(dá)式。如今 JavaScript 也支持該特性了，這必須感謝那些重度依賴 lambda 表達(dá)式的庫(kù)的開(kāi)發(fā)者，這推動(dòng)了該特性被廣泛采納。
        　　與其他幾門(mén)語(yǔ)言相比，JavaScript 的語(yǔ)法略顯冗長(zhǎng)：
        　　// A very simple function in six languages.function (a) { return a > 0; } // JS[](int a) { return a > 0; } // C++(lambda (a) (> a 0)) ;; Lisplambda a: a > 0 # Pythona => a > 0 // C#a -> a > 0 // Java // A very simple function in six languages.function (a) { return a > 0; } // JS[](int a) { return a > 0; } // C++(lambda (a) (> a 0)) ;; Lisplambda a: a > 0 # Pythona => a > 0 // C#a -> a > 0 // Java
        　　箭頭函數(shù)
        　　ES6 引入了一種新的語(yǔ)法來(lái)編寫(xiě)函數(shù)：
        　　// ES5var selected = allJobs.filter(function (job) { return job.isSelected();});// ES6var selected = allJobs.filter(job => job.isSelected()); // ES5var selected = allJobs.filter(function (job) { return job.isSelected();}); // ES6var selected = allJobs.filter(job => job.isSelected());
        　　當(dāng)你需要只有一個(gè)參數(shù)的函數(shù)，箭頭函數(shù)的語(yǔ)法可以簡(jiǎn)化為 Identifier => Expression，直接省略了 function 和 return 關(guān)鍵字，連括號(hào)和結(jié)尾的分號(hào)也同時(shí)省略了。
        　　編寫(xiě)一個(gè)有多個(gè)（或沒(méi)有參數(shù)，或 Rest 參數(shù)和參數(shù)默認(rèn)值，或解構(gòu)參數(shù)）參數(shù)的函數(shù)，你需要用括號(hào)將參數(shù)括起來(lái)：
        　　// ES5var total = values.reduce(function (a, b) { return a + b;}, 0);// ES6var total = values.reduce((a, b) => a + b, 0); // ES5var total = values.reduce(function (a, b) { return a + b;}, 0); // ES6var total = values.reduce((a, b) => a + b, 0);
        　　箭頭函數(shù)還可以與一些工具函數(shù)庫(kù)完美地配合使用，比如 Underscore.js 和 Immutable，事實(shí)上，Immutable 文檔中的例子全部都是使用 ES6 編寫(xiě)，其中有很多已經(jīng)使用到了箭頭函數(shù)。
        　　函數(shù)體除了使用一個(gè)表達(dá)式外，箭頭函數(shù)還可以包含一個(gè)語(yǔ)句塊，回憶之前我們提到過(guò)的例子：
        　　// ES5$("#confetti-btn").click(function (event) { playTrumpet(); fireConfettiCannon();}); // ES5$("#confetti-btn").click(function (event) { playTrumpet(); fireConfettiCannon();});
        　　下面是采用箭頭函數(shù)的寫(xiě)法：
        　　// ES6$("#confetti-btn").click(event => { playTrumpet(); fireConfettiCannon();}); // ES6$("#confetti-btn").click(event => { playTrumpet(); fireConfettiCannon();});
        　　需要注意的是，使用語(yǔ)句塊的箭頭函數(shù)不會(huì)自動(dòng)返回一個(gè)值，必須顯式地使用 return 來(lái)返回一個(gè)值。
        　　還有一個(gè)忠告，當(dāng)使用箭頭函數(shù)來(lái)返回一個(gè)對(duì)象時(shí)，始終使用括號(hào)將返回的對(duì)象括起來(lái)：
        　　// create a new empty object for each puppy to play withvar chewToys = puppies.map(puppy => {}); // BUG!var chewToys = puppies.map(puppy => ({})); // ok // create a new empty object for each puppy to play withvar chewToys = puppies.map(puppy => {}); // BUG!var chewToys = puppies.map(puppy => ({})); // ok
        　　因?yàn)榭諏?duì)象 {} 與空語(yǔ)句塊 {} 看上去一模一樣，ES6 將始終把緊跟在 => 后面的 { 當(dāng)作語(yǔ)句塊的開(kāi)始，而不是一個(gè)對(duì)象的開(kāi)始，那么 puppy => {} 就被解析為一個(gè)沒(méi)有函數(shù)體的箭頭函數(shù)，而且返回值為 undefined。
        

        
    
        
    
        
        
        《&.doc》
        
        
        将本文的Word文档下载到电脑，方便收藏和打印
        
        
        
            推荐度：





        
        
    
        
    
        
        
        
        
            
        点击下载文档
        
        
        
    
        
        


        

        搜索文档
        【深入理解JavaScript中的箭頭函數(shù)】相關(guān)文章：
        有關(guān)深入理解JavaScript中的并行處理的介紹10-14
        JavaScript中push(),join() 函數(shù)實(shí)例詳解09-05
        對(duì)javascript的理解08-08
        javascript面向?qū)ο笾械膶?duì)象怎么理解09-02
        淺談javascript中的單線程理解08-16
        淺析jQuery 遍歷函數(shù)javascript08-06
        淺談如何深入學(xué)習(xí)Javascript中的this關(guān)鍵字08-19
        Javascript函數(shù)的定義和用法分析08-15
        理解JavaScript原型鏈教程09-02
        最常用的20個(gè)javascript方法函數(shù)09-10
        
            
        在线咨询
            
        打印
            
        立即下载
             
        复制全文
        
            
        
        
        
    
        
    
        
        
    
        

        

        




国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码

        3. <sub id="h4knl"><ol id="h4knl"></ol></sub>
        <sup id="h4knl"></sup>
          <sub id="h4knl"></sub>
          

          <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
          • 
<strong id="h4knl"></strong>
          1. 
日日狠狠久久偷偷色综合老牛
|
中国精品国产yw在线观看
|
天天免費国产在线观看
|
日本中文字幕乱码视频在线
|
亚洲欧美日韩动漫一区
|
欧美精品在线观看
|




            
                
            
                    
                
            
                
            關(guān)于深入理解JavaScript中的箭頭函數(shù)
            
                
            　　從一開(kāi)始箭頭就是 JavaScript 的一部分，在第一個(gè) JavaScript 中就建議將內(nèi)聯(lián)的腳本代碼包裹在 HTML 的注釋中，這可以防止那些不支持 JavaScript 的瀏覽器錯(cuò)誤滴將你的代碼顯示為明文。你也許寫(xiě)過(guò)下面這樣的代碼：
            　　古老的瀏覽器將看到兩個(gè)不被支持的標(biāo)簽和一段注釋，只有支持 JavaScript 的新瀏覽器才會(huì)將其解析為 JavaScript 代碼。
            　　為了支持這個(gè)古怪的特性，瀏覽器的 JavaScript 引擎把  也表示一個(gè)單行注釋，與 HTML 不同的是，在 HTML 中，--> 之前的部分是注釋內(nèi)容，而在 JavaScript 中，在 --> 之后的行才是注釋。
            　　只有當(dāng) --> 出現(xiàn)在一行的開(kāi)始時(shí)，才表示該箭頭是一個(gè)注釋，因?yàn)樵谄渌闆r下，--> 是一個(gè)操作符（goes to）。
            　　function countdown(n) { while (n-->0) // "n goes to zero" alert(n); blastoff();} function countdown(n) { while (n-->0) // "n goes to zero" alert(n); blastoff();}
            　　上面代碼是真實(shí)能運(yùn)行的。循環(huán)運(yùn)行直到 n 為 0，這并不是 ES6 的新特性，但結(jié)合我們熟悉的特性，這具有很強(qiáng)的誤導(dǎo)性。你能搞明白上面代碼的運(yùn)行情況嗎？你可以在 Stack Overflow 上找到相應(yīng)的解答。
            　　當(dāng)然還有一個(gè)箭頭，那就是小于等于操作符 <=，也許你還可以找到使用箭頭的地方，但我們還是停下來(lái)，看一個(gè)我們從沒(méi)見(jiàn)過(guò)的箭頭：
            　　 goes to 操作符 <=> ???
            　　那么，=> 表示什么呢？這就是本文將討論的話題。
            　　首先，我們來(lái)談?wù)労瘮?shù)。
            　　無(wú)處不在的函數(shù)表達(dá)式
            　　JavaScript 一個(gè)有趣的特點(diǎn)是，任何時(shí)候你需要一個(gè)函數(shù)，你可以很方便地創(chuàng)建它們。
            　　例如，為一個(gè)按鈕綁定點(diǎn)擊事件：
            　　$("#confetti-btn").click( $("#confetti-btn").click(
            　　jQuery 的 .click() 方法需要一個(gè)函數(shù)作為參數(shù)，我們可以很方便地就地創(chuàng)建一個(gè)函數(shù)：
            　　$("#confetti-btn").click(function (event) { playTrumpet(); fireConfettiCannon();}); $("#confetti-btn").click(function (event) { playTrumpet(); fireConfettiCannon();});
            　　現(xiàn)在對(duì)我們來(lái)說(shuō)，編寫(xiě)這樣的代碼是最自然的事了。但是在 JavaScript 流行起來(lái)之前，這種風(fēng)格的代碼看起來(lái)還是有些奇怪，因?yàn)樵谄渌Z(yǔ)言中都沒(méi)有這樣的特性。在 1958 年，Lisp 就有了函數(shù)表達(dá)式，也叫 lambda 函數(shù)，而在存在多年的 C++、Python、C# 和 Java 中沒(méi)有該特性。
            　　現(xiàn)在，這四門(mén)語(yǔ)言都有了 lambda 表達(dá)式，而且新出現(xiàn)的語(yǔ)言都普遍內(nèi)置了 lambda 表達(dá)式。如今 JavaScript 也支持該特性了，這必須感謝那些重度依賴 lambda 表達(dá)式的庫(kù)的開(kāi)發(fā)者，這推動(dòng)了該特性被廣泛采納。
            　　與其他幾門(mén)語(yǔ)言相比，JavaScript 的語(yǔ)法略顯冗長(zhǎng)：
            　　// A very simple function in six languages.function (a) { return a > 0; } // JS[](int a) { return a > 0; } // C++(lambda (a) (> a 0)) ;; Lisplambda a: a > 0 # Pythona => a > 0 // C#a -> a > 0 // Java // A very simple function in six languages.function (a) { return a > 0; } // JS[](int a) { return a > 0; } // C++(lambda (a) (> a 0)) ;; Lisplambda a: a > 0 # Pythona => a > 0 // C#a -> a > 0 // Java
            　　箭頭函數(shù)
            　　ES6 引入了一種新的語(yǔ)法來(lái)編寫(xiě)函數(shù)：
            　　// ES5var selected = allJobs.filter(function (job) { return job.isSelected();});// ES6var selected = allJobs.filter(job => job.isSelected()); // ES5var selected = allJobs.filter(function (job) { return job.isSelected();}); // ES6var selected = allJobs.filter(job => job.isSelected());
            　　當(dāng)你需要只有一個(gè)參數(shù)的函數(shù)，箭頭函數(shù)的語(yǔ)法可以簡(jiǎn)化為 Identifier => Expression，直接省略了 function 和 return 關(guān)鍵字，連括號(hào)和結(jié)尾的分號(hào)也同時(shí)省略了。
            　　編寫(xiě)一個(gè)有多個(gè)（或沒(méi)有參數(shù)，或 Rest 參數(shù)和參數(shù)默認(rèn)值，或解構(gòu)參數(shù)）參數(shù)的函數(shù)，你需要用括號(hào)將參數(shù)括起來(lái)：
            　　// ES5var total = values.reduce(function (a, b) { return a + b;}, 0);// ES6var total = values.reduce((a, b) => a + b, 0); // ES5var total = values.reduce(function (a, b) { return a + b;}, 0); // ES6var total = values.reduce((a, b) => a + b, 0);
            　　箭頭函數(shù)還可以與一些工具函數(shù)庫(kù)完美地配合使用，比如 Underscore.js 和 Immutable，事實(shí)上，Immutable 文檔中的例子全部都是使用 ES6 編寫(xiě)，其中有很多已經(jīng)使用到了箭頭函數(shù)。
            　　函數(shù)體除了使用一個(gè)表達(dá)式外，箭頭函數(shù)還可以包含一個(gè)語(yǔ)句塊，回憶之前我們提到過(guò)的例子：
            　　// ES5$("#confetti-btn").click(function (event) { playTrumpet(); fireConfettiCannon();}); // ES5$("#confetti-btn").click(function (event) { playTrumpet(); fireConfettiCannon();});
            　　下面是采用箭頭函數(shù)的寫(xiě)法：
            　　// ES6$("#confetti-btn").click(event => { playTrumpet(); fireConfettiCannon();}); // ES6$("#confetti-btn").click(event => { playTrumpet(); fireConfettiCannon();});
            　　需要注意的是，使用語(yǔ)句塊的箭頭函數(shù)不會(huì)自動(dòng)返回一個(gè)值，必須顯式地使用 return 來(lái)返回一個(gè)值。
            　　還有一個(gè)忠告，當(dāng)使用箭頭函數(shù)來(lái)返回一個(gè)對(duì)象時(shí)，始終使用括號(hào)將返回的對(duì)象括起來(lái)：
            　　// create a new empty object for each puppy to play withvar chewToys = puppies.map(puppy => {}); // BUG!var chewToys = puppies.map(puppy => ({})); // ok // create a new empty object for each puppy to play withvar chewToys = puppies.map(puppy => {}); // BUG!var chewToys = puppies.map(puppy => ({})); // ok
            　　因?yàn)榭諏?duì)象 {} 與空語(yǔ)句塊 {} 看上去一模一樣，ES6 將始終把緊跟在 => 后面的 { 當(dāng)作語(yǔ)句塊的開(kāi)始，而不是一個(gè)對(duì)象的開(kāi)始，那么 puppy => {} 就被解析為一個(gè)沒(méi)有函數(shù)體的箭頭函數(shù)，而且返回值為 undefined。