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

0顶
0踩

Web前端

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

2015-07-09 15:22 by 副主编 mengyidan1988 评论(0) 有4361人浏览
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）.在当前目前生成压缩文件：...

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

  • 基于OpenGL的C语言的魔方项目.zip

    C语言是一种广泛使用的编程语言，它具有高效、灵活、可移植性强等特点，被广泛应用于操作系统、嵌入式系统、数据库、编译器等领域的开发。C语言的基本语法包括变量、数据类型、运算符、控制结构（如if语句、循环语句等）、函数、指针等。在编写C程序时，需要注意变量的声明和定义、指针的使用、内存的分配与释放等问题。C语言中常用的数据结构包括： 1. 数组：一种存储同类型数据的结构，可以进行索引访问和修改。 2. 链表：一种存储不同类型数据的结构，每个节点包含数据和指向下一个节点的指针。 3. 栈：一种后进先出（LIFO）的数据结构，可以通过压入（push）和弹出（pop）操作进行数据的存储和取出。 4. 队列：一种先进先出（FIFO）的数据结构，可以通过入队（enqueue）和出队（dequeue）操作进行数据的存储和取出。 5. 树：一种存储具有父子关系的数据结构，可以通过中序遍历、前序遍历和后序遍历等方式进行数据的访问和修改。 6. 图：一种存储具有节点和边关系的数据结构，可以通过广度优先搜索、深度优先搜索等方式进行数据的访问和修改。 这些数据结构在C语言中都有相应的实现方式，可以应用于各种不同的场景。C语言中的各种数据结构都有其优缺点，下面列举一些常见的数据结构的优缺点： 数组： 优点：访问和修改元素的速度非常快，适用于需要频繁读取和修改数据的场合。 缺点：数组的长度是固定的，不适合存储大小不固定的动态数据，另外数组在内存中是连续分配的，当数组较大时可能会导致内存碎片化。 链表： 优点：可以方便地插入和删除元素，适用于需要频繁插入和删除数据的场合。 缺点：访问和修改元素的速度相对较慢，因为需要遍历链表找到指定的节点。 栈： 优点：后进先出（LIFO）的特性使得栈在处理递归和括号匹配等问题时非常方便。 缺点：栈的空间有限，当数据量较大时可能会导致栈溢出。 队列： 优点：先进先出（FIFO）的特性使得

  • QT-qtablewidget表头添加复选框QHeaderView

    在 Qt 框架中，要在 QTableWidget的表头中添加复选框，可以通过继承 QHeaderView 并重写 paintSection 方法来实现。 介绍一种继承 QHeaderView的方法分别实现QTableWidget中添加复选框，可全选/全不选/部分选。

  • 分段划线测量表格通用版.doc

    分段划线测量表格通用版.doc

  • 扫雷小游戏(JAVA SE).zip

    该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。

  • 啊哈算法哈磊基于队列的优化Bellman-ford算法搜索单源最短路径-Java实现

    本资源源自《啊哈算法》的高级算法实践，专注于讲解基于队列优化的Bellman-Ford算法在单源最短路径问题上的应用，并提供了Java语言的实现代码。哈磊老师以其独特的教学视角，不仅详细解析了传统Bellman-Ford算法的原理及其在处理含有负权边图中的优势，还深入介绍了如何通过队列优化（通常指SPFA算法）来加速这一过程，减少不必要的松弛操作，提高算法效率。 Java实现部分，代码实现清晰，注释详尽，从初始化距离数组、设置源节点开始，逐步展示如何维护一个队列来记录待检查的顶点，并通过队列进行有效的顶点遍历和松弛操作。本资源通过实例演示了如何高效地更新路径长度，检测负权环，并最终确定从源点到图中所有其他顶点的最短路径。 这份资源特别适合对图算法有深入学习需求的学生、工程师以及算法爱好者，尤其是那些关注算法性能优化和实际应用的人士。通过学习这份资源，你不仅能掌握Bellman-Ford算法的核心逻辑，还将理解如何通过队列优化策略提升算法的执行效率，为解决复杂的网络最短路径问题提供有力工具。在算法学习和软件开发的道路上，这将是一块宝贵的垫脚石，助你攀登更高的算法高峰。

  • 基于一阶倒立摆线性二次型最优控制

    基于一阶倒立摆线性二次型最优控制

Global site tag (gtag.js) - Google Analytics