Javascript 箭头函数简述

Posted 2020-08-08

ES6 引入箭头函数有三大好处，首先，一个简洁的语法；第二，隐式return，能写成一行；第三，当你执行点击操作的语句不用在一个函数内部了。

访问ES6.io那里有大量的例子可以看一看。

对一个数据添加名称：

const names = [‘Wes‘, ‘Kait‘,‘Lux‘];

我们想添加Bos 到每个数组值的后面。

通常我们会这样做：

const fullNames = names.map(function(name){
   return `${name} Bos`;  
});
console.log(fullNames); // Wes Bos, Kait Bos, Lux Bos

我们在这里用了引号，这是字符串模板，你不用担心后续的章节会介绍。

我们看到names数组的每一项添加了Bos 组成了fullNames  

 Wes Bos, Kait Bos, Lux Bos

接下来看看箭头函数如何重写此句。

 

把它转换为箭头函数

一个箭头函数就是简单的去掉function,并添加  =>这个字符的东东了。

const fullNames = names.map((name) => {
   return `${name} Bos`; 
});

console.log(fullNames);