JavaScript的ES6中的箭头函数的详细讲解

平时我们在JavaScript中编写函数都是 function 函数名（）{ 函数体 } 的编写方式来编写函数的，但是在ES6更新后函数有了一种更将简洁的编写方式，那就是箭头函数。

但是箭头函数到底是怎么编写呢？箭头函数的编写规则有是什么呢？

接下来就让我们详细讲解一下箭头函数的编写规则

编写函数箭头函数有三大要素

1. (): 参数
2. =>: 箭头
3. {}: 函数的执行体

那我们就用这三大要素先编写第一个简单的箭头函数foo来和我们的普通函数进行对比一下

箭头函数：

var foo = (num1, num2, num3) => {
  console.log(num1, num2, num3)
}

普通函数：

function foo(num1, num2, num3) {
  console.log(num1, num2, num3)
}

箭头函数的优势在于编写十分灵活而且编写的方式可以被很大的简化，那我们接下来就看一下 箭头函数有一些常见的简写:

简写一: 如果参数只有一个, ()可以省略

nums.forEach(item => {
  console.log(item)
})

简写二: 如果函数执行体只有一行代码, 那么{}也可以省略
强调: 并且它会默认将这行代码的执行结果作为返回值

var nums = [10, 20, 45, 78]
nums.forEach(item => console.log(item))
var newNums = nums.filter(item => item % 2 === 0)
console.log(newNums)

我们可以利用箭头函数默认将这行代码的执行结果作为返回值的特性来进行高阶函数的调用可以大大的简化代码，但是弊端是阶降低了代码的可读性

利用filter/map/reduce等高阶函数进行链式调用，取出数组中的偶数，然后全部乘于100，再求总和

var nums = [10, 20, 45, 78]
var result = nums.filter(item => item % 2 === 0)
                 .map(item => item * 100)
                 .reduce((preValue, item) => preValue + item)
console.log(result)

简写三: 如果一个箭头函数, 只有一行代码, 并且返回一个对象, 这个时候如何编写简写

错误写法:

// var bar = () => {
//   return { name: "why", age: 18 }
// }

因为系统在执行JavaScript代码时会进行语法语意分析，无法识别{}是代表函数体还是对象，导致识别错误，一般会识别成函数体name: “why”, age: 18。所以我们应该在{}外面再加一层（）让系统识别成一个完成的函数语句{ name: “why”, age: 18 }

正确写法:

var bar = () => ({ name: "why", age: 18 })