ES6之箭头函数

思维导图

一、语法

(参数1, 参数2, ... 参数n) => { 函数体 }

我们来看看具体实例：

// 箭头函数
var add = (n1, n2) => {
   console.log(n1 + n2);
};

相当于：

// 普通函数
var add = function(n1, n2){
   console.log(n1 + n2);
};

1. 只有一个参数时可简写

如果函数参数只有一个的话，我们可以把参数外的括号省略，简写成下面这样：

// 箭头函数
var add = n1 => {
   console.log(n1 + 1);
};

相当于：

// 普通函数
var add = function(n1){
   console.log(n1 + 1);
};

看起来更简洁了是不是？

2. 只有一个返回语句时可简写

还有一种情况，当函数体中只有一条函数返回语句时，我们可以把函数体外的花括号及return关键字给省略，例如：

// 箭头函数
var add = n1 => n1 + 1;

相当于：

// 普通函数
var add = function(n1){
   return n1 + 1;
};

这应该是声明带参函数最简洁的方式了，可是太简洁有时候也可能会带来一些“麻烦”。我们来看看下面的例子：

// 普通函数
var foo = function(){
  return {
    text: '欢迎关注微信公众号前端微站！'
  };
};

如果按照上面最简洁的箭头函数写法，理论上应该可以写成下面这样：

// 箭头函数
var foo = () => {   // 错误写法，这里不是对象，而是函数体
   text: '欢迎关注微信公众号前端微站！'
};

可是这样写浏览器可不认账，它会把对象的花括号看成是函数体外的花括号来解析，这样函数执行就不会返回你想要的结果了。

那这样的问题如何解决呢？方法有以下两种：

① 保留花括号 + return的写法
以上问题产生无非是写法过于简介造成的，那么我们可以像下面这样写就没问题了。

var foo = () => {
  return {
    text: '欢迎关注微信公众号前端微站！'
  };
};

② 使用小括号包裹返回对象值

想继续偷懒还是有办法的，我们照样可以省略函数体花括号和关键字return，但是需要外面加个“保护层”，如下：

var foo = () => ({
  text: '欢迎关注微信公众号前端微站！'
});

二、特点

虽说箭头函数是普通函数的简洁写法，但是它还是有自己的独特个性的，实际使用中还需特别留意它们之间的区别。

1. 无arguments对象