数组遍历方式

本文主要分享以下几种方法：

1.普通版for循环、2.优化版for循环、3.forEach、4.some、5.every、6.filter、7.reduce、8.find、9.findIndex、10.map

---

1.普通版for循环

for(j = 0; j < arr.length; j++) {
   循环体
} 

2.优化版for循环

//使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。

for(j = 0,len=arr.length; j < len; j++) {
   循环体
}

3.forEach

        // forEach循环一旦开始，无法在中间停掉

        const arr=['肖战','杨紫','赵丽颖','谭松韵','白敬亭']
        arr.forEach((item,index)=>{
            console.log(`循环遍历了第${index}次`);
            if(item==='谭松韵'){
                console.log(index);
            }
        })

效果展示：

4.some

            // 从数组里面找元素，找到以后不再往下循环，用some比较合适
                
            const arr=['肖战','杨紫','赵丽颖','谭松韵','白敬亭']
            arr.some((item,index)=>{
                console.log(`循环了${index}次`);
                if(item==="杨紫"){
                    console.log(index);
                    return true;
                }
            })

效果展示：

5.every

 // every 判断每一项是否都满足条件，都满足则为true

            const arr=[
                {id:1,name:'西瓜',state:true},
                {id:2,name:'榴莲',state:true},
                {id:3,name:'草莓',state:true},
            ]
            const result=arr.every(item=>item.state)
            console.log(result); //true

 const arr=[
                {id:1,name:'西瓜',state:true},
                {id:2,name:'榴莲',state:false},
                {id:3,name:'草莓',state:true},
            ]
            const result=arr.every(item=>item.state)
            console.log(result); //false

6.filter

 // 需求：把购物车数组里，已勾选的水果，总价累加起来 

const arr=[
                {id:1,name:'西瓜',state:true,price:10,count:1},
                {id:2,name:'榴莲',state:false,price:80,count:2},
                {id:3,name:'草莓',state:true,price:20,count:3},
            ]

             let totalPrice=0;//总价
             arr.filter((item,index)=>{
                     if(item.state){
                        totalPrice += item.count*item.price
                     }
                })
                console.log(totalPrice);//70

7.reduce

//reducer 逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加
（上一步的计算结果是当前元素之前所有元素的总和）——直到没有更多的元素被相加。

//语法：arr.filter(item=>item.state).reduce((累加的结果，当前循环项)=>{},累加的结果初始值)
   
    const arr=[
                {id:1,name:'西瓜',state:true,price:10,count:1},
                {id:2,name:'榴莲',state:false,price:80,count:2},
                {id:3,name:'草莓',state:true,price:20,count:3},
              ]

              const result=arr.filter(item=>item.state).reduce((amt,item)=>{
                return amt+=item.price*item.count
            },0)

            console.log(result);

8.find

           // find查找满足条件的第一个元素，并返回

            arr=[4,66,5,6,77,12,8]

            const res=arr.find(item=>item>6)

            console.log(res);//66

9.findIndex

           // 查找满足条件的第一个元素返回其索引值
 
           arr=[4,66,5,6,77,12,8]

            const res=arr.findIndex(item=>item>6)

            console.log(res);//1

10.map

           //遍历元素，让每个元素执行一遍回调函数，把结果放到数组中返回
 
           arr=[4,66,5,6,77,12,8]

           let res=arr.map(item=>item>6)

           console.log(res); //[false, true, false, false, true, true, true]