摘要:还有一个就是,我本身在数组的遍历上,基本都是用循环进行操作,在开始使用了迭代方法之后,我循环用的很少。对数组中每一项运行给定函数。返回该函数会返回的项组成的数组。
前言
数组的迭代方法,这个想必大家都不陌生了,可能刚入门的人暂时还没接触到这个。但是以后的开发中,肯定会用得上的。我自身的一个使用经历就是,如果迭代方法用的适当,不但可以减少代码量,也能使代码可读性更强,性能上的优化也是肯定的了。还有一个就是,我本身在数组的遍历上,基本都是用for循环进行操作,在开始使用了迭代方法之后,我for循环用的很少。如果以后我更加熟练迭代方法的话,for使用会更少,也希望这样能帮助大家学习迭代方法。
1.Mapmap():对数组中每一项运行给定函数。返回每次函数调用的结果组成的数组。
map就是我用的最多的一个了。首页设想以下一个场景,给出一个数组,需求就是给数组的每一项都*2。
for方式
let arr=[1,2,3,4,5,6]; for(let i=0,len=arr.length;imap方式
/*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;imap方式
/*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;imap方式
/*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.Filterfilter():对数组中的每一项运行给定函数。返回该函数会返回true的项组成的数组。
Filter的用法也是很多,还是用上面的数组,但是我现在要拿到已经签到了的球员,不要没签到的球员。
for方式var arr=[]; for(var i=0,len=sporter.length;ifilter方式
/*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;ifilter方式
/*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和SomeEvery和Some为什么要一起写呢,因为这两个方法很像。
every()对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true ;
some()对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true;
还是上面那个sporter数组。可以设想这个场景,运动员进场如果需要每一个球员都必须签到,球队才能进场,实现这个需求就是
for方式var isIn; for(var i=0,len=sporter.length;ievery方式
/*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;isome方式
/*item为当前遍历到的项,和sporter[i]一样*/ var arr=sporter.some(function (item){return item.isHell})es6写法
var arr=sporter.some(item=>{return item.isHell})运行一下,由于上面数组有个运动员签到了,所以返回true,可以进场
4.ForeachforEach()对数组中的每一项运行给定函数,这个方法没有返回值 ;简单点来说,本质上跟for没有区别,只是写法不一样。
还是上面那个sporter数组。只是给每一个数字都加上一个属性sex,值都为‘男’
for方式for(var i=0,len=sporter.length;iforEach方式
/*item为当前遍历到的项,和arr[i]一样*/ var arr=sporter.forEach(function (item){item.sex="男"})es6写法
var arr=sporter.forEach(item=>{item.sex="男"})运行一下
5.Reducereduce()每次只能接受两个参数,我对着两个参数的理解就是,当前结果,和当前序列的下一项。作用效果和原理就是[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;iforEach方式
/*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和findIndexfind:方法返回传入一个测试条件(函数)符合条件的数组第一个元素。
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;i30){ 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;i30){ getItemIndex=i; break; } } findIndex
arr.findIndex(function(val){return val>30})es6写法
arr.findIndex(val=>val>30)运行一下
后续今天的分享就到这里了,关于数组的迭代方法的使用技巧,上面说的是冰山一角,更多也是要靠大家自己去挖掘。以后如果又有发现什么好玩的,实用的,也会第一时间分享给大家。另外,如果觉得这篇文章哪里写错了,或者哪里写得不好,欢迎指出。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/88305.html
摘要:大多数情况下,对一个直接量和一个局部变量数据访问的性能差异是微不足道的。 前端性能优化之 JavaScript 前言 本文为 《高性能 JavaScript》 读书笔记,是利用中午休息时间、下班时间以及周末整理出来的,此书虽有点老旧,但谈论的性能优化话题是每位同学必须理解和掌握的,业务响应速度直接影响用户体验。 一、加载和运行 大多数浏览器使用单进程处理 UI 更新和 JavaScri...
摘要:数组语法功能遍历数组,返回回调返回值组成的新数组,不改变原数组,不会对空数组进行检测语法功能无法,可以用中来停止,不改变原数组语法功能过滤,返回过滤后的数组,不改变原数组,不会对空数组进行检测语法功能有一项返回,则整体为,不改变原数组语法 数组 (array) ES5 * map 语法:[].map(function(item, index, array) {return xxx})功...
阅读 2159·2021-11-18 10:02
阅读 3451·2021-11-15 11:36
阅读 1084·2019-08-30 14:03
阅读 698·2019-08-30 11:08
阅读 2743·2019-08-29 13:20
阅读 3260·2019-08-29 12:34
阅读 1351·2019-08-28 18:30
阅读 1572·2019-08-26 13:34