箭头函数的详细讲解

zayyo
95 阅读3分钟

箭头函数

平时我们在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 })

写在最后

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12 天，点击查看活动详情

avatar
文章
阅读
粉丝