浅谈四种JS数组循环

目录

一.forEach循环

二.some循环 

 三.every循环

 四.reduce循环

---

一.forEach循环

他不能够终止循环----所以forEach的性能比较差

意思是就算查找到了我们需要的数组元素，forEach也不会停下来的，直到把这个数组所有数组循环一遍才能终止本次循环：

eg：

const arr = [1,3,5,7,8,10,12,14,16]
arr.forEach((item,index)=> {
    console.log('循环了几次？');
    if(item === 8){
        console.log('到这里我已经查询到了我想要查询的数组元素')
    }
})

我们发现就算forEach找到了当前期望数组元素，循环还是会继续进行下去

那么我们可不可以手动停下来呢？

const arr = [1,3,5,7,8,10,12,14,16]
arr.forEach((item,index)=> {
    console.log('循环了几次？');
    if(item === 8){
        console.log('到这里我已经查询到了我想要查询的数组元素')
        return
    }
})

并没有作用

---

二.some循环 

some不同于forEach循环的是：some可以在找到对应项之后通过return true这个固定语法来终止掉some循环：

const arr = [1,3,5,7,8,10,12,14,16]
arr.some((item,index)=> {
    console.log('循环了几次？');
    if(item === 8){
        console.log('到这里我已经查询到了我想要查询的数组元素')
        return true
    }
})

---

 三.every循环

主要用于循环判断

const arr = [
    {id:1,status:true},
    {id:2,status:true},
    {id:3,status:true},
    {id:4,status:false},
    {id:5,status:true}
]
const res = arr.every((item => item.status))
console.log(res)


const restwo = arr.every(function(item){
    return item.status == true
})
console.log(restwo)

const arr = [
    {id:1,status:true},
    {id:2,status:true},
    {id:3,status:true},
    {id:4,status:true},
    {id:5,status:true}
]
const res = arr.every((item => item.status))
console.log(res)


const restwo = arr.every(function(item){
    return item.status == true
})
console.log(restwo)

---

 四.reduce循环

reduce循环主要用于循环累加

语法：数组.reduce(累加的结果，当前循环项)=>{return 计算过程},初始值）

假如我们有这样一个要求：

张三开的小卖铺马上就要关门了，还有剩下了一些东西没有卖出去，需要统计一下

如下：

1	铅笔盒	有剩余	单价2000元	剩余个数100个
2	钢笔	没有剩余	单价1元	剩余0个
3	JavaScript手册	有剩余	单价80元	剩余2本

 我们需要怎么做？

没错--首先定义一个数组：

const arr = [
    {id:1,name:"铅笔盒",status:true,price:2000,count:100},
    {id:2,name:"钢笔",status:false,price:1,count:0},
    {id:3,name:"javascrip手册",status:true,price:80,count:2}
]

接下来就该我们的reduce循环上场了：

const arr = [
    {id:1,name:"铅笔盒",status:true,price:2000,count:100},
    {id:2,name:"钢笔",status:false,price:1,count:0},
    {id:3,name:"javascrip手册",status:true,price:80,count:2}
]
//思路：我们先排除卖完的，然后把还有剩余的商品进行计算累加
const results =  arr.filter(item => item.status).reduce((res,item)=> {
    return res += item.price * item.count
},0)
console.log(results)