前端循环遍历

Posted 2021-09-04 唐微港

遍历数组

for

    let arr = ['小林', '小赵', '小王']
        for(var i=0;arr.length;i++){
            console.log(i,arr[i])
        }

for…in

        let arr = ['小林', '小赵', '小王']
        for (const key in arr) {
            console.log(key, arr[key])// 0 小林,1 小赵,2 小王
        }

for…of

     let arr = ['小林', '小赵', '小王']
     for (const value of arr) {
        console.log(value)// 0 小林,1 小赵,2 小王
     

forEach

let arr=['小林','小赵','小王']
        var str = arr.forEach(function(value,index) {
            console.log(value,index);//value为值，index为索引
        })

map

• 遍历数据并返回一个新的数组 对数据的处理会返回到原先对应的位置,需要return返回

        //遍历数据并返回一个新的数组 对数据的处理会返回到原先对应的位置
        let arr = ['小林', '小赵', '小王']
        let newArr = arr.map(function (val, index) {
            // 第一个参数是值 第二个参数是索引值
            console.log(val,index,arr[index])
            return arr[index]
        })

filter

• filter是循环遍历并过滤不需要的数据，返回需要的数据

let data = {
            code: 1,
            list: [{ id: 23, title: "衣服-1", price: 300 }, { id: 24, title: "衣服-2", price: 200 },
                   { id: 27, title: "裤子-1", price: 100 }, { id: 29, title: "裤子-2", price: 400 },
                   { id: 230, title: "鞋子-1", price: 500 }, { id: 40, title: "鞋子-2", price: 600 }]
        }

        let indexTemp;
        let result = data.list.filter(
            //返回价格*2《=400的数据，过滤掉其他数据
            (item,index)=>{
                indexTemp=index //索引长度，从0开始
                return item.price==400 //找到price为400的返回
            }
        )
        console.log(result)
        console.log(indexTemp)

every

• 这个返回的是如果其中一个为假 全部返回为假 返回的是每个条件,保证所有条件都为true时才返回true,类似于and

let data = {
            code: 1,
            list: [{ id: 23, title: "衣服-1", price: 300 }, { id: 24, title: "衣服-2", price: 200 },
                   { id: 27, title: "裤子-1", price: 100 }, { id: 29, title: "裤子-2", price: 400 },
                   { id: 230, title: "鞋子-1", price: 500 }, { id: 40, title: "鞋子-2", price: 600 }]
        }

        let indexTemp;
        let result = data.list.every(
            (item)=>{
                return item.price>500 //不是所有数据的price都大于500所以所以这里返回false
            }
        )
        console.log(result)//false

some

• 这个返回的是如果其中有一个为真 就返回真，类似于or

        let data = {
            code: 1,
            list: [{ id: 23, title: "衣服-1", price: 300 }, { id: 24, title: "衣服-2", price: 200 },
                   { id: 27, title: "裤子-1", price: 100 }, { id: 29, title: "裤子-2", price: 400 },
                   { id: 230, title: "鞋子-1", price: 500 }, { id: 40, title: "鞋子-2", price: 600 }]
        }

        let result = data.list.some(
            (item)=>{
                return item.price>500 //因为有一个price==600的是大于500的，所以这里返回为真
            }
        )
        console.log(result)//true

reduce

实现循环遍历累加,例如下面的就是默认sum取第一个值 200，val取第二个值为300，第一次累加后（sum+=val）就变成了sum=500,而val则向后移动到了100，所以就是sum=500,val=100,在继续往后加，sum就变成了600

        //reduce 用来实现累加的效果(常用于写购物车价格的累加)
        let arr = [200, 300, 100]
        let result = arr.reduce((sum, val, index) => {
            //sum是相加后的总之  val是变量的值 index为索引值
            console.log(sum, val, index)//200，300  1， 500 100 2
            return sum + val;
        })
        console.log(result) //600

find

• 用于寻找遍历中符合对应条件的数据，有就返回该条数据，没有就不做返回undefined

  let data = {
            code: 1,
            list: [{ id: 23, title: "衣服-1", price: 300 }, { id: 24, title: "衣服-2", price: 200 },
                   { id: 27, title: "裤子-1", price: 100 }, { id: 29, title: "裤子-2", price: 400 },
                   { id: 230, title: "鞋子-1", price: 500 }, { id: 40, title: "鞋子-2", price: 600 }]
        }

        let result = data.list.find(
            (item)=>{
                return item.id==230
            }
        )
        console.log(result)

findIndex

• 循环遍历，如果查询到满足对应条件的数据就返回该条数据的索引

 let data = {
            code: 1,
            list: [{ id: 23, title: "衣服-1", price: 300 }, { id: 24, title: "衣服-2", price: 200 },
                   { id: 27, title: "裤子-1", price: 100 }, { id: 29, title: "裤子-2", price: 400 },
                   { id: 230, title: "鞋子-1", price: 500 }, { id: 40, title: "鞋子-2", price: 600 }]
        }

        let indexTemp;
        let result = data.list.findIndex(
            (item)=>{
                return item.price==500 //找到price==500的索引
            }
        )
        console.log(result)

遍历对象

for…in

     let obj = {'k1':'小林', 'k2':'小赵', 'k2':'小王'}
        for (const key in obj) {
            console.log(key,obj[key])
        }

Object.keys(obj)

     let obj = {'k1':'小林', 'k2':'小赵', 'k3':'小王'}
     Object.keys(obj).forEach(function(key) {
         console.log(key,obj[key])
     })