说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

【探秘ES6】系列专栏(七):箭头函数

HTML文档下载 WORD文档下载 PDF文档下载
新一代JavaScript标准ES6正式发布。【探秘ES6】系列专栏将一一剖析ES6的诸多新特性,让Web开发者对此有清晰全面的了解。本文为系列的第七篇,带你了解ES6的箭头函数。

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系列进行翻译,组织成【探秘ES6】系列专栏,供大家学习借鉴。本文为该系列的第七篇。 

本文接下来讲述的是有关ES6箭头函数(Arrow functions)的使用。

热身

箭头符号在JS中一直扮演着重要的角色。在JS教程里,一开始都会介绍如何使用箭头括号来加注释。例如:

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

旧版浏览器接收的是两个不支持的标签和一句注释,只有新版浏览器才会识别这是JS代码。

为了处理这种奇怪的表达方式,浏览器的JS引擎会把<!—识别为一行注释的开始位置。这种处理机制一直沿用至今,现在于Node中也适用。除此之外,-->还可以作为递增/减的操作符,例如while(n-->0) //n递减至0。

我们先回顾下箭头符号的一般用法:

  • <!-- 单行注释
  • -->  递增/减的操作符
  • <=   小于等于
  • =>   ?

=>是ES6中新的用法,也就是本节要讲述的内容。

随处可见的函数式表达

在JS中很有意思的地方是当我们需要调用函数时,只需在运行代码中的恰当位置添加就可以了。例如要对按钮的点击做出响应,可以这样写:

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

在JS开始盛行前,这样的代码是令人奇怪的,因为很多语言当时都没有类似的写法。除了1958年List语言的lambda(匿名)函数有函数表达式功能,C++、Python、C#等语言长时间里都是没有的。到了现在,lambda已经随处可见了,这多亏了JS的功劳。例如,

// 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

新的箭头语法

ES6引入了新的箭头函数编写方式。

// ES5var selected = allJobs.filter(function (job) {  return job.isSelected();});// ES6var selected = allJobs.filter(job => job.isSelected());

当需要编写一个简单的单一参数函数时,可以采用箭头函数来书写,标识名=>表达式。这样就可以省却function和return的输入,还有括号,分号等。

当需要编写一个含有多个参数的函数时,只要把相关参数用括号包起来就好了。

// ES5var total = values.reduce(function (a, b) {  return a + b;}, 0);// ES6var total = values.reduce((a, b) => a + b, 0);

我认为这是最简洁的书写格式。

箭头函数的功用与Underscore.js和immutable等库的功能类似,immutable的示例文档中全部都是使用ES6来编写的,因此使用了大量的箭头函数。

除了函数样式编写,箭头函数还可以包含区块语句而不仅仅是单一表达式。例如:

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

ES6的写法为:

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

this是什么?

普通函数与箭头函数有个微小的不同点。箭头函数没有自己的this值,其this值是通过继承其它传入对象而获得的。

JS是如何处理this的呢?这可不是个简单的问题。其中不论函数有没有真的需要处理this,函数都是会接收到的。你曾经写过如下代码吗?

{  ...  addAll: function addAll(pieces) {    var self = this;    _.each(pieces, function (piece) {      self.add(piece);    });  },  ...}

这里,其实你想写的内联函数仅仅是this.add(piece)。然而内联函数不会继承外部函数的this值。在内联函数中,this的值是window或undefined。临时变量self用于向内联函数传入外部this值。

在ES6中,如果遵循如下原则则可避免类似的做法:

  • 使用非箭头函数来处理由object.method()语法调用的方法。因为它们会接收到来自调用者的有意义的this值。
  • 在其它场合都使用箭头函数。

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

什么时候使用箭头函数

ES6箭头函数在Firefox、Babel、Traceur、TypeScript等项目都有使用。在1936年,Alonzo Church和Alan Turing一起开发了强大的数学计算机模型,人们习惯把它称为图灵机。Church编写了名为λ-calculus的模型,当时他发现需要在系统使用到“函数”。

这是一个结合Church想法的“程序”示例:

fix = λf.(λx.f(λv.x(x)(v)))(λx.f(λv.x(x)(v)))

JS中可表示为:

var fix = f => (x => f(v => x(x)(v)))               (x => f(v => x(x)(v)));

这个故事告诉我们,箭头函数可以帮助打破陈规,从新的角度来思考问题。借助箭头函数,ES6将会变得更好更强大。(译者:伍昆 责编:陈秋歌)

原文链接:ES6 In Depth: Arrow functions

本译文遵循Creative Commons Attribution Share-Alike License v3.0 

相关阅读:

【探秘ES6】系列专栏(一):ES6简介

【探秘ES6】系列专栏(二):迭代器和for-of循环

【探秘ES6】系列专栏(三):生成器

【探秘ES6】系列专栏(四):模版字符串

【探秘ES6】系列专栏(五):剩余参数和默认参数

【探秘ES6】系列专栏(六):解构赋值

欢迎加入CSDN前端交流群:218126086,进行前端技术交流。  

英特尔或在2月宣布其电视计划:提供分类频道 Prismatic:用机器学习分析用户兴趣只需10秒钟 谷歌布局亚太地区数据中心建设 服务响应速度有望提升30% 2013年移动互联网行业技术趋势前瞻 老骥伏枥志在千里:回顾微软这一年 2013或将崛起 水落石出:在与谷歌苹果竞购创业公司中微软胜出 用扁平化的界面设计吸引用户 2012年12月份全球主流浏览器市场份额排行榜 冲榜不一定要刷榜:增加游戏曝光度的7大杀手锏 科技vs政治:FTC对Google的反垄断调查结束背后 威胁百度:奇虎360确认将与谷歌达成合作关系 Facebook更新Messenger应用 推免费网络电话服务 网上疯传iOS7概念设计:Dashboard是真是假? 过时的UI设计 Ubuntu手机系统前途不被看好 三星将于今年发布Tizen设备 将对苹果形成威胁? 分享9条经典的编程语录 国际著名黑客大赛介绍与比较 微软Azure CDN服务全球范围内出现宕机 双向多功能U盘:从Android设备到PC还有多远? 证明了自己:微软Win8获美国防部6.17亿订单 2013 Facebook黑客杯报名即将开始 解决Win8下IE10无法打开的故障 [简讯] Scala 2.10.0发布! 收购传闻:Apple一厢情愿还是Waze待价而沽 回顾过去,展望2013:移动开发引擎、工具和语言盘点 成本为0!Netflix开源工具Janitor Monkey清理AWS iOS开发者讲述在Google工作的三个月 GitHub历史上最糟糕宕机事故回放及反省 疑因竞争 谷歌有意让地图与WP手机不兼容 移动游戏开者必看:海外VC最关心什么? 淘宝UED:随侃设计师的个人素养 谁知道Microsoft的CAB文件用什么工具可以解开? 我对ADO访问MDB比较菜. 这是我的做的练习请大家帮我看一看 有关针对特定人的邮件用特殊格式显示的可行性探讨 SQL SERVER中的怪问题 几年下来,我们一直用着英文版的VC,不知道VS.NET中有没有中文版的VC? 还没有睡觉的兄弟过来帮我看看这段代码,为什么有错?? ADO最新版哪儿有下载啊? 捆饶很久的问题!!! 急,明天就要交程序了,请问怎么才能知道产生的异常的名称,并拦截? 上午56、下午68,散分先 jsp站点的web服务器需要什么都??怎么设置??那里有说明文档没有啊 怎样在窗口没有显示出来之前将数个小位图“拼成”一个大位图并可以保存,急! win2000的怪问题 快救救我!!!!!!!!!!!!!!! 一个关于c++builder的ado的问题! PACK6是不是有问题? MFC程序的结构问题? 一个酷似chinaasp的社区,需要你的支持。嘿……实在做得很好,送分!!!随便给朋友做做广告 7:30之前一定要交。。。。急。。。。!!!! 文件改名用哪个函数啊? 为什么我的windows2000pro共享文件不能访问????? 在VB.Net中的TabControl有一个OwnerDraw的功能,但不知到如何才能将上面的Item画成有曲线的 一个程序员的路是怎样开始的?我该选择VB还是C语言? 那里有动态加载控件的文章??? 哪位高手告知学习C++/VC++的步骤和各阶段应看的书。 湖北的有查到分数的没有,怎么查,我天天晚上做恶梦,救救我! 能否请高手指教关于开在开机时屏蔽热键的问题(del+alt+ctrl)?高分送上! 请教语音卡高手:并线录音和串线录音有何不同?电压驱动和话音驱动有什么不同? 一个时钟周期是多长时间? 请问各位谁做过(正在做)用MODEM来录电话语音的?进来打个招呼,探讨探讨。 有人用过CIPAddressCtrl这个控件吗?怎么用?为什么MSDN上说它有一个GetAddress的方法,但我在使用中却找不到这个方法? 请问广东省的高程成绩在哪儿查询,怎样才可以查询到呀???? 运行时的这个异常提示,什么意思?如何解决 关于数据库的一个问题 tmd.江西的软考办的人吃虱去了。 各位大哥:如果在使用的时候,字体变大,是什么原因?有什么办法跟踪吗? 救命啊。。。。。。。高手该出手拉。。 可不可以在一个树控件中的一个节点下面再加另外一个结控件?怎么搞? a question about form evaluation about form evaluation 她现在就睡在我的身边,她长的很丑,大脑袋,小眼睛、身子特长腿特短,简直是一无是处,还让我守护着她睡觉,TMD我比死了还难受,好痛苦啊。。。。。。 在excel2000中,如何在单元格中画对角线(就是常见的表头)? 如何使win98登录WIN2K server中? 各位大哥,请问怎样汉化C++Builder中的英文提示框(祥见内容部分)?谢谢! 请问怎么在sqlserver的用户子定义中是用循环啊! 真奇怪,我只是想通过accept得到的sockaddr_in来得到的IP再用gethostbyaddr得到主机名,但是死循环,请我看看错在哪里?我给分的 quickrep建立的报表,一对多表如何设置,为什么我设置报表的dataset属性为从表时,预览出现主表数据无法显示出现unkown错误,而从表可以。 怎样让“星际”通过代理服务器上网? oracle优化 用ADO控件操作数据库,对于关键字重复错误如何捕获? 深圳的朋友,有没有人知道深大通信(深大电话)? 什么是无线温度传感器? 生物柴油的热值生物柴油一般热值是多少左右啊 我知道原料不同 热值肯定不同 想清楚个大概是多少 什么事海洋文化,要详情,越具体越好 我正用proteus仿真个温度控制器,测量温度范围在20到400度之间,用哪个温度传感器好一点?原本用的是18b20 但发现范围不够·······最好能一起说下这个原件的使用注意事项 如何判断燃料热值高 蚊香片有毒吗 电压是形成电流的原因,那么电路俩端有电压,电路中就必有电流吗? 写一篇幻想月球的作文 为什么蚊香有毒? 要在一段电路总产生电流 它的两段就要有什么 可见什么是使电路中形成电流的原因 什么似提供电压的装置. 关于月亮的600字幻想作文! 蚊香是不是有毒? 为什么电路有电压才能产生电流? 《月亮的幻想》作文怎么写? 当电阻值一定的时候,电流和电压的关系是? 关于电压,下列说法中错误的是【 】 A 电压是电路中形成电流的原因 B 只要电路两端有电压,关于电压,下列说法中错误的是【 】A 电压是电路中形成电流的原因B 只要电路两端有电压,电路中就 我要一篇关于天或月亮的幻想文章 电流一定时,电压与电阻的关系 英语翻译产品1:Coconut limerelaxing body mistlngredients:water(Aqua),Alcohol Denat,sodium citrate,citric Acid,DMDM HydantoinpEG--40 Hydrogenated castor oil,perfume (parfum)产品2:Fruit Smoothies Enioy some time topamper yourself withlavish bu 生物柴油热值提高剂哪一种比较好? 管道、阀门、压力罐 一些气体或液体管道的英文缩写XS DN50+7℃ DN50TCS(g) DN50 TCS(外购)DN50DY DN50N₂ DN50 与高压罐相连的管道冲入N₂使用的是气体管道还是液体管道FQ DN50GFWQPGFGCPLGGDFCP3GOF 英语翻译today I miss my home very much I do not know where to go ,what to do after come here because want tell myself happy everyday .beleve myself you can 电路中电压源与点电流源的怎么转换? 电流一定时,电压与电阻是什么关系?同题 在催化剂FeCl3的作用下,苯和氯气反应 FECL3是如何催化的 为什么能够反应成立 中国海洋文化与西方海洋文化比较. 仪器仪表是温度和压力还有流量吗? 苯与氯气(催化剂,氯化铁)反应化学方程式《氯苯》求大神帮助 介绍一下大河文明和海洋文明的区别 电流一定时,电压和电阻成什么关系? 有关月亮的想象作文 列举出五个海洋文明来 请问现在目前仪器仪表(温度、压力、流量)行业的销售好不好做?帮我具体分析一下 月亮的想象作文不少于六百字! 法国属于大陆文明还是海洋文明? 地球出现过几次文明 求温度传感器,要求测量0到100度范围,输出为0到5V的模拟量! 有关月亮的幻想作文,急用!要有优美语句 寻找一个关于海洋文明的纪录片该记录片以前看过一小部分 但是现在忘了 记得第一集是讲述俄罗斯抢夺北冰洋的海洋权利 弄了个金属国旗插入了 北极点的深海的岩石中 ,这级的最后讲的是 苯与氯气发生加成反应 要在一段电路中产生电流,它的两端就要有电压.为什么两端都要有电压呢? 如何用压力传感器测液位?压力与液位值如何计算?例如:1~200cm的容器,对应的1~20000pa是怎么算出来的? 测0到100度温度范围内的温度传感器,给个具体的电路图和相关原理解释 电路两端只要有电压就一定有电流吗?说说理由. 传感器的种类及应用 用结点电压法求图中所示电路的节点电压,步骤稍微详细点,谢谢了 要使电路中有电流,电路两端必须有电压么?这个问题我上网也找不到准确的,最好给我讲一讲,举例子什么的,一些以后要学到的东西就不要提了,就在八年级上和七年级的知识范围给我讲就可以 什么是传感器 及传感器的定义和分类急 甲苯与氯气反应,在不同条件下有不同的产物,写出在下列条件下的化学方程式(均写一卤代物,甲基间位上的氢原子难取代).用FeCI3做催化剂:能否用图片发过来,我有分加。 有没有数字量输出的温度传感器?我现在想设定一个温度值,当达到该温度时,plc就能接通控制电机转动,有没有这样的传感器,如果没有,用什么办法能实现这样的功能呢?光照传感器呢(判断白天 压力式水位传感器安装要求是什么? 氯气与甲苯光照的方程式 数字温度传感器型号,我想用51单片机采集室内温度,请问我要使用哪个型号的数字温度传感器 洗衣机更换了水位传感器后,怎么给洗衣机排水同步压力? 如何用甲苯和氯气为主要原料制取甲醛的化学方程式 数字是温度传感器的型号有哪些?有没有直接输出数字信号的?麻烦建议一下, 世界上有哪些国家是海洋文明 T型热电偶的温度范围是多少,为何冷热冲击常用它用为温度传感器? 生物柴油如何测定它的热值?氧弹测量需要什么仪器?热值和十六烷值有关联吗? 海洋文明代表性国家,政治上有什么特点
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn