摘要:将品牌的标价全部加苏南的专栏交流公众号不会对空数组进行检测。方法用于调用数组的每个元素,并将元素传递给回调函数。
前言:
今天我想分享一个有关于循环筛选的知识点,也许是前端小白的你首先想到的是用for循环做筛选,但我这种小菜鸟想到的就是map(工作中很喜欢用= =),学过数据结构的小伙伴也肯定知道,线性表这些跟循环也息息相关,包括你出去面试的时候或许你遇到过这样的问题,map和forEach的区别?去重的几种方式?说实话,forEach我真的很少用,但不满足于现状的我,觉得应该多学习几种。我是前端挖坑妹,准备好了么?一起粗发~
正文: 在代码示例中我会用到es6中的语言,如果你还不是很了解,你可以看看阮老师的es6.(= =我也是一点一点跟着看的。)
先说一下最常用的map.利用map方便获得对象数组中的特定属性值们.它返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
//将a02品牌的标价全部加100 const clothesArr=[ {username:"sunan",haveA02:false,basePrice:30}, {username:"fenshuajiang",haveA02:true,basePrice:10}, {username:"huixin",haveA02:true,basePrice:20} ]//苏南的专栏 交流:912594095、公众号:honeyBadger8 clothesArr.map( item=>item.haveA02?{...item,basePrice:item.basePrice+100}:item )
map() 不会对空数组进行检测。
map() 不会改变原始数组。
filter和map相比,它也接受一个函数,并把接受的函数依次作用于每个元素,返回值为true和false,true留下,false扔掉!看看例子~
const filterArr = [1,2,3,4,5,6,7,8,9,10];//这里我只想要3的倍数 const newArr = filterArr.filter((x) => x % 3 == 0); console.log(newArr);//(3) [3, 6, 9]
这里需要注意:
filter() 不会对空数组进行检测。
filter() 不会改变原始数组,所以你需要赋值到新数组上。
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身,数组中有几项,那么传递进去的匿名回调函数就需要执行几次.
const forEachArr=[1,2,3,4,5];//计算所有数组的和 var sum=0; forEachArr.forEach((value,index,array)=>{ sum+=value; });//苏南的专栏 交流:912594095、公众号:honeyBadger8 console.log(sum);//15
这里需要注意:
forEach() 对于空数组是不会执行回调函数的。
以前觉得这个不常用,但现在真的很感谢有这个函数,因为最近项目中解决了很多问题,尤其是对象拿value值的时候,先来说说对数组的时候怎么用。
const forInArr=[1,2,3,4,5] for(let index in forInArr){ console.log(index,forInArr[index]); } //0 1 //1 2 //2 3 //3 4 //4 5
用for in不仅可以对数组便利,也可以对enumerable(可枚举)对象操作
const forInObj={ "111":{name:"huixin",size:"m"}, "222":{name:"sunan",size:"l"}, "333":{name:"fenshuajiang",size:"s"} };//这个时候我只想取到value值传给后端,key值不要。 for(let index in forInObj){ console.log(index,forInObj[index]); } //111 {name: "huixin", size: "m"} //222 {name: "sunan", size: "l"} //333 {name: "fenshuajiang", size: "s"}
在这里插播一个问题:给你一个对象,去掉里面属性值为null、""或者undefined的属性
let objs={ a:false, b:null, c:undefined, d:"" } const dataType=(obj)=>{ if (obj===null) return "Null"; if (obj===undefined) return "Undefined"; return Object.prototype.toString.call(obj).slice(8,-1); }; const filtrateValue=(obj)=>{ var param = {}; if ( obj === null || obj === undefined || obj === "" ) return param; for ( var key in obj ){ if ( dataType(obj[key]) === "Object" ){ param[key] = filtrateValue(obj[key]); }else if( obj[key] !== null && obj[key] !== undefined && obj[key] !== "" ){//苏南的专栏 交流:912594095、公众号:honeyBadger8 param[key] = obj[key]; } } return param; }; filtrateValue(objs); //{a: false}
在es6 中新增了一个 for of 循环,这个还没怎么用过,以后要多用才能记得住,看看例子~
const forOfArr="huixin"; for(let value of forOfArr) { console.log(value); }; //h //u //i //x //i //n
for in总是得到对像的key或数组,字符串的下标,而for of和forEach一样,是直接得到值
注意:for of不能对对象用
Set类似于数组,但是成员的值都是唯一的,没有重复的值,也没有索引。用set.size表示伪数组长度
var setArr= [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3];//数组去重 var set = new Set(setArr); var newArr = new Array(...set); console.log(newArr);//(7) [7, 8, 82, 839, 49, 329, 3]
这个函数,我觉得只是检测数组中是否有某个元素,符合条件,符合返回true。如果没有满足条件的元素,则返回false。感觉有点像|字符。
var someArr = [2, 13, 18, 20];//检测是否有人小于18岁 let outcome=someArr.some( (age)=>{ return age<18}) console.log(outcome);//true
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
这个函数,检测数组中是否有某个元素,不符合条件,有一个为false,则返回false。如果都满足条件的元素,则返回true。感觉有点像&字符。
var someArr = [2, 13, 18, 20];//检测是否都是未成年 let outcome=someArr.every((age)=>{ return age<18}) console.log(outcome);//false
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。
最后一个,reduce,刚接触前端的时候,我也不明白,现在到是知道那么一丢丢了。这个方法有点不同,4个参数。接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
prev:它是上一次调用回调时返回的结果,每次调用的结果都会给prev
cur:当前的元素
index:当前的索引
arr:循环的数组
var reduceArr = [1,2,3,4,5]//求和 var str = reduceArr.reduce((prev,cur,index,arr)=>{ return prev + cur ;//苏南的专栏 交流:912594095、公众号:honeyBadger8 }) console.log(str);//15
10.Object.keys(obj)
朋友小机灵又帮我添加了一个,可以遍历对象
const forInObj={ "111":{name:"huixin",size:"m"}, "222":{name:"sunan",size:"l"}, "333":{name:"fenshuajiang",size:"s"} };//苏南的专栏 交流:912594095、公众号:honeyBadger8 Object.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·平头哥联盟获得授权,非商业转载请注明原链接及出处。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53540.html
摘要:将品牌的标价全部加苏南的专栏交流公众号不会对空数组进行检测。方法用于调用数组的每个元素,并将元素传递给回调函数。 showImg(https://segmentfault.com/img/bVblSSO?w=1008&h=298); 前言: 今天我想分享一个有关于循环筛选的知识点,也许是前端小白的你首先想到的是用for循环做筛选,但我这种小菜鸟想到的就是map(工作中很喜欢...
摘要:闭包面试题解由于作用域链机制的影响,闭包只能取得内部函数的最后一个值,这引起的一个副作用就是如果内部函数在一个循环中,那么变量的值始终为最后一个值。 (关注福利,关注本公众号回复[资料]领取优质前端视频,包括Vue、React、Node源码和实战、面试指导) 本周正式开始前端进阶的第二期,本周的主题是作用域闭包,今天是第8天。 本计划一共28期,每期重点攻克一个面试重难点,如果你还不了...
摘要:进阶期理解中的执行上下文和执行栈进阶期深入之执行上下文栈和变量对象但是今天补充一个知识点某些情况下,调用堆栈中函数调用的数量超出了调用堆栈的实际大小,浏览器会抛出一个错误终止运行。 (关注福利,关注本公众号回复[资料]领取优质前端视频,包括Vue、React、Node源码和实战、面试指导) 本周正式开始前端进阶的第一期,本周的主题是调用堆栈,今天是第3天。 本计划一共28期,每期重点攻...
摘要:使用上一篇文章的例子来说明下自由变量进阶期深入浅出图解作用域链和闭包访问外部的今天是今天是其中既不是参数,也不是局部变量,所以是自由变量。 (关注福利,关注本公众号回复[资料]领取优质前端视频,包括Vue、React、Node源码和实战、面试指导) 本周正式开始前端进阶的第二期,本周的主题是作用域闭包,今天是第7天。 本计划一共28期,每期重点攻克一个面试重难点,如果你还不了解本进阶计...
阅读 2814·2021-10-21 09:38
阅读 2698·2021-10-11 10:59
阅读 2930·2021-09-27 13:36
阅读 1618·2021-08-23 09:43
阅读 704·2019-08-29 14:14
阅读 2973·2019-08-29 12:13
阅读 3168·2019-08-29 12:13
阅读 282·2019-08-26 12:24