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

0顶
0踩

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

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脚本是维护Linux系统的一个必不可少的工具，简单、便捷、可以执行强。但是shell脚本内会存储一些隐私信息（如系统账号、密码，应用程序账号、密码，IP，数据存放路径等等），以明文的形式存放，会造成信息泄露。因此有必要对脚本进行加密，以加强文件的安全性。

Shell文件加解密

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

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

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

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...

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

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

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:密码...

javaee电子商城系统课程设计样本.doc

scratch少儿编程逻辑思维游戏源码-糖果大爆险.zip

spring-boot-2.7.2.jar中文-英文对照文档.zip

# 压缩文件中包含：中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法：解压最外层zip，再解压其中的zip包，双击【index.html】文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码等。 # 温馨提示：（1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）；（2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；

spring-boot-1.3.6.RELEASE.jar中文-英文对照文档.zip

GIS安装施工综合方案.doc

0顶0踩