ES6学习（2）——arrows箭头函数

Arrows => 箭头函数

箭头函数，若有了解过coffeeScript的同学，或许对此印象深刻，因为它可以让语法省略不少，特别是对于回调函数，会让代码更清晰简洁。

expression

让我们来写一个最简单的arrows。

var sum = (a, b) => a + b; //此为expression
------编译后-------
var sum = function (a, b) {

return a + b;
};

从上面的代码，可以看到，大致是差不多的，我们把function变成了=>,然后将arguments写在括号里（若参数只有一个，则不需要括号。但没有参数，还是需要一个空括号的，切记）。还有要注意这样的expression写法，是仅仅支持单行且自动生成return的。

statement

这次我们写一个带有回调函数的arrows。

numbers.forEach(num => {
	if(num % 5 === 0){
		fiveTimesArr.push(num);
	}
})
------编译后------
numbers.forEach(function (num) {
	if (num % 5 === 0) {
		fiveTimesArr.push(num);
	}
});

可以看到，编译后是不存在return的,若需要返回这个数组需要手动添加。

Lexical this

最后来看看，最酷炫的this，我们看一下在arrows里this的表现。

var obj = {
	key1: 'value1',
	key2: [1, 2, 3, 4, 5],
	func() {
		this.key2.forEach(item =>console.log(this.key1));
	}
}
------编译后------
var obj = {
	key1: "value1",
	key2: [1, 2, 3, 4, 5],
	func: function func() {
		var _this = this;

		this.key2.forEach(function (item) {
			return console.log(_this.key1);
		});
	}
};

可以看到，在forEach函数里，this自动绑定为obj中的this，这个特性，可以让我们免于非常多的烦恼。当然如果我们确实是需要回调中的this,则可以不使用arrows。直接使用我们最熟悉的原生函数即可。

最后在看一个例子来感受arrows带来的爽快的编程体验吧。

var square = arr =>
	arr.map(num => num * num);
------编译后------
var square = function (arr) {
	return arr.map(function (num) {
		return num * num;
	});
};