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