Javascript 箭头函数简述

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);

 你可能在其他语言中看到类似的箭头函数，不过在js中是第一次。

用console.log来看一下结果没有任何不同。

 

可以把单个形参括号去除

如果只有一个形参你可以这样写

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

console.log(fullName3); // Wes Bos, Kait Bos, Lux Bos

语法更加精炼短小

 

箭头函数隐式返回

 

那什么是隐式返回呢？

就是没有return 关键字

我们用一行语句写就像下面

const fullNames4 = names.map(name => `${name} bos`);
console.log(fullNames4);   // Wes Bos, Kait Bos, Lux Bos

那我是如何做到的呢？

(1)去掉return

(2)把语句写到一行中

(3)删除{}

当你删除{},这就将 `${name} bos` 作为返回值了。

用console.log再来看一下结果没有任何不同。

 

 

 

 

如果您觉得本文不错，想要给熊二（李明）打赏？

 http://wesbos.com/arrow-functions/