前世今生
<!-- 单行注释
箭头从一开始就是JavaScript的一部分。第一个JavaScript教程建议用HTML注释包装内联脚本。这将防止不支持JS的浏览器将JS代码错误地显示为文本。你可以这样写:
<script language="javascript">
<!--
document.bgColor = "brown"; // red
// -->
</script>
旧的浏览器会看到两个不支持的标签和一个评论;只有新的浏览器才会看到JS代码。为了支持这种奇怪的破解方法，浏览器中的JavaScript引擎将字符<!作为一行注释的开头。没有玩笑。这实际上一直是语言的一部分，直到今天它还在工作，不仅在内联<script>的顶部，而且在JS代码的所有地方。它甚至可以在Node中工作。
在ES6中，这种注释风格第一次被标准化了。
--> goes to 操作符
箭头序列-->也表示一行注释。奇怪的是，在HTML中-->之前的字符是注释的一部分，而在JS中-->之后的行其余部分是注释。这个箭头只在注释出现在一行的开头时表示注释。这是因为在其他上下文中，-->是JS中的一个操作符，“goes to”操作符!
function countdown(n) {
while (n --> 0) // "n goes to zero"
alert(n);
blastoff();
}
<= 小于等于符号
用来判断是否小于等于某数值
函数表达式无处不在
JavaScript的一个有趣特性是，当需要一个函数时，你可以在运行代码的过程中输入该函数。例如，假设试图告诉浏览器当用户单击某个按钮时该做什么。开始键入:
$("#confetti-btn").click(
jQuery的.click()方法有一个参数:一个函数。没有问题。你可以在这里输入一个函数:
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
});
现在，编写这样的代码对我们来说很自然。所以回想起来很奇怪，在JavaScript普及这种编程之前，许多语言都没有这个特性。当然，Lisp在1958年有函数表达式，也称为lambda函数。但是c++、Python、c#和Java都在没有它们的情况下存在了很多年。目前较新的语言都内置了lambda。我们要感谢JavaScript——以及早期JavaScript程序员无畏地构建了大量依赖lambda的库，从而导致了该特性的广泛采用。
然而，在我提到的所有语言中，JavaScript的lambda语法是最冗长的。
// 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
现在可以来看看ES6新特性，箭头函数。
=> 箭头函数
ES6为编写函数引入了一种新的语法：
// ES5
var selected = allJobs.filter(function (job) {
return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());
当您只需要一个带参数的简单函数时，新的箭头函数语法就是Identifier => Expression。可以跳过键入function和return，以及一些括号、大括号和分号。
要编写一个有多个参数(或没有参数，或rest参数或默认参数，或解构参数)的函数，您需要在参数列表周围添加圆括号:
// 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();
});
注意，带有块体{}的箭头函数不会自动返回值。此时要使用return语句，显式返回。
使用箭头函数返回创建的普通对象时需要注意一点。总是用括号括住对象:
var chewToys = puppies.map(puppy => {}); // BUG!
var chewToys = puppies.map(puppy => ({})); // ok
不幸的是，空对象{}和空块{}看起来完全一样。ES6中的规则是，紧跟着箭头的{总是被视为块的开始，而不是对象的开始。代码puppy =>{}因此被静默地解释为一个不做任何事情并返回undefined的箭头函数。
更令人困惑的是，像{key: value}这样的对象字面量看起来就像一个包含标签语句的块--至少在JavaScript引擎看来是这样的。幸运的是{是唯一的二义字符，所以用括号包装对象字面量是你需要记住的唯一技巧。
this 是什么？
普通函数函数和箭头函数在行为上有一个细微的区别。箭头函数没有自己的this值。在箭头函数中this的值总是继承自外围作用域。
this在JavaScript中是如何工作的?其值从何而来?没有简单的答案。如果这在你的脑海中看起来很简单，那是因为你已经处理它很长时间了!
这个问题经常出现的一个原因是function函数会自动接收this值，不管它们是否需要。你写过这种hack吗?
{
...
addAll: function addAll(pieces) {
var self = this;
_.each(pieces, function (piece) {
self.add(piece);
});
},
...
}
这里，你想在内部函数中写的就是this.add(piece)。不幸的是，内部函数没有继承外部函数的this值。在内部函数中，this将是window或undefined。临时变量self的作用是将外部this值带入内部函数。(另一种方法是在内部函数上使用.bind(this)。两种方式都不是特别漂亮。)
在ES6中，如果你遵循以下规则，这些Hack代码就会消失:
// ES6
{
...
addAll: function addAll(pieces) {
_.each(pieces, piece => this.add(piece));
},
...
}
在ES6版本中，注意addAll方法从它的调用者那里接收this。内部函数是一个箭头函数，因此它从外围作用域继承了this。作为奖励，ES6还提供了一种更短的方法来编写对象字面量中的方法!所以上面的代码可以进一步简化:
// ES6 with method syntax
{
...
addAll(pieces) {
_.each(pieces, piece => this.add(piece));
},
...
}
在旧function和箭头函数之间，我可能再也不会键入functoin了。
箭头函数和非箭头函数之间还有一个细微的区别:箭头函数也没有自己的参数对象arguments。当然，在ES6中，您可能更愿意使用rest参数或默认值。
