forEach：遍历数组
foreach只是对数组进行遍历，并不会改变原来的数组。
示例：打印数组中的每个元素。
- letarr=['a','b','c'];
- arr.forEach(item=>{
- console.log('当前元素',item)
- })
上述使用了箭头函数，省略了括号,如果需要数组下标的时候，可以把标加上，改写成：
- letarr=['a','b','c'];
- arr.forEach((item,index)=>{
- console.log('当前元素',item)
- console.log('当前元素下标',index)
- })
如果是给同级的几个元素遍历设置背景颜色时，运行发现失败，代码如下：
- window.onload=function(){
- letaDiv=document.getElementsByTagName('div')
- aDiv.forEach(item=>{
- item.style.background="red"
- })
- }
运行报错：Uncaught TypeError: aDiv.forEach is not a function at window.onload
报错主要是因为 aDiv 并不是一个真正的数组，它是一个类数组。此时我们需要借助from方法。
from：转换数组
from()方法把类数组转换成真正的数组。
使用语法：Array.from(类数组)
此时我们只需要借助from方法，把aDiv转换成真正的数组，就可以使用forEach遍历，给每个元素设置背景。代码如下：
- window.onload=function(){
- letaDiv=document.getElementsByTagName('div')
- Array.from(aDiv).forEach(item=>{
- item.style.background="red"
- })
- }
map:映射
原数组被映射成一个新的数组。返回值是一个新数组，不改变原来的数组。
将一组成绩映射成是否及格的布尔值，判断大于60分就算及格，否则就不及格。代码如下：
- letgrad=[55,66,77,88]
- letarr2=grad.map(function(item){
- returnitem>=60
- })
- console.log("arr2",arr2)
filter:过滤
Filter过滤数组，进去一堆出来几个，返回过滤后的新数组。
比如去掉数组中的偶数，只保留奇数。
- letnum=[1,2,3,4,5,6,7,8]
- letodd=num.filter(function(item){
- returnitem%2
- })
- console.log("odd",odd)
reduce:汇总
进去一堆数据，出来一个。比如求和或者求平均数。
以下是求平均数的一个实例：
- letnum=[1,2,3,4,5,6,7,8]
- letevr=num.reduce((tmp,item,index)=>{
- if(index<num.length){
- returntmp+item
- }else{
- return(tmp+item)/num.length
- }
- })
上述的tmp是中间的一个结果，最开始是第一个值。
find:查找
在数组中找到符合要求的对象，和filter的区别是找到符合要求的对象就停止搜索了，返回的是一个对象。
查找姓名叫王五的这个人，代码如下：
- letpers=[
- {name:'倩倩',age:18},
- {name:'张三',age:25},
- {name:'王五',age:60}
- ]
- letper=pers.find(function(item){
- returnitem.name==='王五'
- })
- console.log('per',per)//per{name:"王五",age:60}
erver()、some()
every目标数组中每一个对象都符合条件则返回true，否则返回false。
some目标数组中有一个或一个以上符合条件就会返回true，否则返回false。
- letpers=[
- {name:'倩倩',age:18},
- {name:'张三',age:25},
- {name:'王五',age:60}
- ]
- //年龄是否都小于30
- letisYoung=pers.every(item=>{
- returnitem.age<30
- })
- //年龄有小于30的
- lethaveYoung=pers.some(item=>{
- returnitem.age<30
- })
- console.log("isYoung",isYoung)//false
- console.log("haveYoung",haveYoung)//true
原文链接：https://www.toutiao.com/i6985044488829846049/
如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。