专栏首页守候书阁js数组操作--使用迭代方法替代for循环

js数组操作--使用迭代方法替代for循环

前言

数组的迭代方法,这个想必大家都不陌生了,可能刚入门的人暂时还没接触到这个。但是以后的开发中,肯定会用得上的。我自身的一个使用经历就是,如果迭代方法用的适当,不但可以减少代码量,也能使代码可读性更强,性能上的优化也是肯定的了。还有一个就是,我本身在数组的遍历上,基本都是用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=>{return item*2});
//或者
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=> {return item.name;});
//或者
sporter.map(item=>item.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})
//或者
var arr=sporter.filter(item=>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]);
    }
}

filter方式

/*item为当前遍历到的项,和arr[i]一样,index为当前遍历到的项的索引,和i一样,self就是当前数组,和arr一样*/
r=arr.filter(function(item,index,self){
    return self.indexOf(item) == index;
});

es6写法

var arr=sporter.filter((item,index,self)=>{return self.indexOf(item) == index;})

运行一下

3.Every和Some

Every和Some为什么要一起写呢,因为这两个方法很像。 every()对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true ; some()对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true; 还是上面那个sporter数组。可以设想这个场景,运动员进场如果需要每一个球员都必须签到,球队才能进场,实现这个需求就是 for方式

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

every方式

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

es6写法

var arr=sporter.every(item=>{return item.isHell})
//或者
var arr=sporter.every(item=>item.isHell)

运行一下,由于上面数组还有两个运动员没签到,所以返回false,暂时也不能进场

另一个场景,运动员进场只需要球队任意一个运动员签到,球队就能进场,实现这个需求就是

for方式

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

some方式

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

es6写法

var arr=sporter.some(item=>{return item.isHell})

运行一下,由于上面数组有个运动员签到了,所以返回true,可以进场

4.Foreach

forEach()对数组中的每一项运行给定函数,这个方法没有返回值 ;简单点来说,本质上跟for没有区别,只是写法不一样。 还是上面那个sporter数组。只是给每一个数字都加上一个属性sex,值都为‘男’ for方式

for(var i=0,len=sporter.length;i<len;i++){
    sporter[i].sex='男'
}

forEach方式

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

es6写法

var arr=sporter.forEach(item=>{item.sex='男'})

运行一下

5.Reduce

reduce()每次只能接受两个参数,我对着两个参数的理解就是,当前结果,和当前序列的下一项。作用效果和原理就是[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)。 这个方法一般用在累计累加上,实用技巧暂时还没发现。比如,数字数组求和,字符串数组连接上。 数字数组求和

for方式

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

forEach方式

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

es6写法

sum=arr.reduce((a,b)=>{return a+b});

运行一下

字符串数组连接,同样的写法,只是数组和结果不一样

 var arr=['字','符','串','数','组','连','接'];
 var sum=arr.reduce((a,b)=>{return a+b});

6.find和findIndex

find:方法返回传入一个测试条件(函数)符合条件的数组第一个元素。

findIndex:方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

当数组中的元素在测试条件时返回true时, find和findIndex返回符合条件的元素或者元素的索引位置,之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1。

比如有一个需求,从[11,22,33,44,55,66]这个数组里面,找出第一个大于30的元素。

for方式

var getItem,arr=[11,22,33,44,55,66];
for(var i=0,len=arr.length;i<len;i++){
    if(arr[i]>30){
        getItem=arr[i];
        break;
    }
}

find

arr.find(function(val){return val>30})

es6写法

arr.find(val=>val>30)

运行一下

比如有一个需求,从[11,22,33,44,55,66]这个数组里面,找出第一个大于30的元素的位置。

for方式

var getItemIndex,arr=[11,22,33,44,55,66];
for(var i=0,len=arr.length;i<len;i++){
    if(arr[i]>30){
        getItemIndex=i;
        break;
    }
}

findIndex

arr.findIndex(function(val){return val>30})

es6写法

arr.findIndex(val=>val>30)

运行一下

后续

今天的分享就到这里了,关于数组的迭代方法的使用技巧,上面说的是冰山一角,更多也是要靠大家自己去挖掘。以后如果又有发现什么好玩的,实用的,也会第一时间分享给大家。另外,如果觉得这篇文章哪里写错了,或者哪里写得不好,欢迎指出。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [探索]在开发中尽量提高代码的复用性

    相信很多人和我一样,在开发项目的时候,因为项目赶,或者一时没想到等原因。频繁使用 ctrl+c 和 ctrl+v ,导致代码很多都是重复的。这几天,也看了自己以...

    守候i
  • javascript打怪升级--把业务逻辑当练习题做

    开发项目和出没社区有一段时间了,会遇上一些比较有印象业务需求。这些业务需求,可能是自己开发项目遇上的,可能是在社区看到的业务需求,或者其他情况接触到的需求,但是...

    守候i
  • [举个栗子]增加组件通用性的几个点

    最近在做项目的时候,看到有两个功能一样,但是交互,样式不一样的需求,为了图方便维护,就封装了组件,发现一个看似简单的组件,如果要封装得通用些,要考虑的东西其实也...

    守候i
  • 【C#】使用IExtenderProvider为控件添加扩展属性,像ToolTip那样

    - 文中的“控件”一词是广义上的说法,泛指包括ToolStripItem、MenuItem在内单个界面元素,并不特指继承自Control类的狭义控件

    AhDung
  • C语言实现九九乘法表 | 源码+注释

    解题思路:这个问题的算法很简单,就是两个for循环的嵌套,三角形的样式就是多了一些空格。

    小林C语言
  • javascript打怪升级--把业务逻辑当练习题做

    开发项目和出没社区有一段时间了,会遇上一些比较有印象业务需求。这些业务需求,可能是自己开发项目遇上的,可能是在社区看到的业务需求,或者其他情况接触到的需求,但是...

    守候i
  • JavaScript 打怪升级 —— 把业务逻辑当练习题做

    开发项目和出没社区有一段时间了,会遇上一些比较有印象业务需求。这些业务需求,可能是自己开发项目遇上的,可能是在社区看到的业务需求,或者其他情况接触到的需求,但是...

    IT派
  • 怎样在Android上实现一个iOS多任务列表效果

    纵观Android标准的控件库,能想到的就只有ViewPager比较合适,其首先满足第1点,ViewPager又是直接使用Adapter来管理数据,然后通过Fr...

    帅气的程序员
  • 嵌套的for循环,到底对哪个执行pipeline更好

    嵌套的for循环在算法建模时经常遇到,那么采用Vitis HLS进行综合时,到底是对外层for循环还是内层for循环执行pipeline更好呢?我们来看一个简单...

    Lauren的FPGA
  • 微信config:invalid signature

    官网关于签名生成的规则:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的...

    Rattenking

扫码关注云+社区

领取腾讯云代金券