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

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

众联智领CTO:从idea到面目全非的创业产品 CMDN Club 25期:knewone与路况电台的精益创业法则 Windows Blue的孪生兄弟?Office Gemini浮出水面 HTML5开发平台Ludei将支持3D游戏开发 《二战风云》发布至今,已为顽石互动狂赚2.7亿 腾讯开源基于HTML5技术的专业级图像处理引擎 AlloyImage Linux容器运行时Docker开源 360上线第三方漏洞收录平台 将现金奖励爆料者 UC推出iOS平台首个支持WebGL的浏览器 魔兽之父专访:今年游戏产业会出现一场革命 Instagram 5位传奇工程师背后的技术(PPT全译) Google云计算专家Jeff Dean与Sanjay Ghemawat获ACM Infosys基金会大奖 谷歌承诺不对开发、发行和使用开源软件的人专利诉讼 Web框架排行榜 Netty、Servlet和Vert.x位列前三 DARPA慷慨解囊的背后:Python与大数据的火花 研发周报:神奇!1KB JavaScript代码编写的3D蜜蜂 移动周报:65岁传奇Android工程师谈开发 “部落战争”开发商Supercell融资1亿美金 投资公司争先恐后 Kiip 90后华裔励志故事:从遭解雇到誉满全球 大数据基因测序的成本逼近1000美元:个性化医疗的时代来临 携程开放平台发力 将实现旗下产品全流程API支持 Puppet labs发布2013自动化运维报告 “国”字号开发者:航旅纵横负责人薄满辉专访 金山云杨钢:核心算法保证安全和低成本 加速软件交付 企业级模拟测试服务CA LISA受追捧 盛大云业务重点转向自服务 转战中小型企业:Prediction API请求一个月内飙升至7亿多次 利用光子 耶鲁大学研究人员让量子计算机离现实更近一步 技术为王的云计算会让IT部门消亡么? 从Discuz到APP:安米移动社区转化工具 覆盖全领域:Google、Facebook、Twitter等大师的最佳推荐 请问在CB中如何隐藏WINDOWS的任务栏呢? 今天不爽,下班后打星际,大家一起来。 指点!在PB中怎样用程序作成一张动态的交叉表 编辑控件怎样才能显示那些怪字符? 有没有人喜欢郑智化 大家推荐好听的几首歌吧! 请教:怎么学c++? 高手点拨! 各位网络高手.如何在程序里讲ip地址转化为域名 有什么方法,可使表单内的组件背景变成透明的而文字不透明,请看例子: 编辑控件怎样才能显示那些怪字符???? swall(壹心) 你还在深圳特区吗? 如何设置Session的密码?请高手指点迷经^^^^^ 哪位可以解释一下下面的代码? perl 的人气太差。罢了罢了。找本perl自己搞定 MsSQL7.0 当日志文件大小未限制而变得很大时,怎样清日志文件,使其减小? 请教诸位牛兄牛姐牛夫人---有难度哦(着急出活!) 基本问题:如何将一个.txt中的内容读入到内存再从内存中读出并存为另一个文件?谢了先!!!! 高手帮帮忙!!!!!!!!!!!!!! 又有台风了。。。。 在zip包中加入ASP推荐的PAD File有用吗????? PB连接SQL数数库,为什么显示的表会不全 如何把一个文件file.dat里的数据写入软盘0磁道0磁头1扇区. 我要骂人! chris2001(牛虻),不是东西 华为工程师 谁知道 vb 的序列号?????? VS.NET 有开了个新铺子。为什么我的ejb/j2ee还没有开张。气愤。 老大们:我是菜鸟,有问题要问,不过不要笑我。一定给分的 再次发问:关于在SQL SERVER中的某张表上建立触发器...... 没有有这样的病毒,或者文件 各位老大,如果有asp、sql基础学jsp和php是不是比较容易一些呀?言者有分哦! dll中怎样调用主程序中的函数? 新手请教接口聚合!!!!!!!!! 高分求教!有没有谁编写过WEB服务器程序? 微软OfficeXp女孩 请教一个报表问题? 小技巧!!! delphi中调用MessageBox出错,高手指点一下。 大家好,这是我提的第一个问题!我学DELPHI才两周!对您的指点,小弟万分感激! 请问sybase12。0中,游标能不能用动态sql申请 紧急求助:如何调用父对话框的函数 各位好,我在VB下做了一个ACTIVE 控件,但是加不到CBUILDER 上,但能加到VB里,为什么? 婚介所 关于C++打开文件的问题? 请教一下关于多表查询的问题 求助:中文Delhpi帮助 为什么我的rose装好后没有html帮助?还有安装时应该选择client还是administrator? cathy0505;chenkane;zhangshicun;swall;(_2_);riluo;wt13;MonkeyLin;seedundersnow;qancy_chen;cathy0505;acute 一个很简单的问题,怎样把一个php字符串变量转为实型变量 用过2K/NT DDK的大侠:如何在2000的内核里编程向硬盘里写文件,如:写c:\a.txt到C上,给我一段代码? 我急需一个“医院生殖中心病历管理软件”,sbf2000@363.net 请问一立方100摄氏度的开水有多少热量?一立方300摄氏度的水蒸气 压力为9.8公斤 有多少热量? 管道压力表、真空压力表一般与何种阀门连接?现在有两种阀门Z43F-16C Q41F-16C 压力表一般和哪种阀门连接啊. 0.1mol的铜与足量的浓硫酸反应生成SO2的体积约为22.4 L 用0.6MPa压力的管道蒸汽直接加热1T水,从15摄氏度到100摄氏度,需要多少立方蒸汽,换算KW数要多少KW能量 φ76的管道,压力0.5Mpa每分钟流多少方水 常温常压下 1mol二氧化硫的体积小于22.4l这句话正确,为什么 不同压力下水升高1摄氏度需要的热量一样吗蒸汽锅炉里的压力大约是1MP,50摄氏度升到80摄氏度需要多少热量?和在标准大气压下一样吗? 管道φ219,压力0.4-0.5MPa流量150m3/h需提高压力1.0mpa用多大管道增压泵 在20度温度下,压强为101kpa时1mol的氧气和1mol的二氧化碳为什么所含的分子数相等?不是2和3吗? 如果3个溢流阀依次串联联接,且它们的调定压力依次为6MPa、4MPa、7MPa 那么液压泵的出口压力为多少? 给水管道试验压力是如何确定说明其合格标准 1mol氢气和0.5mol氧气在相同状况下混合,求混合气体中氢气的体积分数,物质的量分数和质量分数 反应釜机械密封压力怎样调节,使用什么测量,依据什么来调整 请问进气管道压力5MPa 管子直径10毫米,忽略阻力,求1小时流量是多少?出口0.1MPa,空气,管道长度1米 同温同压下,分别为1mol的氢气和氧气,它们的〔 〕(A)质量相同,体积不同 (B)分子个数相同,质量不同 (C)体积相同,分子数不同 (D)体积相同,分子数也相同 为什么不是D? 溢流阀的选择 我做实验用的,液体压力要维持在3mpa,4mpa,6mpa等,溢流阀选哪种合适呢,可调可控就是我设定一个值,到达那个值后就溢流,不到继续上压 差压变送器测流量用的温压补偿公式设计温度和设计压力是怎么来的?有没有通用数值的?我们厂的煤气管道就是露天的,夏天最高有45度,冬天最低-5度吧.另外是不是说不同的管道这2个参数不同 下列物质中所含微粒物质的量最多的是A 3.01×10∧23个镁原子 B 1mol氮气 C 4克氢气 D 36克氧气 在精馏操作中,塔釜压力为什么是一个重要的参数?塔釜压力与什么因素有关? 孔板流量计为什么要加压力补偿和温度补偿 标准状态下,1mol的水体积是多少?存在22.4升的水蒸气吗?化学里面的确是说标准状况下没水蒸气没错,但是物理题目里动不动就来个“标准状况下1mol的水蒸气体积是22.4升,请问此时水分子间的 很多地方提到高压反应釜,到底承受多少压力才算是高压反应釜.有高压就有中压和低压吧,如何区分? 孔板流量计上的NM3是什么单位 1mol水的体积和1mol冰的体积哪个大 酯化反应釜操作压力问题我设计的反应釜酸酐进料压力0.1Mpa,醇进料压力i0.1Mpa,出料0.9Mpa.1.搅拌釜内操作压力是0.2Mpa还是0.9Mpa呢?2.夹套内用水蒸气加热,工作压力是该温度下水蒸气的饱和蒸汽压 谁讲一下跟孔板流量计相关的知识, 1. 1mol的二氧化碳和1mol的水在相同状态下体积一定相等吗? 1mol的二氧化碳和1mol的水在相同状态下体积一定相等吗?不同的气体,若体积不等,则它们所含的分子数一定不等吗? 搪瓷反应釜、搪玻璃反应釜的性能 请问孔板流量计的测量原理? 1mol的氧气、1mol的水和1mol的铁哪个体积大 木炭、镁条、白磷、氢气、四种物质都能在氧气中燃烧、其变化的本质和现象有不少共同之处、如:反应都需点燃、反应物都有氧气等、再归纳出三点、 压力反应釜正负压怎么做 孔板流量计安装条件孔板流量计(流量计油表)安装管道在安装的时候有没有什么条件 沼气在常温下能不能液化沼气在常温下能不能被液化?详细一点 什么样的压力容器需要型式试验,搪玻璃反应釜需要吗?新容规上说蓄能器等需要做型式试验,这个等包括反应釜吗? 在标准状况下1mol任何气体的体积都是22.4L那么在标准状况下11.2L氢气中的分子数是多少个 常温下使甲烷液化需要多大的压力?安全标准是什么?谢谢!RT 带夹套的不锈钢反应釜是不是需要检测的压力容器?蒸汽加热,需要温度105 容器内为常压,所需蒸汽压力2公斤请提供解释或依据夹套内为水蒸气,容器内为水和肉(猪肉、牛肉或羊肉),它是低压 在标准状况下,1mol任何气体的体积都是22.4L.那么,在标准状况下,11.2L氢气中的分子数是几个 哪里有沼气液化的设备?哪里有沼气液化工程? 搪瓷反应釜是几类压力容器 在标准状况下1moL水的体积是22. 沼气能液化吗?沼气如果直接用高压瓶装后还能用吗?建沼气政府有补贴吗? 半管加热的反应釜是否属于压力容器? 标准状况下1mol的混合气体的体积怎么是22.4L.分子间有较大的间隔.像酒精和水一样混合了不是会体积减少么 氧气在多大压力下可以液化?一般的医用氧气,纯度达到99%.99以上的氧气,在多大的压力下可以实现液化?这个压力大约等于多少公斤?我还想问下,在一定的压力下,氧气可以通过加压的方式实现缩 甲醇对20号压力容器用钢材有没有腐蚀性? 是不是当1mol气体的体积为22.4L时,它就一定处在标况下麽?1mol水蒸气在标况下的体积是22. 氢液化的温度是多少?常温下将氢液化的压力是多少?等于多少个大气压氢气在室温下不可能液化的话,那市场上买的那种氢气钢瓶里装的液态氢不是会爆掉吗? 求一反应釜各管道连接图 标准状况下,1mol任何气体所占的体积为22.4L 在标况下,1mol任何体积所占的体积约为22.4L多了一个约,为什么不同的题目上都对 供暖压力达到多少才能保证供热效果 压力表连在管道上,为什么压力表与管道连接处之间管道是弯成一个圆的样子 标况下,1mol三氧化硫的体积为22.4L 采暖总热负荷 循环泵流量 电机功率的关系? 管道压力表怎样装 1MOL SO2在20度 体积大于22.4L为什么是错的? 按流量供暖怎么计算 请问有没有关于化工设备(比如精馏塔,反应釜,管道等)的国家标准可查? 这种说法对吗?1mol三氧化硫和1mol二氧化硫体积均为22.4L如题
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn