前端循环遍历

野性酷女 2022-09-03 14:28 221阅读 0赞

## 遍历数组 ##

### 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])
         })