JavaScript箭头函数介绍

ES6引入了箭头函数。箭头函数主要有三个有点：

1. 更简洁的语法
2. 隐式return
3. 当在一个函数中使用箭头函数的时候并不会重新绑定this的值。

简单使用

例如有下面一个数组：

const names = ['张三', '李四', '王五'];

我们想给这个数组的每个元素都加上相同的前缀，此时我们会这样做：

const fullNames = names.map(function(name){
  return `前端-${name}`;
});
console.log(fullNames); //['前端-张三', '前端-李四', '前端-王五']

如果想要用箭头函数重构

const fullNames2 = names.map((name) => {
  return `前端-${name}`;
});
console.log(fullNames2);//['前端-张三', '前端-李四', '前端-王五']

单个参数去掉括号

还是上面的例子，因为我们只传了一个name参数，那么我们可以直接去掉括号：

const fullNames3 = names.map(name => {
  return `前端-${name}`;
});
console.log(fullNames3); //['前端-张三', '前端-李四', '前端-王五']

隐式return

在普通函数中，我们使用return 来返回值，但是有很多函数通常是单行函数，上面的例子就是，只有一个 return 前端-${name};，在普通函数我们必须使用return，但是在箭头函数则不需要：

const fullNames4 = names.map(name =>  return `前端-${name}`;);
console.log(fullNames4);  //['前端-张三', '前端-李四', '前端-王五']

无参数箭头函数

上面的几个例子，我们都进行了传参，但是在日常的开发中，我们并不需要传参。

const fullNames5 = names.map(() => `前端`);
console.log(fullNames5); ['前端', '前端', '前端']

我们还会看到另一种写法：

names.map(_ => `前端``);

这种其实也是定义了一个变量，这个变量名叫做：_,我们称之为一次性变量

箭头函数始终是匿名函数

什么是匿名函数，什么是命名函数？

命名函数：

function sayMyName(name) {
  console.log(`搞前端的 ${name}`);
}

使用命名函数的好处是，你可以通过堆栈，快速找到出错的具体位置。

但是使用箭头函数，你永远无法给箭头函数一个名字。但是，你可以将箭头函数赋值给一个变量。

const sayMyName = (name) => {console.log(`搞前端的 ${name}`);}