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;
	});
};

你可能感兴趣的:(rows)