<script language="javascript">
<!--
  document.bgColor = "brown"; // red
// -->
</script>
 
<script language="javascript">
<!--
  document.bgColor = "brown"; // red
// -->
</script>

古老的瀏覽器將看到兩個不被支持的標(biāo)簽和一段注釋，只有支持 JavaScript 的新瀏覽器才會將其解析為 JavaScript 代碼。

為了支持這個古怪的特性，瀏覽器的 JavaScript 引擎把 <!-- 作為一個單行注釋的開始，這不是開玩笑的，這一直都是這門語言的一部分，并且至今還能用，不僅僅在 <script> 標(biāo)簽內(nèi)的首行，而是在 JavaScript 代碼的任何部位都可用，它甚至還能在 Node 中使用。

湊巧的是，這種風(fēng)格的注釋在 ES6 中首次被標(biāo)準(zhǔn)化。但這并不是我們將談?wù)摰募^。

--> 也表示一個單行注釋，與 HTML 不同的是，在 HTML 中，--> 之前的部分是注釋內(nèi)容，而在 JavaScript 中，在 --> 之后的行才是注釋。

只有當(dāng) --> 出現(xiàn)在一行的開始時(shí)，才表示該箭頭是一個注釋，因?yàn)樵谄渌闆r下，--> 是一個操作符（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)然還有一個箭頭，那就是小于等于操作符 <=，也許你還可以找到使用箭頭的地方，但我們還是停下來，看一個我們從沒見過的箭頭：

<!-- 單行注釋
--> goes to 操作符
<= 小于等于操作符
=> ???

那么，=> 表示什么呢？這就是本文將討論的話題。

首先，我們來談?wù)労瘮?shù)。
無處不在的函數(shù)表達(dá)式

JavaScript 一個有趣的特點(diǎn)是，任何時(shí)候你需要一個函數(shù)，你可以很方便地創(chuàng)建它們。

例如，為一個按鈕綁定點(diǎn)擊事件：

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

jQuery 的 .click() 方法需要一個函數(shù)作為參數(shù)，我們可以很方便地就地創(chuàng)建一個函數(shù)：

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

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

現(xiàn)在對我們來說，編寫這樣的代碼是最自然的事了。但是在 JavaScript 流行起來之前，這種風(fēng)格的代碼看起來還是有些奇怪，因?yàn)樵谄渌Z言中都沒有這樣的特性。在 1958 年，Lisp 就有了函數(shù)表達(dá)式，也叫 lambda 函數(shù)，而在存在多年的 C++、Python、C# 和 Java 中沒有該特性。

現(xiàn)在，這四門語言都有了 lambda 表達(dá)式，而且新出現(xiàn)的語言都普遍內(nèi)置了 lambda 表達(dá)式。如今 JavaScript 也支持該特性了，這必須感謝那些重度依賴 lambda 表達(dá)式的庫的開發(fā)者，這推動了該特性被廣泛采納。

與其他幾門語言相比，JavaScript 的語法略顯冗長：

// A very simple function in six languages.
function (a) { return a > 0; } // JS
[](int a) { return a > 0; } // C++
(lambda (a) (> a 0)) ;; Lisp
lambda a: a > 0 # Python
a => 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)) ;; Lisp
lambda a: a > 0 # Python
a => a > 0 // C#
a -> a > 0 // Java

箭頭函數(shù)

ES6 引入了一種新的語法來編寫函數(shù)：

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

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

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

當(dāng)你需要只有一個參數(shù)的函數(shù)，箭頭函數(shù)的語法可以簡化為 Identifier => Expression，直接省略了 function 和 return 關(guān)鍵字，連括號和結(jié)尾的分號也同時(shí)省略了。

編寫一個有多個（或沒有參數(shù)，或 Rest 參數(shù)和參數(shù)默認(rèn)值，或解構(gòu)參數(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);
 
// ES5
var total = values.reduce(function (a, b) {
 return a + b;
}, 0);
 
// ES6
var total = values.reduce((a, b) => a + b, 0);

箭頭函數(shù)還可以與一些工具函數(shù)庫完美地配合使用，比如 Underscore.js 和 Immutable，事實(shí)上，Immutable 文檔中的例子全部都是使用 ES6 編寫，其中有很多已經(jīng)使用到了箭頭函數(shù)。

函數(shù)體除了使用一個表達(dá)式外，箭頭函數(shù)還可以包含一個語句塊，回憶之前我們提到過的例子：

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

下面是采用箭頭函數(shù)的寫法：

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

需要注意的是，使用語句塊的箭頭函數(shù)不會自動返回一個值，必須顯式地使用 return 來返回一個值。

還有一個忠告，當(dāng)使用箭頭函數(shù)來返回一個對象時(shí)，始終使用括號將返回的對象括起來：

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

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

因?yàn)榭諏ο?{} 與空語句塊 {} 看上去一模一樣，ES6 將始終把緊跟在 => 后面的 { 當(dāng)作語句塊的開始，而不是一個對象的開始，那么 puppy => {} 就被解析為一個沒有函數(shù)體的箭頭函數(shù)，而且返回值為 undefined。

您可能感興趣的文章: