js中常用的循环遍历方法

在项目开发中，我们在处理数据的时候不免需要对数据进行处理，这时候我们就需要使用不同的循环便利来争对各种不同的需求。

一、for循环

for循环应该是我们js中最常见的一种循环，他的可读性和易维护性也是最差的，但也是可以break出来。

let arr = [1,2,3,4,5,6,7]
for(let i = 0;i<arr.length;i++){
  console.log(arr[i])
}
// 1,2,3,4,5,6,7

二、for...in

for...in主要用于对象的遍历，可以直接获得对象所对应的键值。

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
for(let key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(key);
        console.log(obj[key])
        // name  xiaohua sex male age 28
    }
}

三、map

map方法主要是将数组对象循环便利并进行处理，返回一个新数组，中间不能间断。

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.map((item,index,arr)=>{ //当前成员，当前位置，数组本身
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

四、foreach

与map基本相同。只是foreach用来处理数组，而不返回一个新数组。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

五、filter过滤循环

filter循环过滤数组成员，将满足需求的成员选择出来形成一个新的数组，不会改变原本数组。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === 'xiaohua')
})
console.log(arr2)  // [{id:1,name:'xiaohua}]

六、Object.keys遍历对象的属性

Object.keys方法的参数是一个对象，返回一个数组,且只返回可枚举的属性。

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]