# 四、箭头函数

`Arrows`是使用`=>`语法的函数简写。它们在语法上类似于 C#、Java 和 CoffeeScript 中的胖箭头语法。它们支持表达式主体和返回表达式值的语句块主体。与函数不同，箭头与其周围的代码共享相同的词汇`this`。

以下是一个经典函数在保持相同词法`this`时的样子:

代码清单 70

```js
  var square = (function(num)
  {
    return num * num;
  }).bind(this);

```

现在，我们可以简单地写如下:

代码清单 71

```js
  let square = (num) =>
  {
    return num * num;
  };

```

表达式主体是带有`=>`标记和隐含返回值的单行表达式。

代码清单 72

```js
  let evens = [2, 4, 6, 8, 10];
  let odds = evens.map(v =>
  v + 1);
  let nums = evens.map((v, i) =>
  v + i);

  console.log(odds);
  console.log(nums);

```

运行前面的代码会产生以下结果:

代码清单 73

```js
  [3, 5, 7, 9, 11]
  [2, 5, 8, 11, 14]

```

从示例中可以看出，这种新语法非常简洁，删除了不必要的样板代码。

语句体是允许更复杂逻辑的多行语句。您还可以选择是否从语句中返回值。

代码清单 74

```js
  let fives = [];
  let nums = [1, 2, 5, 15, 25, 32];
  nums.forEach(v => {
    if
  (v % 5 === 0)
      fives.push(v);
  });

  console.log(fives);

```

运行前面的代码会产生以下结果:

代码清单 75

```js
  [5, 15, 25] 

```

有了这个新的胖箭头语法，我们可以安全地访问词汇`this`，而不用担心它会在我们身上发生变化。

让我们看一个例子:

代码清单 76

```js
  let matt = {
    name:
  "Matt",
    friends:
  ["Mark", "Lyle", "Rian"],
    printFriends() {
      this.friends.forEach(f
  =>
        console.log(this.name +
  " knows " + f));
    }
  }
  matt.printFriends();

```

运行前面的代码会产生以下结果:

代码清单 77

```js
  Matt knows Mark
  Matt knows Lyle
  Matt knows Rian 

```

以前，我们必须创建一个单独的`_this` 闭包变量来访问正确的`this`。实际上，当我们的代码被篡改时，这就是自动发生的事情。在将相同的代码片段传输到 ES5 之后，再来看看它:

代码清单 78

```js
  "use strict";

  var matt = {
    name:
  "Matt",
    friends:
  ["Mark", "Lyle", "Rian"],
    printFriends:
  function printFriends() {
      var
  _this = this;

      this.friends.forEach(function (f) {
        return
  console.log(_this.name + " knows " +
  f);
      });
    }
  };
  matt.printFriends();

```

如您所见，在`forEach`函数中为我们创建了一个新变量`_this` 。