前言

这节内容来说一说 ES6标准中新增的一种新的函数：箭头函数（Arrow Function）
其实就是对函数的一种简写

普通函数与箭头函数的转换过程

下面这个例子中的每一步的转化都是箭头函数的一种形式

// 传统匿名函数
(function (a) {
  return a + 100;
});

// 1. 移除“function”，并将箭头放置于参数和函数体起始大括号之间
(a) => {
  return a + 100;
};

// 2. 移除代表函数体的大括号和“return”——返回值是隐含的
(a) => a + 100;

// 3. 移除参数周围的括号
a => a + 100;

步骤如下：

1. 移除function，并将箭头放置于参数和函数体起始大括号之间
2. 移除代表函数体的大括号和return——返回值是隐含的
3. 移除参数周围的括号

当函数只有一个简单参数时，可以省略括号，但如果有多个参数，则括号不能省略

箭头函数写法有多少种

形式1，无参

var test = function () {
  return 100;
}
console.log(test())

带函数块

var test = () => { return 100 }
console.log(test())

不带函数块

var test = () => 100
console.log(test())

形式2，一个参数

有一个参数的情况下进行转换

var test = function (a) {
  return a + 100;
}
console.log(test(100))

在无参的写法上再增加一种参数不带括号的写法

var test = a => a + 100
console.log(test(100))

形式3，多个参数

var test = function (a, b) {
  return a + b;
}
console.log(test(100, 200))

多个参数的情况下不能去掉参数的括号，其他写法和形式2一样

// var test = (a, b)=> { return a + b }
var test = (a, b)=> a + b
console.log(test(100, 200))

形式4，对象字面量

对象字面量是封闭在花括号对（{}）中的一个对象的零个或多个“属性名—值”对的（元素）列表

例如，add 函数返回的是一个对象字面量

function add(x) {
  return {sum: x}
}

console.log(add(2).sum)

这个怎么写呢，按照上面的规则，写成下面的形式，会提示 add() 会返回 undefined

const add = (x) => {sum: x}
// 调用 add() 会返回 undefined！

因为和函数体的{ ... }有语法冲突，要解决这个问题，可以用括号将对象字面量包装起来：

const add = (x) => ({sum: x})