资讯频道 → Web前端
阅读更多

0顶
0踩

Web前端

原创新闻 【探秘ES6】系列专栏（七）：箭头函数

2015-07-09 15:22 by 副主编 mengyidan1988 评论(0) 有4355人浏览
javascript ES6

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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))  ;; Lisp
lambda a: a > 0  # Python
a => a > 0  // C#
a -> a > 0  // Java

新的箭头语法

ES6引入了新的箭头函数编写方式。 
// ES5
var selected = allJobs.filter(function (job) {
  return job.isSelected();
});

// ES6
var selected = allJobs.filter(job => job.isSelected());

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

当需要编写一个含有多个参数的函数时，只要把相关参数用括号包起来就好了。 
// ES5
var total = values.reduce(function (a, b) {
  return a + b;
}, 0);

// ES6
var 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
0
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • shell 几种字符串加解密方法

    用 gtalk@gmail.com 作为明文，加密分两步，当然了，也是可以一步过的，呆会说～得到：137514765985002236391382606438443478282。得到：137514765985002236391382606438443478282。第二种：〔 应该是纯 Bash Shell，含 VIM 的 xxd 〕第三种：〔 Base64 编码，这个很好很强大，适合写加密脚本 〕得到：gtalk@gmail.com。得到：gtalk@gmail.com。dc -e 输出的数字P。

  • Shell文件加解密

    shell脚本文件加解密以及使用

  • 【笔记】linux脚本的简单加密和解密

    gzexe加密（压缩）和解密（解压） 例子：test.sh脚本 1.加密 使用gzexe命令，它会把原来的文件备份为 test.sh~ ,同时 test.sh 即被变成加密后的可执行文件 gzexe test.sh 2.解密 查看脚本，找到 “skip=44”，这里44就表示从44行开始是被加密过的，只需要把44行之后的内容重新生成一个压缩文件即可。 （1）.在当前目前生成压缩文件：...

  • 准备写一篇shell 脚本 (shell script)的加密与解密，有人看吗？

    准备写一篇shell 脚本 (shell script)的加密与解密，有人要约稿吗

  • linux脚本解密,给shell脚本加密和解密的shell脚本

    加密脚本内容：#!/bin/bashwhile read line;doecho $line|tr [a-m][n-z][A-M][N-Z][0-4][5-9] [n-z][a-m][N-Z][A-M][5-9][0-4]done$1.shrm -rf $1mv $1.sh $1chmod +x $1解密脚本内容：#!/bin/bashwhile read line;doecho $line|tr...

  • linux脚本解密,shell脚本加密与解密

    我们写的shell脚本里面通常会包含帐号密码等信息或者你不想让别人看到的信息，那么把写好的shell脚本进行简单的加密显得有些必要了。常用的shell加密方法有两种，一种是通过gzexe加密，另一种是通过shc加密。我们先给一个简单的脚本，然后用它来进行加密解密演示，脚本abc.sh内容如下#!/bin/bashecho"helloworld!"gzexe加密与解密shell脚本shell&...

  • shell脚本简单密码加密

    #!/bin/sh #输入密码 echo "请输入原密码：" read resultFirst firstPWD=$resultFirst echo "请再次输入原密码：" read resultSecond secondPWD=$resultSecond result="" output="" function encryptPWD() { for ((i=0;i<${#firstPWD}

  • MD5加密、Base64和DES可加密解密

    在做项目的过程中，一般都会涉及到用户名和密码。而这个时候密码就需要加密一下，在这里我就用Md5加密了。而很多人会有这个疑问，Md5可以在线转换，是的，的确可以在线转换，那么你可以试试多加密几次，这样在线工具解密的难度就会大大增大。而Base64和DES可加密也可解密，上代码。1、Md5加密。 1 static void Main(string[] args) 2 { 3 //在这里我加...

  • Powershell脚本加密与解密

    网上查了powershell 加密解密的方法，有把ps脚本加密成bat的，有加密成bin的，尝试了一下，都的可以，有的不行。 我们项目中用到一个这样的脚本加密的，代码半天就写完了，加密的事情纠结了一星期，最终纠结在那个有名的加密的博客，没解释清楚如何传参进去到Invoke-Expression中，尝试了Invoke-command也没解决。 我传参的原因很简单，ps中的代码有取得当前路径的，我...

  • 脚本加密与解密

    脚本加密与解密JScript.Encode: http://www.vvss.net/tools/encode.htmunescape: http://www.vvss.net/tools/unescape.htm

  • 破解Linux环境下Shell脚本加密的几种思路

    原文地址::https://qblog.org/manual/linux-shell-decode.html 前一阵发布关于一键云免的文章《网易蜂巢CentOS6.7搭建OpenVPN云免服务器及手机端使用教程》，里面的一键安装包源码是经过解密后得来的，有不少博友联系我告知解密的方法，其实，博主解密都是4-5月份的代码，6月份后的骚逼汪的安装代码都是转换成二进制可执行的linux

  • shell 加密

    #加密 openssl enc -e -aes-256-cbc -in 要加密的文件 -out 要解密的文件 -pass pass:密码 #解密 openssl enc -d -aes-256-cbc -in 要解密的文件 -out 要加密的文件 -pass pass:密码...

  • 基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip

    基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip个人经导师指导并认可通过的高分毕业设计项目，评审分98分。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip基于网络的入侵检测系统

  • 本户型为2层独栋别墅D026-两层-13.14&12.84米-施工图.dwg

    本户型为2层独栋别墅，建筑面积239平方米，占地面积155平米；一层建筑面积155平方米，设有客厅、餐厅、厨房、卧室3间、卫生间1间、杂物间；二层建筑面积84平方米，设有卧室2间、卫生间1间、储藏间、1个大露台。 本户型外观造型别致大方，采光通风良好,色彩明快，整体平面布局紧凑、功能分区合理，房间尺度设计适宜，豪华大气，富有时代气息。

  • Java_带有可选web的开源命令行RatioMaster.zip

    Java_带有可选web的开源命令行RatioMaster

  • 基于MATLAB实现的OFDM经典同步算法之一Park算法仿真，附带Park算法经典文献+代码文档+使用说明文档.rar

    CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 基于MATLAB实现的OFDM经典同步算法之一Park算法仿真，附带Park算法经典文献+代码文档+使用说明文档.rar 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2020b；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细）； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可后台私信博主； 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载，沟通交流，互相学习，共同进步！

  • 基于MATLAB实现的对机械振动信号用三维能量谱进行分析+使用说明文档.rar

    CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 基于MATLAB实现的对机械振动信号用三维能量谱进行分析+使用说明文档.rar 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2020b；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细）； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可后台私信博主； 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载，沟通交流，互相学习，共同进步！

  • grpcio-1.49.0-cp310-cp310-manylinux_2_17_aarch64.whl

    Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

Global site tag (gtag.js) - Google Analytics