当你还是ES6或React初学者的时候，可能你会有这样的困惑？看到代码中出现各式各样的箭头符号，和其附带的时有时无的圆括号和花括号就会晕圈。我相信你可能见过如下这些类型的箭头函数，你是否完全掌握和理解它们的写法要领和区别呢。
() => { statements }
（parameter） => { statement }
parameter => { statement }
parameter => statement
(param1, param2, ...) => { statements }
(param1, param2, ...) => statement
本文就来说一下ES6中这个灵活多变的箭头函数。
首先，对比一下ES5和ES6函数的写法。
ES5：
const name = function(parameters) { statements }
ES6（标准箭头函数形式）:
const name = (parameters) => { statements }
以上这种标准的箭头函数形式是我们常见的，下面我们来讲几种常见的简化模式。
1. 无参数模式；
() => { statements }
这样的箭头函数直接返回statement的内容。
2. 单变量模式；
（parameter）=> { statement }
如果你的函数是单一变量的，上面这种写法是常见的标准形式。
但在ES6中，允许其去掉变量的圆括号，如下：
parameter => { statement }
请注意，只有单一变量时，可以去掉圆括号，无或多参数都需要保留圆括号。
举个栗子：
const double = (a) => { return a * 2 }
// 等效于下面去掉的写法
const double = a => { a * 2; }
3. 多变量模式；
(param1, param2, ...) => { statements }
注意，如果你的函数有2+个变量，这是变量前后的圆括号是必须的。
再举个栗子：
const sum = (a, b, c) => { return a + b +c; } (正确写法)
const sum = a, b, c => { return a + b +c; } (错误写法)
4. 关于箭头函数的返回值
箭头函数还自带了一个简化的语法形式，容易被人忽视。这就是如果返回值只有一行代码时，可以去掉花括号。第三颗栗子如下：
const double = (a) =>{ return a * 2; }
// 上面的代码可以简写如下
const double = a => a * 2;
总结：
箭头函数作为ES6重要的特性给我们带来了很多简化代码的方便特性，但是因为其灵活多变的语法特点也给我们带来了一些理解和使用上的疑惑。在使用和阅读代码时我们应该注意到变量的个数和返回值的代码行数，以免造成困惑和错误。
小练习（简化以下代码）：
1. const sum = function(a, b, c) { return a + b + c；}
2. const square = function(d) { return d ** 2 }
3. const sayHi = function() { console.log('Hi'); }
.
.
.
.
.
.
参考答案：
1. const sum = ( a, b, c ) => a + b + c;
2. const square = d => d ** 2;
3. const sayHi = () => { console.log('Hi'); }
网友评论