本文主要介绍对JavaScript中箭头函数的深入理解。主要讲解ES6版本的JS，有需要的朋友可以参考一下。
Arrow从一开始就是JavaScript的一部分。在第一个JavaScript中，建议将内联脚本代码包装在HTML注释中，这样可以防止不支持JavaScript的浏览器错误地将您的代码显示为纯文本。也许您已经编写了以下代码：
脚本语言='javascript '
！-
document.bgColor=' brown//红色
//-
/脚本
脚本语言='javascript '
！-
document.bgColor=' brown//红色
//-
/脚本
旧浏览器会看到两个不支持的标签和一个注释，只有支持JavaScript的新浏览器会将其解析成JavaScript代码。
为了支持这个古怪的特性，浏览器的JavaScript引擎把！——作为单行评论的开头，这不是开玩笑。这一直是这种语言的一部分，今天仍然可以使用，不仅在script标记的第一行，而且在JavaScript代码的任何部分。它甚至可以用于节点。
巧合的是，这种风格的注释在ES6中第一次被标准化。但这不是我们将要讨论的箭头。
-也表示单行注释。与HTML不同，在HTML中，在-之前的部分是注释内容，而在JavaScript中，在-之后的一行是注释。
只有当-出现在行首时，才表示箭头是注释，因为在其他情况下，-是运算符(goes to)。
功能倒计时(n) {
而(n - 0) //'n变为零'
警报(n)；
blastoff()；
}
功能倒计时(n) {
而(n - 0) //'n变为零'
警报(n)；
blastoff()；
}
上面的代码实际上可以运行。循环直到n为0，这并不是ES6的新特性，但是和我们熟悉的特性结合在一起，就有很强的误导性。你能弄清楚上面的代码是如何工作的吗？可以在栈溢出上找到相应的答案。
当然还有另外一个箭头，就是小于等于运算符=。也许你还能找到使用箭头的地方，但让我们停下来看看一个我们从未见过的箭头：
！-单行注释
-goesto运算符
=小于或等于运算符
=?
那么，=是什么意思呢？这是本文将要讨论的话题。
首先说一下函数。
无处不在的函数表达式
JavaScript的一个有趣的特性是，无论何时你需要一个函数，你都可以很容易地创建它们。
例如，为按钮绑定一个单击事件：
$('#confetti-btn ')。点击(
$('#confetti-btn ')。点击(
JQuery的。click()方法需要一个函数作为参数，我们可以很容易地就地创建一个函数：
$('#confetti-btn ')。单击(功能(事件){
playTrumpet()；
fireConfettiCannon()；
});
$('#confetti-btn ')。单击(功能(事件){
playTrumpet()；
fireConfettiCannon()；
});
现在，我们编写这样的代码是最自然的事情。但是在JavaScript流行之前，这种风格的代码看起来还是很奇怪，因为其他语言没有这种特性。1958年，Lisp有一个函数表达式，也叫lambda函数，但是在C、Python、C#和Java中都没有，存在了很多年。
现在，四种语言都有lambda表达式，所有新语言都有内置的lambda表达式。现在JavaScript也支持这个特性，这要感谢那些严重依赖lambda表达式的库的开发者，这促进了它的广泛采用。
与其他几种语言相比，JavaScript的语法有点冗长：
//一个非常简单的六种语言的函数。
函数(a) {返回一个0；} //JS
[](int a){ return a 0；} //C
((a)(A0))；咬舌
lambda a:一个0 # Python
a=a 0 //C#
a - a 0 //Java
//一个非常简单的六种语言的函数。
函数(a) {返回一个0；} //JS
[](int a){ return a 0；} //C
((a)(A0))；咬舌
lambda a:一个0 # Python
a=a 0 //C#
a - a 0 //Java
箭头函数
ES6引入了新的语法来编写函数：
//ES5
var selected=all jobs . filter(function(job){
返回job . is selected()；
});
//ES6
var selected=all jobs . filter(job=job . is selected())；
//ES5
var selected=all jobs . filter(function(job){
返回job . is selected()；
});
//ES6
var selected=all jobs . filter(job=job . is selected())；
当需要一个只有一个参数的函数时，arrow函数的语法可以简化为Identifier=Expression，直接省略function和return关键字，甚至连括号和末尾的分号都同时省略。
要编写一个有多个(或者没有参数，或者Rest参数和默认参数，或者解构参数)参数的函数，需要将参数括在括号中：
//ES5
var total=values.reduce(函数(a，b) {
返回a b；
}, 0);
//ES6
var total=values.reduce((a，b)=a b，0)；
//ES5
var total=values.reduce(函数(a，b) {
返回a b；
}, 0);
//ES6
var total=values.reduce((a，b)=a b，0)；
箭头函数也可以和一些工具函数库完美配合使用，比如Underscore.js和Immutable。事实上，不可变文档中的所有示例都是用ES6编写的，其中很多已经使用了箭头函数。
除了使用表达式，函数体还可以包含语句块。回想一下我们之前提到的例子：
//ES5
$('#confetti-btn ')。单击(功能(事件){
playTrumpet()；
fireConfettiCannon()；
});
//ES5
$('#confetti-btn ')。单击(功能(事件){
playTrumpet()；
fireConfettiCannon()；
});
以下是箭头功能：
//ES6
$('#confetti-btn ')。点击(事件={
playTrumpet()；
fireConfettiCannon()；
});
//ES6
$('#confetti-btn ')。点击(事件={
playTrumpet()；
fireConfettiCannon()；
});
请注意，使用语句块的arrow函数不会自动返回值，必须显式使用return返回值。
另一条建议，当使用arrow函数返回一个对象时，一定要用括号将返回的对象括起来：
//为每只小狗创建一个新的空对象来玩
var chew toys=puppies . map(puppy={ })；//BUG！
var chew toys=puppies . map(puppy=({ }))；//好的
//为每只小狗创建一个新的空对象来玩
var chew toys=puppies . map(puppy={ })；//BUG！
var chew toys=puppies . map(puppy=({ }))；//好的
因为空对象{0}看起来和空语句块{0}一模一样，所以ES6会一直把{紧跟其后的=当做语句块的开头，而不是一个对象的开头，那么puppy={} 0}就会被解析为一个没有函数体的箭头函数，返回值是未定义的。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。