前言：今天分享一个关于循环过滤的知识点。也许你是一个前端新手。菜鸟想到的就是map（工作中喜欢用==）。学过数据结构的朋友一定知道，线性表也和周期有密切关系，包括你出去面试的时候。也许你遇到过这样的问题，map和forEach的区别？有多少种去重方法？说实话，我真的很少用forEach，但是我不满足于现状，我觉得我应该多学学。我是前端挖矿妹子，你准备好了吗？一起发个粗略的文字：我会在代码示例中使用es6中的语言。不太了解的可以看看阮老师的es6。（==我也是一点一点跟着学的。）1.map先说最常用的map。使用map可以轻松获取对象数组中的具体属性值。它返回一个新的数组，数组中的元素是调用函数后原数组元素处理后的值。//品牌a02所有价格加100constclothesArr=[{username:"sunan",haveA02:false,basePrice:30},{username:"fenshuajiang",haveA02:true,basePrice:10},{username:"huixin",haveA02:true,basePrice:20}]//苏南专栏兑换：912594095,公众号:honeyBadger8clothesArr.map(item=>item.haveA02?{...item,basePrice:item.basePrice+100}:item)map()不检查空数组。map()不会改变原始数组。2.filter和map相比，filter也接受一个函数，将接受的函数依次应用到每个元素上，返回值为true和false，true留下，false丢掉！看例子~constfilterArr=[1,2,3,4,5,6,7,8,9,10];//这里我只想要3的倍数constnewArr=filterArr.filter((x)=>x%3==0);console.log(newArr);//(3)[3,6,9]这里注意：filter()不会检测空数组。filter()不会改变原来的数组，所以你需要分配给新的数组。3.forEachforEach()方法用于调用数组的每个元素，并将元素传递给回调函数。forEach方法中的函数回调有三个参数：第一个参数是遍历数组的内容，第二个参数是对应的数组索引，第三个参数是数组本身，数组中有几项，那么传入的匿名回调函数需要执行多次。constforEachArr=[1,2,3,4,5];//计算所有数组的和varsum=0;forEachArr.forEach((value,index,array)=>{sum+=value;});//苏南的专栏通讯：912594095，公众号：honeyBadger8console.log(sum);//15这里注意：forEach()不会对空数组执行回调函数。4、以前觉得forin不常用，现在真的很感谢这个功能，因为最近项目解决了很多问题，尤其是对象取值的时候。首先，让我们谈谈如何将它用于数组。constforInArr=[1,2,3,4,5]for(letindexinforInArr){console.log(index,forInArr[index]);}//01//12//23//34//45使用forin不仅可以方便数组，还可以对可枚举（enumerable）对象进行操作constforInObj={'111':{name:'huixin',size:'m'},'222':{name:'sunan',size:'l'},'333':{name:'fenshuajiang',size:'s'}};//这个时候只想获取值传给后端，不需要键值。for(letindexinforInObj){console.log(index,forInObj[index]);}//111{name:"huixin",size:"m"}//222{name:"sunan",size:"l"}//333{name:"fenshuajiang",size:"s"}这里插入一个问题：给你一个对象，去掉属性值为null,""orundefined的属性letobjs={a:false,b:null,c:undefined,d:''}constdataType=(obj)=>{if(obj===null)返回“Null”；if(obj===undefined)返回“未定义”；返回Object.prototype.toString.call(obj).slice(8,-1);};constfilteredValue=(obj)=>{varparam={};if(obj===null||obj===undefined||obj==="")返回参数；for(varkeyinobj){if(dataType(obj[key])==="Object"){param[key]=filteredValue(obj[key]);}elseif(obj[key]!==null&&obj[key]!==undefined&&obj[key]!==""){//苏楠专栏通讯：912594095,公众号:honeyBadger8param[key]=obj[键];}}returnparam;};filtrateValue(objs);//{a:false}5.forof在es6中新增了一个forof循环，这个用的不多，以后要多用记住，看例子~constforOfArr='huixin';for(letvalueofforOfArr){console.log(value);};//h//u//i//x//i//nfor中总是获取对象的key或者数组，字符串的下标，forof和forEach一样，都是获取直接取值注意：forof不能用于对象6.setSet类似于数组，但是成员的值是唯一的，没有重复值，也没有索引。使用set.size表示伪数组的长度varsetArr=[7,7,7,8,8,8,82,82,839,49,329,8,3,3];//数组去重varset=newSet(setArr);varnewArr=newArray(...set);console.log(newArr);//(7)[7,8,82,839,49,329,3】7.some这个函数，我觉得只是检测数组中是否存在某个元素，满足条件，返回true。如果没有满足条件的元素，则返回false。感觉有点像|特点。varsomeArr=[2,13,18,20];//检查某人是否小于18letoutcome=someArr.some((age)=>{returnage<18})console.log(outcome);//true注意：some()不检查空数组。注意：some()不会改变原始数组。8、每个函数都会检测数组中是否有不满足条件的元素，如果有则返回false。如果所有元素都满足条件，则返回true。感觉有点像&字符。varsomeArr=[2,13,18,20];//检查是否都是未成年人letoutcome=someArr.every((age)=>{returnage<18})console.log(outcome);//false注意：every()不检查空数组。注意：every()不会改变原始数组。9.reduce最后一个，reduce，刚接触前端的时候不懂，现在才知道原来这么迷茫。这个方法有点不同，有4个参数。接收一个作为累加器的函数，数组中的每一个值（从左到右）开始归约，最后计算为一个值。prev：是上次调用回调时返回的结果，每一个call将给prevcur:当前元素索引:当前索引arr:循环数组varreduceArr=[1,2,3,4,5]//求和varstr=reduceArr.reduce((prev,cur,index,arr)=>{returnprev+cur;//南阳的专栏通讯：912594095,公众号:honeyBadger8})console.log(str);//1510.Object.keys(obj)朋友小吉玲又加了一个一个给我的，可以遍历对象constforInObj={'111':{name:'huixin',size:'m'},'222':{name:'sunan',size:'l'},'333':{name:'fenshuajiang',size:'s'}};//苏南专栏通讯：912594095、公众号：honeyBadger8Object.keys(forInObj).map(item=>console.log(item,forInObj[item]));//111{name:"huixin",size:"m"}//222{name:"sunan",size:"l"}//333{name:"fenshuajiang",size:"s》}总结一下，学到了这么多，工作中不一定非要用到，顺手玩玩就好，毕竟每天进步一点点，心里就踏实了，哈哈.我是前端挖坑妹子，每天给自己挖坑的妹子，下期见~如果觉得不错记得关注支持哦~其他vue/react/java/大厂面试题和其他资源免费获取2018年的我~localStorage如何设置过期时间？脱掉程序员格子衫，我是如何月入三万的~localStorage如何设置过期时间？前端好文章总结分享~阿里云产品限时优惠作者：前端挖妹链接：http://susouth.com/通讯：912594095，公众号：honeyBadger8本文为原创，版权归属给作者。商业转载请联系@IT·平头哥联盟获得授权。非商业转载请注明原文链接和出处。
