返回 登录
0

js数组的迭代方法的使用方法

图片描述
数组的迭代方法,这个想必大家都不陌生了,可能刚入门的人暂时还没接触到这个。但是以后的开发中,肯定会用得上的。我自身的一个使用经历就是,如果迭代方法用的适当,不但可以减少代码量,也能使代码可读性更强。还有一个就是,我本身在数组的遍历上,基本都是用for循环进行操作,在开始使用了迭代方法之后,我for循环用的很少。如果以后我更加熟练迭代方法的话,for使用会更少,也希望这样能帮助大家学习迭代方法。
1.Map

map():对数组中每一项运行给定函数。返回每次函数调用的结果组成的函数。

map就是我用的最多的一个了。首页设想以下一个场景,给出一个数组,需求就是给数组的每一项都*2。

for方式

let arr=[1,2,3,4,5,6];
for(let i=0,len=arr.length;i<len;i++){
arr[i]=arr[i]*2
}

map方式

/*item为当前遍历到的项,和arr[i]一样*/
arr=arr.map(function(item){return item*2});

es6写法

arr=arr.map(item=>{item*2});
这个需求比较简单,可能看不出多实用,下面再看一下,给一个对象数组,比如:数组包含一些运动员的信息,记录着运动员的姓名和是否签到的信息,如果哪个球员的签到信息isHell
为空,就把isHell的值设置为’–’

//name:姓名,isHell:是否签到
var sporter=[{
name:'aa',
isHell:null
},{
name:'bb',
isHell:null
},{
name:'bb',
isHell:true
}];

for方式

for(var i=0,len=sporter.length;i<len;i++){
if(!sporter[i].isHell){sporter[i].isHell='--';}
}

map方式

/*item为当前遍历到的项,和arr[i]一样*/
sporter.map(function (item) {
if(!item.isHell){item.isHell='--';}
});

es6写法

sporter.map(item=> {
if(!item.isHell){item.isHell='--';}
});

运行一下,目的达到了
图片描述

map还有一个较常用的场景,也用上面那个数组,但是现在需要每一个球员的名字,不管他是否有签到。
for方式

var arr=[];
for(var i=0,len=sporter.length;i<len;i++){
arr.push(sporter[i].name);
}

map方式

/*item为当前遍历到的项,和arr[i]一样*/
var arr=sporter.map(function (item){return item.name})

es6写法

sporter.map(item=> {itme.name;});
运行结果
图片描述
2.Filter

filter():对数组中的每一项运行给定函数。返回该函数会返回true的项组成的数组。

Filter的用法也是很多,还是用上面的数组,但是我现在要拿到已经签到了的球员,不要没签到的球员。

for方式

var arr=[];
for(var i=0,len=sporter.length;i<len;i++){
if(sporter[i].isHell){
arr.push(sporter[i]);
}
}

filter方式

/*item为当前遍历到的项,和arr[i]一样*/
var arr=sporter.filter(function (item){return item.isHell})

es6写法

var arr=sporter.filter(item=>{return item.isHell})
运行一下
图片描述
数组去重
for方式

var r=[],arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
for(var i=0,len=arr.length;i<len;i++){
if(r.indexOf(arr[i])===-1){
r.push(arr[i]);
}
} 学习交流加群:615496236

filter方式

/*item为当前遍历到的项,和arr[i]一样,index为当前遍历到的项的索引,和i一样,self就是当前数组,和arr一样*/
r=arr.filter(function(item,index,self){
return self.indexOf(item) == index;
}); 学习交流加群:615496236
如果有正在学习前端的伙伴,不知道怎么学习的可以加一下我的前端群615496236,每天都会分享一些企业级的知识和特效源码分享。

es6写法强调文字

var arr=sporter.filter((item,index,self)=>{return self.indexOf(item) == index;})
运行一下
图片描述

评论