JavaScript如何使用箭头函数

这篇文章主要讲解了“JavaScript如何使用箭头函数”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript如何使用箭头函数”吧！在ES6中新增了函数的简写方式—-箭头函数，箭头函数的出现不仅简化了大量代码，也让代码看起来更加优雅，同时也解决了this指向问题，下面我们就来详细讲解如何玩转箭头函数。之前的方法

functionfoo1(){}varfoo2=function(name,age){
	console.log("函数体代码"，this,arguments);
console.log(name,age);}

箭头函数完整写法

varfoo3=(name,age)=>{
	console.log("箭头函数的函数体")
console.log(name,age);}

箭头函数遍历数组曾经的写法

varnames=["abc","cba","nba"];names.forEach(function(item)){
	console.log(item);})

箭头函数的写法

names.forEach((item,idx,arr)=>{
console.log(item,idx,arr);
	})

setTimeout(()=>{
	console.log("setTimeout");},3000)

如果箭头函数只有一个函数，那么（）可以省略

name.forEach(item=>{console.log(item);}

filter（）配合箭头函数，可以高效的筛选出符合条件的数字。

varnewNums=nus.filter(item=>{
returnitem%2;})

如果函数体中只有一行执行代码，那么{} 可以省略.并且这行代码的返回值会作为整个函数的返回值，所以不需要加 return

names.forEach(item=>console.log(item));

filter（）函数在只有一行执行，可以直接省略{}

varans=worker.filter(item=>item%2)

如果默认返回值是一个对象，那么这个对象必须加（）注意：在react 的 redux 经常使用。
我们会发现当箭头函数 同时遇到 执行体的大括号和对象的大括号时，箭头函数无法区分

vararrFn=()=>{}//此大括号是执行体

vararrFn=()=>{name:"why"}//此大括号是对象

所以为了区别执行器，必须要给对象加（）

vararrFn=()=>({name:"why"})

map() 方法定义在JS的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数后处理的值。
值得注意的是：map（）函数不会对空数组进行检测。map（）函数不会改变原始数组，它形成的是一个新数组。array.map(function(currentValue, index, arr), thisIndex)参数说明：function（currentValue，index，arr）：必填数组中的每个元素都会执行这个函数。currentValue：必填，表示当前元素的值。index：可选，当前元素的索引也就是第几个数组元素。arr：可选，当前元素属于的数组对象。thisValue：可选，对象作为该执行回调时使用，传递给函数，用作“this”的值。例1：对原数组进行平方后赋值给新数组。

letarry=[1,2,3,4];letnewArray=array.map((item)=>{
returnitem*item;})

也可以化简成下面一行代码。

letnewArray=array.map(item=>item*item)

例2：对原数组的偶数进行平方后赋值给新数组。filter() 用于对数组进行过滤。原理是它创建一个新数组，新数组的元素是通过检查指定数组中符合条件的所有元素。filter把传入的函数依次作用在每一个元素，然后根据返回值是true还是false决定保留还是丢弃元素。Array.filter(function(currentValue, indedx, arr), thisValue)参数说明：function（currentValue，index，arr）：必填数组中的每个元素都会执行这个函数。currentValue：必填，表示当前元素的值。index：可选，当前元素的索引也就是第几个数组元素。arr：可选，当前元素属于的数组对象。thisValue：可选，对象作为该执行回调时使用，传递给函数，用作“this”的值。

letnewArray=array.filter(item=>item%2===0).map(item=>item*item)

例3：对原数组中的偶数下标进行平方后赋值给新数组。

letarray=[1,2,3,4];
letnewArray=array.filter((item,idx)=>idx%2===0).map(item=>item*item)

例4：巧妙利用 arr 参数，给数组去重.

varnewArray=array.filter((item,idx,arr)=>arr.indexOf(item)===idx)

例2：对原数组的偶数进行平方后求累加和。用于遍历数组，可以设置初始值，大大增强了代码的可读性，同时还有一个参数可以做累计计算。array.reduce((pre, cur, index, arr)，init）参数说明：function（(pre, cur, index, arr)）：必填pre: 必填，积累值cur： 必填。当前元素。index： 可选。当前下标。arr： 可选。当前数组。init: 可选。传递给函数的初始值，但传入参数为两个时，init 是累计值 pre的初始值。如果reduce的参数只有一个，那么累计值的初始值是数组的第一个值。如果reduce的参数有两个，那么积累值初始值就是设置好的 参数init初始值。在每一次迭代中，返回的值都作为下一次迭代的 pre累计值。

varans=arr.filter(item=>item%2).map(item=>item*item).reduce((x,y)=>x+y,0);

普通函数中是有this的标识符

functionfoo(){
	console.log("foo",this);}foo()//windowfoo.apply("aaa")//aaa

箭头函数中，压根没有this。

varbar=()=>{console.log("bar",this)}bar()//windowbar.apply("AAA")//window

concat（）方法是用于连接两个或多个数组。

vararr=[1,2,3,4];
vararr2=[7,8,9,10];
varans=[].concat(arr,arr2);
console.log(ans);//输出：(8)[1,2,3,4,7,8,9,10]

因为箭头函数中没有this的标识符，所以当箭头函数内部开始调用this时。JavaScript引擎就从作用域由里到外的找含有this指向的作用域。

varobj={
	name:"obj",
foo:function(){
varbar=()=>{
console.log("bar",this);
}
returnbar;
}}

第一层 bar箭头函数：没有。第二层 function 函数：指向obj。所以例子中的 this 指向obj。

varobj={
	name:"obj",
foo:()=>{
	varbar=()=>{
console.log("bar:",this);
}
retur免费云主机域名nbar;
}}

第一层 bar箭头函数：没有。第二层 foo箭头函数：没有。第三层 全局作用域：指向window。所以例子中的 this 指向window。模拟网络发送请求封装 request 工具函数

functionrequest(url,callback){
	varres=["abc","cba","nba"];
callback(res);}

实际操作的位置早期的写法因为此时传入 request 的function ，就是 request 定义中的 callback（）。
所以 function 中的参数就是 request 定义中的 res 数组，然后赋值给了 此对象中names
但因为 function 是个回调函数的this 的指向是 window，所以需要在外层的函数中，规定一个_this指向当前对象。

var_this=this;

然后 将获取过来的 res 数组 赋值给 _this 中的names

_this.name=[].concat(ans);

varobj={
	names:[],
network:function(){
var_this=this;
request("/names",function(ans){
_this.name=[].concat(ans);
})}

箭头函数的写法因为箭头函数本身是没有 this的，js引擎会由内往外的找 this的指向。
发现 外层的 函数 this指向obj，于是 this 就指向了 obj。

varobj={
	names:[],
network:function(){
request("/names",(ans)=>{
this.name=[].concat(ans);
})}

感谢各位的阅读，以上就是“JavaScript如何使用箭头函数”的内容了，经过本文的学习后，相信大家对JavaScript如何使用箭头函数这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: 基于C#如何实现简易的键盘记录器

本篇内容主要讲解“基于C#如何实现简易的键盘记录器”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“基于C#如何实现简易的键盘记录器”吧!开发工具： Visual Studio 20免费云主机域名13.NET Fram…