js常用的循环遍历方法总结（简单易用）

# js常用的循环遍历方法总结

• for 通用

 let arr = ['小吕', '小郭']
 let length = arr.length         // 优化效果，数组多就比较明显
 for (let i = 0; i < length ; i++) {
      console.log(arr[i])       //小吕 小郭
    }

• forEach

let arr = ['小吕', '小郭']
arr.forEach((item,index,array)=>{
    console.log(item)  // 每一项
    console.log(index) // 下标
    console.log(arrray) // ['小吕', '小郭']
})

• some
  有return 状态，适用于修改数组数据，并结束循环（return true）

let arr = [
	  {
		   name: '小吕',
		   age: 24
	   },
   		{
   			name: '小郭',
   			age: 20

   		}
    ]
    arr.some( function( item, index, array ){
      if(item.name == '小吕') {
        item.name = '小溪'
      }
       return true  // 结束循环
    })

• map
  适用于重新组合成新数组

  let arr = []
  arr = array.map(item=>{  数组遍历 
	  return {id: item.ta_id, name: item.ta_name}
  })
  arr = [{1,'小丁'},{2, '小吕'}....]

• find
  适用于满足条件重新组合

 let arr = [ { name: '小吕', age : 24}, { name: '小郭', age: 20 } ]
 let obj = {}
 obj = arr.find(item =>{
   return item.name === '小郭'
 })
 console.log(obj) //  { name: '小郭', age: 20 }  	   

• findIndex
  找数组下标

  let index = array.findIndex(item =>{   返回符合条件的下标
	  return item.name === this.name 
  })

• for … of es6
  有break、continue和return状态

 let arr = ['小吕', '小郭']
 for (let item of arr) {   es6
       console.log(item); // 小吕 小郭
    }

• keys，values 循环数组键和值 es6

 let arr = [
	  {
		   name: '小吕',
		   age: 24
	   },
   		{
   			name: '小郭',
   			age: 20

   		}
    ]
    const key = arr.keys()
    const value = arr.values()
    for (const index of key) {
         console.log(index) // 0 1
    }
    for (const item of value) {
         console.log(item) // { name: '小吕', age: 24 } { name: '小郭', age: 20 }
    }

for…in 遍历对象

let object = {
   name: '小郭',
   age: 20
}
 for(const key in object) { // 遍历对象
		object[key] = ''
	}

filter 过滤器

let arr = [{id: 1, value:12},{id: 2, value:32}，{id: 3, value:42}]
let tempArr = arr.filter((item) =>{
  return item.id != 1
})

reduce 迭代

let arr = [{id: 1, value:12},{id: 2, value:32}，{id: 3, value:42}]
let tempArr = arr.reduce((prv, next) =>{
  return prv + next.value
}, 0)

未完待续。。。