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

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

如何旋转字体-Delphi资料 如何隐藏和显示Windows的任务条-Delphi资料 如何在DELPHI界面上运行可执行文件 设计Form时的快捷键-Delphi资料 生成非矩形窗口-Delphi资料 时隐时现的鼠标-Delphi资料 无标题窗口的移动-Delphi资料 应用程序敏感键的实现-Delphi资料 用Delphi 4.0 设 计 新 型 界 面 用Delphi 实 现 自定 义 颜 色 对 话 框 及 其 构 件 用Delphi 实现自定义颜色对话框及其构件 用Delphi4实现风Word97风格的工具栏 用Delphi 开 发windows 屏 幕 保 护 预 览 程 序 用Delphi设置墙纸 用DELPHI实现无边界窗体的移动 用Delphi实现自定义颜色对话框及其构件 用DEPHI 3.0实现动画ABOUT窗口-Delphi资料 用鼠标拖动无标题窗口-Delphi资料 在Delphi编程中创建一个启动闪现窗口 在form中想用enter来代替tab,请问如何实现?-Delphi资料 在Listboxes中加背景图-Delphi资料 在Window右下角的添加图标-Delphi资料 在程序中使用自定义的鼠标-Delphi资料 怎样建立简单的任务栏应用程序-Delphi资料 增强DelphiTStatusBar控制 制作Delphi的竖排标签 自适应表单的实现-Delphi资料 COM/DCOM的区别与联系-Delphi资料 CoolBar上控件的排列顺序-Delphi资料 Delphi 4 WebBroker Delphi 中自做动态显示的控件 Unix下用什么源代码检测工具比较好? 我的电脑出什么问题了?各位帮帮忙 界面导航如何分类? 怎样得到本机的网卡号??? %¥#问个小问题,知道的都来抢分啊 谁知道哪儿有支持认证的SMTP组件下载? 有什么软件能查看PE文件的? ADO问题!!!! 100分求购最简单的串口程序!需要详细注释! 怎么给大家份呀?to wyz_csdn等(500分诚征wav 转换到MP3的源程序(VC++的例子)) 在directshow中,不知道怎样对播放的画面的亮度进行控制? 如果深愛的人要離開你,是變心還是死亡好一點?(讨论) 贴了二次为什么没有人指教? 戒水快两年了,如今回来看看,物不是人非啦 新手一问 关于datagrid 修改数据的问题,帮我看看,多谢 谁有这两本书,请帮忙发到我的邮箱里,100分相送 到底应该怎么办? 大家好,如何打开DLL文件? 建议成立一个程序员协会 关于IE中图片的保存 VB 语言支持问题 高分求李维《delphi5.xDELPHI5.X ADO/MTS/COM+高级程序设计》示例源码!!!! 请yangshu进来!给妳点分!!!倒分! 请教各位如何实现dbgrid中按住shift多选的问题? 请问把sql-server7中的数据文件copy出来行吗? 找不到类,请大家帮忙解决,谢谢 异常处理问题 怎样恢复被损坏的"本地用户和组" 小弟在线等待,一小问题,,大家来帮忙?? 求jsp树的原代码 最好是jsp+js+xml 执行效率要高。(从数据库中动态生成的)在线 关于多层结构中事务处理的问题. VB6.0升级到VB.NET的问题。 在ASP中使用ActiveX Control ADOTable表名如何在运行时“递进” 这样的待遇能招到人吗? 不好意思,问个技术问题。其他版实在没人气!只好来这问! 不爽,辞职,散分! 在线等待(100)往一个表的字段赋值,怎么不行啊! 急!在线等待! 如何把一个窗体内嵌到另外一个窗体的指定位置? 电源键设置问题 假设有一个变量CString str,调用str.GetBuffer(ncount);上面函数的参数应该为多少,才能取得缓冲中的全部字串值? 如何做局域网中的机子通讯 有关Enumerations的问题 请教英文语法检查的算法. 给些提示或参考资料好吗? 简单的关于对话框关闭的问题 关于新闻联播! 哪位有USB1或2.0的开发文档或相关资料? 关于JAVA的问题!请教高手~! 在delphi中用什么样的函数可以将十六进制数转换成十进制? 殛之羽山什么意思? 过渡态理论问题在书(无机及分析化学----南京大学)上的反应速率理论简介一节中的“过渡态理论”一小节中,为什么反应物分子的平均势能(E1)与产物分子的平均势能(E2)的能量差为反 操蛇之神闻之,惧其不已也,告之于帝 操的意思 “殛”这字怎么读?什么意思?不明白啊! 简述化学反应的过渡态理论原理 愚公移山中指通豫南,达于汉阴,箕畚运于渤海之中,操蛇之神闻之,惧其不已也,告之于帝里面的三个于各是什么意思? 求arctan(1/5)+arctan(2/3)答案为 派/4 用过渡态理论解释化学反应速率 诸葛亮城头操琴笑容可掬的笑,反映了诸葛亮什么和什么的心理 帮忙求下这2个角度是多少?∠arctan(-2/-2√3)和∠arctan(-2/2√3) 过渡态和中间产物差别 兵临城下,孔明为什么还能“ 凭栏而坐,焚香操琴” arctan(1/3)+arctan(1/2)的值为? 在高中阶段,有什么化合物他好像是共价化合物,但他是离子化合物的例子,越多越好.刚刚提问搞错了,纠结 果见孔明坐于城楼之上,笑容可掬,焚香操琴运用了什么描写手法 急啊~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ arctan(1/2 *w)+arctan(1/3*w)=30度抱歉数学符号不好打 有不同类别的物质,与Ba(OH)2溶液反应生成不容稀HNO3的白色沉淀,写出3种以上的符合物质,写出化学方程 1.司马懿面对空城和焚香操琴的孔明,未见前(),见到后(),最后() 2.诸葛亮城头操琴笑容可掬的笑,反映了诸葛亮1.司马懿面对空城和焚香操琴的孔明,未见前(),见到后(),最后()2.诸葛亮城头操琴笑容 100克稀盐酸与足量的碳酸钙反应,生成的气体通入澄清的石灰水中,完全反应后可得到20克的白色沉淀,求该盐酸溶液的质量分数.【请用初三化学的算法,我们可没”学过“mol”这个单位】我想知 赵匡胤能黄袍加身和杯酒释兵权的根本上是因为RTA身先士卒,部下拥戴B忠于职守,战功卓著C统兵大将,实力雄厚D重情重义,兄弟理解 Cuo和Ba(OH)2能生成白色沉淀吗是兰色沉淀 长者衰者而全存乎中而的意思. 所谓天诚者难测,而神者诚难明矣中而的意思 死而有知而的意思 建立布雷顿盛林体系下的固定汇率制的原因是什么?国际货币基金组织从中起到了什么样的作用? 下列物质水.氯化钠.水银.金刚石.液氧.氯酸钾.氧化铜.氮气其中属于单质的是属于氧 诚者 天之道也 诚之者 人之道也的意思 ∫Sec^3(θ)dθ怎么解? 天然蛋白质R的水解产物是一直链氨基酸,该氨基酸分子中只有一个氮原子,0.159g 该氨基酸溶于水需用20.25mL0.107mol/LKOH溶液中和.若取2.94g该氨基酸用一定的化学方法处理,将全部的氮原子全转化为 诚者,天之道也;诚之者,人之道也.是啥意思 科学家进行一次实验,需要每隔4小时做一次记录,已知已知做第17次记录时,挂钟的时针恰好指向8,那么第一次时时针指向几?(急需答案,会追加)过程啊! 问几个关于语文文言文的几个问题过秦论中,当此之时的“之”、杜赫之属的“之”百万之师的“之”、秦无亡矢遗镞之费的“之”、蹑足行伍之间的“之”分别是什么用法和意思? 诚者,天之道也;诚之者,人之道也 的意思 arctan√3 必先苦其心志,(心)字怎么翻译(心)字怎么翻译 以下所列,哪些是以少胜多的著名战役?1.巨鹿之战 2.官渡之战 3.赤壁之战 4.淝水之战 A以下所列,哪些是以少胜多的著名战役?1.巨鹿之战 2.官渡之战 3.赤壁之战 4.淝水之战A.1234 B.124 C.234 D.134 科学家进行实验,每隔5小时做一次记录,20次时,是上午九时.第一次是几时 从《离娄》、《尽心下》看孟子的思想及时代意义,最好是回答的详细点哦! 布雷顿森林体系和牙买加体系的不同点 求15篇文言文试题带着原文,最好有答案, C5H6O4且是饱和二元羧酸,求结构简式 班超字仲升 某一个科学家做实验的详细过程用上三个问句,可以仿照六年级下册语文书第12课来写. 木炭 铜都是由什么构成的 牙买加体系与布雷顿森林体系相比有何不同? 求可发生加成反应的官能团! 什么是脱脂棉?棉花含有脂肪么?在化学实验的时候用脱脂棉有什么优点? 班超,字仲升,扶风平陵人[1],徐令彪之少子也[2].为人有大志,不修细节,然内孝谨,居家常执勤苦,不耻劳辱.有口辩,而涉猎书传.永平五年[3],兄固被召诣校书郎[4],超与母随至洛阳[5]. 高中阶段能发生加成反应的官能团有哪些? 脱脂棉和棉花有什么区别?脱脂棉是怎么制成的? 通过对布雷顿森林体系和牙买加货币体系的比较,你认为有什么变化? 官能团加成反应? 白糖变黄了还能吃吗?别忘写原因! 后汉书 班超传:下列句子的句式特点相同的两项是( )( ) A.班超,字仲升,扶风平陵人 B.卿弟安在 C.兄固后汉书 班超传:下列句子的句式特点相同的两项是( )( )A.班超,字仲升,扶风平陵 什么官能团可以和CCL4发生加成反应化学方程式是什么. 愚公移山里“操蛇之神闻之”的操蛇之神是许某? 爽惟天其殛罚我,还有我不负神兮,神何殛我越荒州?能懂多少说多少! 一个生活中的化学(亲身经历)``!昨天我把几个黑色的铁钉,(好象是生了很多锈)放进了一个矿泉水瓶里,随后倒了一些洁厕灵,盖上盖子,一天后溶液变为黑色...打开盖子.象打开雪碧一样的喷出了 指出下面句子中“之”的用法和意义.(1)问所从来,具答之(2)操蛇之神闻之(3)永州之野产异蛇(4)甚矣,汝之不惠 毋不有功於民,勤力乃事.予乃大罚殛女,毋予怨.十万火急,翻译 科学家进行了一次测验,每隔5小时做一次记录,他做第12次记录时,时钟正好9点整,问第一次做记录时,时钟是几请写出算式! “操蛇之神闻之,俱其不已也”中的“不已” 照应上文中的“_,_,_”.是《愚公移山》里面的. 美报分析中国“见死不救”因何屡见不鲜外媒:美国监听丑闻暴露欧洲的整体虚弱韩调查显示 面试官平均14分钟决定是英国王储查尔斯否认说过“当国王像蹲监新加坡熊猫专家群英会热议熊猫的可持续外媒:美窃听丑闻再添猛料 痴迷监控近三季度A股交易账户增长近五成 场整体“杀光中国人”言论事件持续发酵 美华河里漂着的“布娃娃”竟是孩子 被路人打歪主意从十四楼摔下 面对受伤小偷众产下龙凤胎的姑娘执意出院 姑姑舅妈及杭州着力疏通\"毛细血管\" 28个西湖手划船调价后零投诉 灵隐野导\"媒体称广州公务员年收入超17万 不少人大信访局原副局长辞职当律师 称不是北京天坛公园频发虐猫事件 已致数十只福州旅游局官博骂记者为狗 回应:非官消费者保护法首次大修:网购7日内可无明星进入考题屡见不鲜 “杨幂题”引争环保部:上半年新疆青海等省区氨氮排放北京5药店今起“自助”卖奶粉 可刷银近视激光手术到底安不安全?四大项目开启良渚新城污染环境也要严惩他们有一个共同心愿:高端技术中国创造锅炉爆炸25块广告牌包掉16个品质赢信赖 启辰再行动临安发现南宋大墓教辅治乱,须断利益链防范极少数人勾结外部势力“机器人革命”潮涌全球是如何构建诚信体系的?特区政府欢迎白皮书发表三板块领跑年报分红收益提早进入赛地备战有助于提升状态旅行团明文拒温州人 业内称温州人“太问需于农 问计于民5月CPI重返“2时代”杭州:养老机构建协会非法售枪剖宫产后生二胎,怀孕4月子宫破裂
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘