1 基本用法

ES6新增了箭头函数,简化了函数声明过程。

var f = value => value;//等同于下面函数var f = function (value) {  return value;};

如果不需要要参数或者多个参数,使用圆括号代表参数部分。如果箭头函数的代码块部分多于一条语句,需要使用大括号,并使用return返回。如果直接返回一个对象,必须在对象外面加括号。

var f = {} => 1;var sum = (num1, num2) => {   return num1 + num2;};//直接返回一个对象var getName = name => ({ name: 'jack' });

箭头函数可以与变量解构结合使用。

let person = ({ name, age }) => name + '今年' + age;let obj = { name: '小王', age: 25 };person(obj); // "小王今年25"

箭头函数可以使得表达更加简洁。

let arr = [1, 3, 4, 2, 5];var result = value => value.sort((a, b) => a - b);result(arr); // [1, 2, 3, 4, 5]

2 this指向

箭头函数的this指向定义时所在对象,而不是使用时所在的对象。因此,在箭头函数中this对象的指向是固定的。

function foo() {  setTimeout(() => {    console.log('id:', this.id);    }, 100);}var id = 35;foo.call({ id: 55}); // id: 55

上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义在foo函数生成时才生效,而它真正执行要等到100ms后,如果是普通函数,执行时this指向全局对象window,这时应该输出35。但是箭头函数的this总是指向函数定义生效时所在的对象(本例是{id:42}),所以最后输出42。

箭头函数的this指向固化,实际原因是箭头函数根本没有自己的this,所以箭头函数内的this就是外层代码块的this。需要注意一点,因为没有this,所以不能用作构造函数,也不能使用call()、apply()、bind()这些方法改变this指向。

function foo() {  setTimeout(() => {    console.log('id', this.id);  }, 100);}//等同于ES5版本function foo() {  var _this = this;    setTimeout((function () {    console.log('id', _this.id);  }, 100);}

上面的代码中,转换后ES5版本清楚的说明了箭头函数里面根本没有自己的this,而是调用外层的this。

3 箭头函数的嵌套

箭头函数内部还可以再使用箭头函数。

let insert = (value) => ({into: (array) => ({after: (afterValue) => {  array.splice(array.indexOf(afterValue) + 1, 0, value);  return array;}})});insert(2).into([1, 3]).after(1); // [1, 2, 3]

ps ...参考资料《ES6标准入门》(第三版)