JavaScript ES6中的简写语法总结与使用技巧(4)

function puzzle() {
 return ()=>{
  console.log(arguments)
 }
}
puzzle('a', 'b', 'c')(1, 2, 3)

答案是a,b,c,箭头函数的特殊性决定其本身没有arguments对象，这里的arguments其实是其父函数puzzle的。

前面我们提到过，箭头函数还可以简写，接下来我们一起看看。

简写的箭头函数

完整的箭头函数是这样的：

var example = (parameters) => {
 // function body
}

简写1：

当只有一个参数时，我们可以省略箭头函数参数两侧的括号：

var double = value => {
 return value * 2
}

简写2：

对只有单行表达式且，该表达式的值为返回值的箭头函数来说，表征函数体的{}，可以省略，return 关键字可以省略，会静默返回该单一表达式的值。

var double = (value) => value * 2

简写3：

上述两种形式可以合并使用，而得到更加简洁的形式

var double = value => value * 2

现在，你肯定学会了箭头函数的基本使用方法，接下来我们再看几个使用示例。

简写箭头函数带来的一些问题

当你的简写箭头函数返回值为一个对象时，你需要用小括号括起你想返回的对象。否则，浏览器会把对象的{}解析为箭头函数函数体的开始和结束标记。

// 正确的使用形式
var objectFactory = () => ({ modular: 'es6' })

下面的代码会报错，箭头函数会把本想返回的对象的花括号解析为函数体，number被解析为label,value解释为没有做任何事情表达式，我们又没有显式使用return,返回值默认是undefined。

[1, 2, 3].map(value => { number: value })
// <- [undefined, undefined, undefined]
当我们返回的对象字面量不止一个属性时，浏览器编译器不能正确解析第二个属性，这时会抛出语法错误。

[1, 2, 3].map(value => { number: value, verified: true })
// <- SyntaxError

解决方案是把返回的对象字面量包裹在小括号中，以助于浏览器正确解析：

[1, 2, 3].map(value => ({ number: value, verified: true }))
/* <- [
 { number: 1, verified: true },
 { number: 2, verified: true },
 { number: 3, verified: true }]
*/

该何时使用箭头函数

其实我们并不应该盲目的在一切地方使用ES6,ES6也不是一定比ES5要好，是否使用主要看其能否改善代码的可读性和可维护性。

箭头函数也并非适用于所有的情况，比如说，对于一个行数很多的复杂函数，使用=>代替function关键字带来的简洁性并不明显。不过不得不说，对于简单函数，箭头函数确实能让我们的代码更简洁。