ES2015入门系列3-箭头函数

syoya 发布于2019-08-20 17:37 / 1321人阅读

摘要：箭头函数是用新的语法书写的匿名函数如等同于下面使用的写法可能一开始无法接受，但慢慢的会发现箭头函数带来的快感不言而喻。作为一个后端人士希望也能支持该语法。

箭头函数(Arrows), 是用新的 => 语法书写的匿名函数, 如:

[1, 2, 3].map(n => n + 1);

等同于下面使用ES5的写法:

[1, 2, 3].map(function(n) {
  return n + 1;
});

可能一开始无法接受，但慢慢的会发现箭头函数带来的快感不言而喻。作为一个PHP后端人士希望PHP也能支持该语法, ?。

一般写法, 如计算两个数字之和, 并返回:

(arg1, arg2) => {
  let arg3 = arg1 + arg2
  return arg3
}

不用写function关键字, 但是上面的写法，也感觉不出来有多少简化，我们来看看几种情况:

如果只有一个参数，可以不用写括号

n => {
  return n + 1
}

等价于

(n) => {
  return n + 1
}

如果函数只有一行执行代码，可以省去花括号，写在一行

n => alert(n)

等价于

n => {
  alert(n)
}

写在一行的时候，也可以省略return关键字

n => n + 1

等价于

n => {
  return n + 1
}

没有参数的时候，则必须用(), 如

() => alert("ES2015 Rocks!");

语法介绍完毕，需要特别强调并指出的是：

和用function关键字命名的函数不同的是，箭头函数体内和它的所在的块区域共享同一个this , 举个例子:

直接在Chrome Console中运行以下代码:

class Zoo {

  constructor(name, animals = []) {
    this.name = name;
    this.animals = animals;
  }

  list() {
    this.animals.map(animal => {
      console.log(this.name + "里有" + animal);
    });
  }

  list2() {
    this.animals.map(function() {
      console.log(this.name + "里有" + animal);
    });
  }

}

let zoo = new Zoo("小红山动物园", ["大象", "猴子", "长颈鹿"]);

zoo.list();
zoo.list2();

以上代码输出：

> 小红山动物园里有大象
> 小红山动物园里有猴子
> 小红山动物园里有长颈鹿
> Uncaught TypeError: Cannot read property "name" of undefined(…)

这就是文档中所说的：

Unlike functions, arrows share the same lexical this as their surrounding code.

相信你也已经掌握箭头函数的用法了吧？欢迎继续浏览下一章节。

GPU云服务器云服务器 es6-系列箭头函数入门系列课程深度学习入门系列课程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83730.html

[ ES6 ] 快速掌握常用 ES6 （一）

摘要：常量变量先说说常量和变量的概念吧，常量是说那种进行一次赋值后不会更改的值，比如说游戏账户的，变量是说赋值后有更改的需求的，比如游戏名，游戏密码。常用实例交换变量的值提取数据解构赋值对提取对象中的数据，尤其有用。本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》学习 20% 的知识完成 80% 的工作关于 ...

ispring 2019-08-23 14:01 评论0 收藏0
2017-06-29 前端日报

摘要：前端日报精选如何在非项目中使用知乎专栏编码规范最常被遗忘的性能优化浏览器缓存个人文章译统一样式语言掘金新的开发者提及最多的个视频众成翻译中文第期在中使用译统一样式语言掘金前端现状答题救不了前端新人相学长怼前端岁以 2017-06-29 前端日报精选如何在非 React 项目中使用 Redux - 知乎专栏Javascript编码规范 - Clearlove - SegmentFau...

gaosboy 2019-08-20 17:37 评论0 收藏0
babel入门

摘要：为了方便，团队将一些集合在一起，并称之为。先看一下直观体验源代码配置编译后的代码通过对比可以看出，第二种方案直接从引入，避免自己定义，从而减少代码的体积。 Babel Babel 是一个 JavaScript 编译器，它可以将ES6+语法编译为浏览器支持的ES5语法。要学好babel必须先理解相关的概念，但是你刚起步就去扣这些细节的话，很可能因为babel一些复杂而模糊的概念打击你的信...

pkwenda 2019-08-22 16:40 评论0 收藏0
探索ES2015：箭头函数（Arrow Functions）

摘要：注意箭头函数有几个使用注意点不可以使用对象，该对象在函数体内不存在。不可以当作构造函数，也就是说，不可以使用命令，否则会抛出一个错误。不可以使用命令，因此箭头函数不能用作函数。前言在JavaScript的世界中函数被誉为一等公民，每当我们需要在JS定义一个新的函数，我们都会毫不犹豫的function() {}，也许我们可以开始换一种方式来定义一个函数，也就是本文的主角箭头函数，一个...

pkwenda 2019-08-19 18:02 评论0 收藏0
ES6入门到进阶（一）：let、解构赋值、字符串模板、函数

摘要：注意问题，不在是运行时所在的对象箭头函数里面没有用箭头函数不能当构造函数下一篇入门到进阶二循环数组对象参考视频资料经典入门到进阶一、简介 ES6 -> ECMA 标准 ES6 -> 2015年6月 ES6.0 每年6月份，发布一个版本 ES6环境: webpack3.x Traceur 二、let、const 2.1 关于定义(声明)变量 var a=12; ...

WalkerXu 2019-08-26 11:47 评论0 收藏0