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

【探秘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,进行前端技术交流。  

张民杰:三人团队的OpenStack机会 White Elephant:开发者必备的Hadoop利器 不及分析师预期:微软第四季财报揭晓 净利49.7亿美元 Facebook收购英国手机代码验证公司Monoidics Apache基金会废弃其C++标准库 鲍尔默宣称微软有一百万台服务器,这个数字真的靠谱吗? 全球6000开发者:iOS、Android、WP最痴情谁? 提升网站知名度的十大方法 IBM移动平台首席架构师Greg Truty:MobileFirst从底层架构开始 Hallo.js:一款所见即所得的Web编辑器 数据分析≠Hadoop+NoSQL,不妨先看完善现有技术的10条捷径 移动周报:百度收购91,19亿美金背后的博弈 植物大战僵尸2:“免费+内付费”模式引发争论 [CTO俱乐部第103期] 高德和四维图新技术高管谈地图导航的发展与挑战 Java 7爆最新漏洞,10年前的攻击手法仍有效 Twitter联合创始人Biz Stone谈Facebook用户体验 提倡零广告 英雄会:企业的人才漏斗 开发者的武林大会 一次错误估算带来的启示 苹果开发者中心被黑:开发者信息或被窃取 SIM卡加密存漏洞 将影响数亿计的手机用户 搜狗茹立云:探索引擎产品落地 浏览器+搜索模式会成主流吗? 大势所趋,IBM Acme Air至少使用Netflix的5个开源工具 【观察】跨越“朦胧期”的云计算:产业、核心技术、生态圈以及突破点 Rovio Account:平台化之路修成正果 甲骨文总裁马克•赫德采访实录:用软硬件集成一体机打垮对手 如何一步一步打造高可扩展性的应用程序? 用Java编程,请保持简洁! 从安全隐患带来的商机来看,Hadoop同样很美 三年增四倍:如今谷歌服务占北美互联网流量四分之一 决战低功耗?Intel明年推低功耗Xeon处理器 在软件架构上增加新功能的注意事项 SQL语句小问题!!在线等待! 想学ColdFusion 请看我的转载的贴子 Troj_Hacline.A是什么病毒? 关于XML的问题,150分赠送,急 dll问题。很简单。 感慨!!!(潜水一年,吐个泡,顺便发表一点意见) 帮个忙 怎么在Installshield中创建对话框,并操作ACCESS数据库? 连续给分:邮件服务器防病毒问题! 我想编译一个像API一样的dll 启动rose就出错,高手来看,100分 关于打印的一个问题 急!!!请提供一段设置Session的全部代码,谢谢!! 请问,从第二帧开始播放的代码的什么??? 老师要求编写五子棋的程序可是我实在想不出该怎么设定估价函数啊帮帮忙啊? 感觉压力比较大,活不下去,想跳楼自杀的进来侃侃 一个关于php提交表单的问题。 各位大侠,要命问题! 怎么在Installshield中创建对话框,并操作ACCESS数据库? win2000server的管理员密码让人改了,怎么办呀! 太气愤了,帮帮我? 用BDE连接MS SQL SERVER,为什么运行后出现未知用户名或密码的错误? datagrid中能不能进行统计 如何编写“outlook”风格的界面 如何实现flash截图?我研究了好久也不明白,希高手指点!(在线等待) 程序调用的DLL 在delphi中,用ADO如何实现将SQL中多表导出到一个Access中? 无聊啊无聊 想考软工???? Socket奇怪的问题! foxpro中如何实现按一按钮启动word和excel,并且直接弹出打开文件对话框? 关于分级权限管理(300分) 紧急求救!!!!!!!! 客户端web服务是否需要别的控件支持 帮帮我,朋友们请进.... Datareport问题! [cclq]竞选斑主,附我的方针! 用VB编写自己的服务器端组件 DAO问题,CDaoRecordset::addnew()和CDaoQueryDef::Execute插入一条记录,哪个更快? 谁能解释一下这个比较模糊的问题?关于地图窗口HWND。 闲人免进!如何增加信誉分! 如何改变Mem控件中插入符的形状? 各位大虾有没有检测日期的合法性的JAVASCRIPT脚本啊 怎么在Installshield中创建对话框,并操作ACCESS数据库? 两个问题,关于struts中form的action如何传递一个变量?如何使用科学计数变成普通数值? 救落水美女注意事项 如何学习NOTES? 急!!急!!给多分呀!!! 寻在windows下安装bugzilla时缺少的两个文件。 菜鸟问题。。。。。。需大师回答啊 怎样由实例句柄得到传口句柄? 七(3)班的同学去参加夏令营,在分配房间时发现:若每间住4人,则剩下19人无宿舍可住;若每间住6人,则有一间宿舍不空也不满.(1)如果有x间宿舍,那么可以列出关于x的不等式为------;(20) 干粉灭火器能喷多久 直线AB,CD交于O点,OE,OF分别平分角AOC,角BOC,若角AOD:角EOC=4:1,求FOD的度数如图 “如人饮水,冷暖自知”这句话什么意思 参考下.. 自然界的风声是由空气震动而产生的 是对还是错 求我叫MT EASY 3.6.1 谁有 误解的反义词和近义词是什么?一定要告诉我! 如果给物体加热 但物体无物态变化 是不是分子势能没有变化(无物态变化时分子间距离有没有改变?) 英语表达中 we,I 和I,we有什么区别?一般I ,you,he/she表达时是什么顺序 质量为60kg的体操运动员做“单臂大回环”,用一只手抓住单杠,伸展身体,以单杠为轴做圆周运动,运动员到达最底点时手臂受的拉力至少是多少最高点最小速度为什么是0 不是根号gr? 直线AB,CD,EF相交于点O,若∠AOD=∠3FOD,∠AOE=120°,则∠EOC的度数为 “机动车通过交叉路口时,相对方向行驶的右转弯的机动车让左转弯的车辆先行”为什么请解释详细 同一条直线上有A.B.C.D,四点,已知AD=5/9DB,AC=9/5CB,且CD=4厘米,求线段AB的长? 一个20尺货柜能装多少8公斤干粉灭火器要算上灭火器的外包装啊 怎样用量筒测得200克的酒精? 怎么计算出2个元件的点之间的距离 as3 什么是“初次分配”,什么又是再次分配?如题 一名落水小孩不小心掉入水中,抱着木头在河中顺水漂流.在A处遇到逆流而上的快艇,因要全部步骤``因雾大未被发现,1小时后快艇获悉此事,随即掉头追及,求快艇从获悉到救上小孩的时间? 如何解决AS3计算误差 3公斤干粉灭火器有多高直径是多少? 一名儿童抱着木头在河中漂流,在A处遇到逆流而上的快艇,因雾大未被发现,1小时后,快艇获悉此事,随即掉头救援请问:快艇从获悉消息到追及儿童需要几小时? 铝合金压铸模斜导柱用什么材料铝合金压铸模斜导柱坏了不知用什么材料换, 3600平方米的瓶级聚酯切片仓库该配备多少8公斤干粉灭火器 一名小孩抱着木头在河中漂流,在某处遇到逆水而上的轮船,因为雾太大,轮船上人没有发现小孩.一小时后该轮船上的人获悉此事,随即掉头追赶,则从获悉此事到追上小孩需要多少时间?(把符号 铝合金压铸模能不能将原材料换成尼龙材料? 伽利略在说明利力不是维护物体运动的原因时,用的什么科学方法 南极有风极之称 若选取等量常态叶与皱叶玉米种子各若干粒,分别单独隔离种植,观察子一代性状中的子一代的含义? 三条直线AB、CD、EF相交于点O,如果∠AOD=3∠FOD,∠AOC=2/3平角,求∠AOF和∠BOC的度数 把5克的盐放到40克的水里混合成盐水,盐是盐水的几分之几,水是盐水的几分之几? “有清一代”的“有”字是什么意思? OB平分∠AOC,OE分∠AOC成2:5两部分,∠BOE=27°,求∠AOC的度数OB平分∠AOC,OE分∠AOC成2:5两部分,∠BOE=27°,求∠AOC的度数 把5克盐放进40克水里混合成盐水,水是盐水的几分之几? “我代”是什么意思 干粉灭火器对人喷好吗 第二问的C,红鳞熄灭后立刻打开弹簧夹, 镁合金压铸模和铝合金压铸模设计区别在哪里? 用线挂一个重物做匀速圆周运动,线长易断还是线短易断?为什么? 童非首次在单杠项目中实现了“单臂大回环”:用一只手抓住单杠,伸展身体,以单杠为轴做圆周运动.设他的质量为65kg,求他的单臂在最低点能够承受的拉力至少约为多少?(忽略阻力,g取10)325 人们常说的W派是指什么? 已知直边和15°角求斜边(计算方法) 已知三角形ABC中,DF交AB于F,交AC于E,交BC延长线于D,且DE;DC=AB;BC.求证AF=EF(要有完整的全过程) “国民党反动派”的说法到底是指什么意思是国民党中的落后反动派还是说国民党就是反动派 直角三角形求斜边长度.请告诉公式和计算方法拜托各位大神直角三角形,已知底边长2.7米,高2米,求斜边长度.请告诉公式和计算方法,还有答案 △ABC中,D是BC的中点,E,F是AC上的点,CE=AB,AF=EF,DF的延长线与BA的延长线相较于G.求证:AG=AF△ABC中,D是BC的中点,E,F是AC上的点,CE=AB,AF=EF,DF的延长线与BA的延长线相较于G.求证:AG=AF 这儿是图: 流派流派,有流才有派是谁说的 双翅摩擦发声的有那些 什么事战术?战略?定义各是什么?最好举例说明!有什么异同? 绳子上系一重物做匀速圆周运动,线长易断,还是线短易断? 能和可口可乐发生剧烈反应的糖具体是哪一种?商品名?中国到处都买的到的? 如人饮水,冷暖自知的意思,具体一点是禅学么,谁说的?字面意思和广义是什么? (1/2)细线一端拴一重物,手执另一端,使重物在光滑水平面上做匀速圆周运动,下列说法正确的是?..(1/2)细线一端拴一重物,手执另一端,使重物在光滑水平面上做匀速圆周运动,下列说法正确的是?A 蚱蜢用脚摩擦翅膀来“唱歌”,请问是通过蚱蜢的什么振动,导致发声? 一切振动的物体都在发声吗 清香的近义词 摇曳的近义词 平静的反义词 偶尔的反义词清香的近义词摇曳的近义词平静的反义词偶尔的反义词 华太油烟机质量怎么样使用寿命长不长?做工好不好 老师为参加夏令营的同学安排宿舍.如果增加2间宿舍,每间宿舍住6人;如果减少两间宿舍,每间宿舍住9人.问:参加夏令营的同学共有多少人? 有一个长方体容器,高10厘米,底面是6厘米的长方形,容器中装的水离杯口还有3厘米,如果放一块石头(完全侵没),有部分水溢出,取出石头,水面下降4厘米,求石块的体积. 可乐与什么糖果混淆会发生反应?我看电视时,一瓶可乐和糖果接触,结果可乐飞上天了!问那是什么糖? 白岩松惋惜恒大未能锁定胜局:首尔死刑亚冠决赛首回合恒大2-2首尔 穆里奇中国科学家成功研发人感染H7N9禽流宗庆后语出惊人:中国不能再造房子了李克强在中南海紫光阁会见东盟十国经贸捅死医生的连恩青烦躁时砸东西打母亲 亚冠决赛首回合恒大2-2首尔 穆里奇美国“窃听门”持续发酵 欧洲各国一致德国品牌专家:中国品牌升级要品质更要浙江省委书记夏宝龙:希望天下浙商争做亚洲食学国际论坛登陆绍兴 中国大厨展杭州女装与国际女装相遇 传统丝绸碰撞淘宝店家支付宝“被贷款” 阿里服务热伊朗处死16名“恐怖分子”墨西哥革命制度党主席:墨中两国双边关阿富汗军事基地发生“内斗”致一死一伤贺一诚:浙商又迎新一轮挑战、改革和创阿里巴巴马云:金融业需要外行人的“搅美国“窃听门”持续发酵 欧洲各国一致2000余浙商回家共襄创业创新 新一中国科学家成功研发H7N9禽流感病毒以色列将建磁悬球形车轨道 乘客可体验昆明:市民举报暴恐线索最高奖励20万瑞典政府采取多种措施鼓励大学生自主创广东试点“民主选举”企业工会昆明:市民举报暴恐线索最高奖励20万治理侵害公民个人信息乱象要找准“七寸访谈预告:王乃学谈商务厅今年深化改革南宁:教师家长竞赛齐互动 寓教于乐共变形金刚第四部震撼上映 纽崔莱携手红方季惟南宁演唱《君子兰》 希望推广中广西工商发布上半年消费维权工作亮点和广西大部将出现降雨天气 南宁城区需注广西美术家走进“清洁乡村”采风写生创七月流火哪里去?荷家体验来覃塘(图)广西检验检疫局出台15项措施 促进外中方将参加伊核问题第六轮谈判新华国际时评:习主席访韩 登高望远 新旅程 新起点 德国纽伦堡孔子学院喜两奇葩男琐事起冲突报警 为谁先道歉争最后一批叙利亚化武运至意大利港口等待内涵搞笑无节操 云南网腌菜哥陪你神侃
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘