数组遍历的方法(一)

94 阅读2分钟

1、forEach

该方法等同于for循环,没有返回值

const arr=[1,2,3,4,5,6]

arr.forEach((item,index,arr)=>{

//item 数组中每一项

//index item每一项对应的下坐标

// arr 调用该方法的数组本身

})

2、map

映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等

//item: 数组中的每一项;
//index:item 对应的下标索引值
//arr: 就是调用该方法的数组本身
arr.map((item,index,arr)=>{
  return item * 2
})
//2,4,6,8,10,12

3、filter

有返回值,过滤出来符合条件的元素

const res=arr.filter((item,index,arr)=>{
 return item % 2 === 0
})

// 2 4 6

过滤出布尔类型为true的项

const arr1=[0,"",false,1,2]
const res1=arr.filter((item,index,arr)=>{
  return item
})

//[1,2]

4、some

判断数组中有没有符合条件的项(只要有一个,就返回true),如果一个都没有,才返回false

const arr2=[
{
name:'xm',age:20,done:true
},
{
name:'xf',age:18,done:true
},
{
name:'wl',age:19,done:false
},
]
const res3=arr2.some(item=>{
 return item.done
})  

//true

5、every

判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false

const res4=arr2.every(item=>{
    return item.done
})

//false

6、find

找到符合条件的项,并且返回第一项

const res5=arr2.find(item=>{
    return item.done
})

//{name: 'xm', age: 20, done: true}

7、findIndex

找到符合条件的项的下标,并且返回第一项的下标值

const res6=arr2.findIndex(item=>{
    return item.done
})

//0

8、reduce

(1)求和计算

*第一次:pre–>1 next–>2 index–>1

pre+next=1+2=3

*第二次:pre–>3 next–>3 index–>2

pre+next=3+3=6

*第三次:pre–>6 next–>4 index–>3

pre+next=6+4=10

*第四次:pre–>10 next–>5 index–>4

pre+next=10+5=15

const arrList=[1,2,3,4,5]
const res7=arrList.reduce((pre,next,arr)=>{
    return pre+next
})

//15

(2)数组扁平化(拼接数组)

const arr3=[[1,2,3],[4,5],[6,7,8]]
const res8=arr3.reduce((pre,next,index)=>{
  return pre.concat(next)
})

// [1, 2, 3, 4, 5, 6, 7, 8]

(3)对象属性叠加计算

const arr4=[
    {
        price:10,
        count:5
    },
    {
      price:20,
      count:2
    },
    {
        price:30,
        count:3
    }
]
const res9=arr4.reduce((pre,next)=>{
    return pre+next.price*next.count
},0)

//180

(4)计算数组中每个元素出现的次数

const names=['Alice','Bob','Joie','Bruce','Alice']
const countNames=names.reduce((allName,name)=>{
    if(name in allName){
        allName[name]++
    }else{
        allName[name]=1
    }
    return allName;
},{})

//{Alice: 2, Bob: 1, Joie: 1, Bruce: 1}