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

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

VB中自制文件搜索器 Windows 初始化文件的修改 -VB资料 Word 97与WPS97的完美结合 -VB资料 比较两个文件-VB资料 采用递归算法删除带有多级子目录的目录-VB资料 菜单项的动态装入 -VB资料 处理加了密码的MDB文件-VB资料 VB创建临时文件 从公共对话框控件中提取多个文件名称 -VB资料 从全路径名中提取文件名 -VB资料 打印MsChart之类的控件 -VB资料 谈谈在VB6.0中如何使用资源文件进行编程 动画图像分解在VB动画设计中的应用 多重文档界面设计方法-VB资料 恢复回收站中的文件 -VB资料 VB获得位图文件的信息 VB获得文本框中光标所在行的内容 VB获取程序工作路径的方法 VB获取文件或文件夹属性 基于VB的通用折行打印程序 基于VB和EXCEL的报表设计及打印 VB建立多级目录 -VB资料 VB建立快捷方式-VB资料 VB建立文件关联 -VB资料 将RichTextBox 之中被选取的内容复制到剪贴簿-VB资料 将我的程序的文本直接送到WORD中(不用粘贴)-VB资料 开启文件属性窗口 -VB资料 快速读取 TextBox 第 N 行的资料 -VB资料 快速选择里List全部项目-VB资料 VB利用 App.Path 读取「应用程序所在之目录」 VB利用 EM_LINESCROLL 信息控制 TextBox 的卷动。 如何查找一个对话框的owner窗口? 我应该选择VC还是C#??? 在系统启动时至少有一个服务或驱动程序产生错误,详细信息,请使用事件查看器查看事件日志 操作系统是如何发现新插入的设备的? 关于对Com1,Com2读取条形码的编程 帮个忙,先,谢了! 接着那个堆栈问题,创建了,试验了。但应用时出现了对创建错误? 我想在对话框上输出一个char数组,用什么方法比较好????????????? 怎样移动较大副图片的时候避免或者尽量减少闪动? 怎么把网络编程和数据库联系起来 如何贴背景透明的按钮?急,急,在线等待!!! 奇怪了! 请问如何获得居于网中一个工作组下的所有计算机?? 还是一个dll内部变量的问题。 怎么回事? 送分! 大家看看 请问MSDN的帮助怎么获得 怎么样获得一同名text表单域的值? **C++语言的设计和演化** 图书好贵呀!!! 求表达式正确与否的校验算法 怎样控制DllMain?在哪里可以编辑这个函数? 同一个句柄对于所有进程是否一样? 我的red hat linux8 怎么才能配置声卡 如何判断一个字符串是否是常数 《Java与模式》一书已经出版 --- 作者 各为高手,如何能够看到我打开网页的session的值 关于 Geforce256 的问题. 一定给分!数据库查询问题 solaris下有没有用过syslog编程的? 推荐个好点的flash的控件吧 数据库中的Currency类型字段 初学pb8请指教!多谢! 如何让richtextbox支持语法高亮显示 请问rtsp是什么协议? 函数返回临时指针到底如何处理较好? 原来在bcb4下的程序为什么在BCB6下运行出错? 我是新手 如何用代码关闭显示器和硬盘??????? 如何打印PictureBox中的所有内容,分不够可以再加 问一下大家的下载和注册的比率好吗? 我的IE怎么了? 这是我第二天的C#学习笔记,敬请高手指教 ★★★ 在线等待,高分求对 ★★★ >>>>>>> 虞美人身佩玉蝴蝶蝶恋花 linux 热启动后能不能再进入winme? 大家说高中毕业自学的c#程序员有可能找到工作吗? 急!如何给DBGrid对应的列字段规定显示格式 用VB将图片插入到Excel或WORD里 请问文本压缩目前有什么标准? 怎么控制小数点后的位数????? Oracle Developer的B/S结构是如何实现的? 在图①△ABC中,∠ACB=90°,AC=BC,直线MN经过点C,且AD⊥MN于D,BE⊥于E.(1)说明△ADC≌△CEB ..(2)说明AD+BE=DE(3)当直线MN绕点C旋转到图②的位置时,试问AD,BE,DE具有怎样的关系?请写出来并加以 英语翻译怎么翻译the design should be approximately 35% each for feed and metering sections with the remaining 30% as transition zone The teacher,with the student is going to work on the farm this sunday 为什么用is 如图1,在△ABC中,∠ACB=90°,AC=BC,直线l经过点C,AD⊥l与D BE⊥l于E 1,求证△ADC全等于△CEB 2.当直线l绕点c旋转到图2的位置时,DE,AD,BE且又怎样的数量关系,比证明kuai 求一部明朝的电视剧小时候看过的,内容具体是崇祯有两个女儿,2女儿很坏,通敌叛国.我只记得那么点了, The teacher with the students often ___ to the moutains.A.go B.are going C.goes D.is going 急...A:Hello!What are you going to do?B:I am going to the shop to buy something for our evening party.A:Evening party?_____________B:Yes,we are.A:________________B:Toninght.We'll get our teachers and classmates together.A:can you tell me something m 为什么很多武侠剧都是发生在明朝? The teacher is giving ___ the new books to the students填介词或副词 [How long have you been coming here]这一句有什么错误,该怎样改? 有一个地方,不管哪个方向都是北,那么这个地方在哪里 扑克牌A代表什么意思 In the 12 months since I last wrote to you,a lot ----(happen)to me 人固有一死的固是什么意思? 生物分类依据病毒分类吗?立克次氏体分类吗?真菌,动、植物和微生物的分类依据,通俗点。按照界、门、纲、目、科、属、种来分。 his young brother once wrote to him in 2005,and 〔hasn't been heard from〕sincehear from意思是收到,那么为什么要用been heard from的被动句? 我们可以在互联网上与彼此聊天. We can chat with each other ____ ____ ____. 描写树木茂盛的成语(10个以上)急, It has been two weeks since I last wrote to you.意思? 在ΔABC中,∠ACB=90度,AC=BC,直线MN经过点C,且AD垂直与MN于点D,BE垂直MN于点E.说明ΔADC全等ΔCEB 生物分类的依据动物的分类单位不仅要比较外部形态,还要比较动物的_____和______. 珠江夜景作文300字 She should help her mother ()housework 沙漠的动物怎样生存 沿珠江哪里看珠江夜景 She didn’t help her mother do any housework until she was fifteen同义句这有两个空 help her mother do any housework 这有一个空 she was fifteen 问下be going to 的句型是不是be going to的句型后面可以加动词啊?yes,i am to go to learn that how to driveyes,i am to learn that how to drive 这两句话语法上是对的么?有什么区别 如图,在△ABC中,∠ACB=90°,AC=BC,直线MN经过点C,且AD⊥MN于D,BE⊥MN与点E,试判断S△ADC与△CEB全等吗? 英语经典习题:情景对话Allen:hello!Mike:hello._____.May I speak to Allen,please?Allen:_______.Mike:Hi,Allen,Hwo are you?Allen:Fine,thanks.Hwo are you?Mike:I‘m fine._____.Allen,I need some help.____.Allen:Sure._______.Mike:There is somethi 描写树木长得茂盛的成语(最少4个)那么 英语翻译楼主给你20-80的悬赏分.要多少悬赏分.自己写在答案边. 两道英语情景对话题,-How is it going,Tom? - ( ) A.Oh,okay,I guess. B.Not doing wrong. C.Sorry,I'm not so good. D.Noting,thanks 2.-Can I help you,sir? -( ) A.Yes,you can help me. B.No,I don 为什么植物开花季节不同?写说明文急需, 英语翻译我可以满足你的要求.*_* 我国的珍贵的历史文物有哪些 michael is going to be a singer when he grows up (对划线部分提问 划线部分是a singer 现在市场上塑料粒子价格大概是多少啊~ 做塑料薄膜袋的~ 我国珍贵历史文物只要名【如秦兵马俑】. I'm going to take you to the library.(对划线部分提问)划线部分是有.给个完整的句子 我国有什么地方一年四季都冷?最热时候温度不要超过20度?有没有这样地方?感觉西部一带,冰山脚下应该可以,但是,那种地方应该很偏僻,外地人不好生活,有没有比较好找工作的地方,不然,去了 中国的历史文物有什么要二十个 how will you go there?by train. Sally left the school last month.sally()()()from the school since last month 同义句转换 像从前一样的好朋友是什么词 how soon will you go there?这句话有语病吗 中国有哪些地方一年四季如春 像从前一样做好朋友是什么词语 How will you go there? 请问中国境内一年四季如春的地方是哪里四季天气晴好的地方都有哪里 急求 在哪个季节开花的植物,花芽的形成最需要光照?( ) A春季 B夏季 C秋季 D冬季 请速给我一篇题目叫‘红色少年’的作文 只要内容就是写树立自己远大理想等等 关于夜景的好词好句 绿色开花植物长 到一定阶段产生花芽绽放称称开花对么 原题是判断题 争当热爱祖国,理想远大的好少年如题,200字左右的国旗下讲话稿,急,这两天要,好的话可以加多二十分! (1)黄旗的面数是红旗的2.5倍,黄红旗共70面,红旗黄旗各多少面?(2)黄旗的面数是红旗面数的2.5倍,黄旗比红旗多45面,红旗黄旗各多少面? 和秦兵马俑同样珍贵的历史文物有哪些? 做爱国、理想远大的好少年的作文一篇400字 如图,在△ABC中,已知∠ACB=90°,AC=BC,直线MN经过点C,AD⊥MN于点D,BE⊥MN,求证△ADC全等于△CEB这个 商店有红旗45面,黄旗35面,绿旗的面数是红旗和黄旗总面数的1/4,绿旗有多少面? 除兵马俑外,我国珍贵的历史文物有( ),( )
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘