箭头函数（Arrow Function）

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

语法

基础语法

(参数1, 参数2, …, 参数N) => { 函数声明 }//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
(参数1, 参数2, …, 参数N) => 表达式（单一）// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

高级语法

//加括号的函数体返回对象字面表达式：
参数=> ({foo: bar})//支持剩余参数和默认参数
(参数1, 参数2, ...rest) => {函数声明}
(参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

优点

简明的语法

举例：将数组中的数字乘2并返回结果

function 函数

const numbers = [1,2,3,4]const double = numbers.map(function(number){return number *2;
});console.log(double);

使用箭头函数：

const number = [1,2,3,4]const double2 = number.map(number => {return number *2;
});console.log(double2);

对于箭头函数中的参数：

没有参数加括号

一个参数可选择

多个参数逗号分隔

const double3 = numbers.map(function(number,i){return `${i}:${number *2}`;
});console.log(double3);

const hello = number.map(() =>{return 'hello';
})console.log(hello);

对于正常的函数，如何更改成为箭头函数？

删掉function 关键字

加上一个 =>

没有参数加括号

一个参数可选择

多个参数逗号分隔

隐式返回

显式返回：通俗来说就是使用 return 关键字进行结果的返回。比如上面的代码。

const double5 = number.map((number) => number *2);
console.log(double5)

对于上面的函数，匿名函数。如果想要调用函数的话，就必须调用命名函数：

function greet(name){console.log(`Hello ${name}`);
}greet('jack');

修改之后：

const greet = name=>{console.log(`Hello ${name}`);}greet('jack');

不绑定this

const Jackyjk = {name : 'Mr.J',hobbies:['sleeping','eating','reading'],printHobbies: function(){this.hobbies.map(function(hobby){console.log(`${this.name} love ${hobby}`);})}
}
Jackyjk.printHobbies();

在Javascript中，this值是在运行的时候进行绑定的，Jackyjk对象调用printHobbies()方法，在方法中this指向的是Jackyjk这个对象。在后面的map方法的回调函数，因为他是独立运行的，不是作为对象的方法调用。此时this指向window或者global(严格模式下为 undefined)

使用箭头函数进行更改：

const Jackyjk = {name : 'Mr.J',hobbies:['sleeping','eating','reading'],printHobbies: function(){this.hobbies.map(hobby => {console.log(`${this.name} love ${hobby}`);})}
}
Jackyjk.printHobbies();

在箭头函数中，this值指向其父作用域。

函数参数默认值

之前复制默认值：

function add(a,b){var a = a || 3;var b = a || 5;return a + b;
}

运行结果：8

function add(a = 3,b = 5){return a + b;
}

注意：对于上面两个参数，如果正常运行，第二个参数可以省略，第一个不能省略（改用undefined）。多个参数同样是如此。

什么时候不适合使用箭头函数？

作为构造函数，需要绑定对象（继续使用默认绑定）

const Person = (name,points) =>{this.name = name;this.points = points;
}const Jack = new Person('Jack',18);
Person.prototype.updatePoints = () =>{this.points ++;console.log(this.points);
}

new 创建 Person实例：

生成一个新的对象

把构造函数中的this值指向新生成的对象

把这个对象绑定它的原型对象

返回这个新生成的对象

箭头函数并不会把this值放在新生成的对象中去，此时只能使用原始函数：

const Person = function(name,points){this.name = name;this.points = points;
}const Jack = new Person('Jack',18);
Person.prototype.updatePoints = () =>{this.points ++;console.log(this.points);
}

上面已经写到，箭头函数this值指向父作用域，即window。当想定义对象方法的时候，使用原始函数(修改如下)：

需要this时（绑定交互事件）

第一部分以及上面的例子中可以看见，对于回调函数，this值永远指向的是父作用域，而这样极易导致指向window或global，绑定对象函数方法，不能使用箭头函数。此时适合用原始函数。

需要使用arguments对象

由于箭头函数中没有arguments属性，所以不能使用：

如何判断是否使用箭头函数？

借用《你不知道的Javascript（下卷）》，P108的框图：

ES6学习（箭头函数详解）相关推荐

【ES6】Generator函数详解
[ES6]Generator函数详解一.Generator函数简介基本概念函数写法 yield关键字介绍二.next方法的参数三.for...of循环四.关于普通throw()与Gener ...
JS中箭头函数详解=
箭头函数表达式的语法比函数表达式短,并且不绑定自己的 this,arguments,super或 new.target.此外,箭头函数总是匿名的.这些函数表达式最适合非方法函数,它们不能用作构造函数. ...
C++学习——memset函数详解
memset是计算机中C/C++语言初始化函数.作用是将某一块内存中的内容全部设置为指定的值, 这个函数通常为新申请的内存做初始化工作. 头文件 <string.h>或 < cstr ...
【ES6】Module模块详解
[ES6]Module模块详解一.Module的由来二.严格模式三.export命令四.import命令查看更多ES6教学文章: 参考文献引言:由于两个JS文件之间相互使用必须通过一个ht ...
【ES6】Promise对象详解
[ES6]Promise对象详解一.Promise对象的含义二.Promise对象的用法三.Promise对象的几个应用[重点] 1.时间延迟函数 2.图片异步加载查看更多ES6教学文章: 参 ...
python3 format函数_Python学习教程：Python3之字符串格式化format函数详解（上）
Python学习教程:Python3之字符串格式化format函数详解(上) 概述在Python3中,字符串格式化操作通过format()方法或者f'string'实现.而相比于老版的字符串格式化方 ...
format函数_Python学习教程：Python3之字符串格式化format函数详解（上）
Python学习教程:Python3之字符串格式化format函数详解(上) 概述在Python3中,字符串格式化操作通过format()方法或者f'string'实现.而相比于老版的字符串格式化方 ...
OpenCV-Python学习之(一)waitKey()函数详解
OpenCV-Python学习之(一)waitKey()函数详解 waitKey()函数详解 : 1.1 waitKey()--这个函数是在一个给定的时间内(单位ms)等待用户按键触发;如果用户没有按 ...
[学习C++ ]C++ STL 全排列函数详解(排列组合与匹配算法)--1
一.概念从n个不同元素中任取m(m≤n)个元素,按照一定的顺序排列起来,叫做从n个不同元素中取出m个元素的一个排列.当m=n时所有的排列情况叫全排列.如果这组数有n个,那么全排列数为n!个. 比如a ...

ES6学习（箭头函数详解）