js 数组循环遍历方法

 在开发中经常和数组打交道，处理各种逻辑，了解数组遍历的使用方法后，我们要学会在合适的场景使用适合的方法

for循环

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

        for遍历数组索引，如果数组中存在空元素，也会执行

        可以使用return、break、continue跳出或中断循环

 

forEach

arr.forEach((item, index, arr) = > {
      console.log ( item ) 
})

       可以接收三个参数=> item：数组当前项的值，index：数组当前项的索引，arr：数组对象本身

       forEach无法跳出循环(return、break、continue不起作用)

 

for ... of

 const arr = [1,2,3,4,5,6,7,8,9]
 for (const item of arr) {
      if (item===3) break  
      console.log(item) // 1 2
 }

const arr2 = [1,2,3,4,undefined,5,6,7]
 for (const item of arr2) {
      if (item===6) break  
      console.log(item) // 1 2 3 4 undefined 5
 }

       es6支持

       for ... of 与for一样，如果遇到空元素同样会执行

       和for一样可以使用return、break、continue终止循环

       

filter

const list = [
{id:1, name:'张三', age:18},
{id:2, name:'李四', age:22},
{id:3, name:'赵六', age:30}
]
const result = list.filter((item, index, arr)=>{
       return  item.age === 22
})

          可以接收三个参数=> item：数组当前项的值，index：数组当前项的索引，arr：数组对象本身

          filter配合return返回符合条件的新数组元素不可自定义，不会改变原数组，数组长度和原数组不同

map

  const list = [
  {id:1, name:'张三', age:18},
  {id:4, name:'1111'},
  {id:2, name:'李四', age:22},
  {id:3, name:'赵六', age:30}
  ]
  const result = list.map((item, index, arr)=>{
         return  item.age
  })
    console.log(result). // [{id:1, name:'张三', age:18},undefined,{id:2, name:'李四', age:22},{id:3, name:'赵六', age:30}]

          可以接收三个参数=> item：数组当前项的值，index：数组当前项的索引，arr：数组对象本身

          有返回值，可以return出来

          map返回新的数组元素可自定义，不会改变原数组，数组与原来长度一致

 

some

const list = [
   {id:1, name:'张三', age:18},
   {id:4, name:'1111'},
   {id:2, name:'李四', age:22},
   {id:3, name:'赵六', age:30}
   ]
   const result = list.some((item, index, arr)=>{
          return  item.age===22
   })

           可以接收三个参数=> item：数组当前项的值，index：数组当前项的索引，arr：数组对象本身

           配合return使用，返回布尔值，某一元素满足条件返回true，循环中断，只有所有元素都不满足条件才返回false

every

const list = [
    {id:1, name:'张三', age:18},
    {id:4, name:'1111'},
    {id:2, name:'李四', age:22},
    {id:3, name:'赵六', age:30}
    ]
    const result = list.every((item, index, arr)=>{
          return  !item.age
    })

             可以接收三个参数=> item：数组当前项的值，index：数组当前项的索引，arr：数组对象本身

             配合return使用，返回布尔值，与some相反，某一元素不满足条件返回false，循环中断，只有所有元素满足条件才返回true

find

const list = [
     {id:1, name:'张三', age:18},
     {id:4, name:'1111'},
     {id:2, name:'李四', age:22},
     {id:3, name:'赵六', age:22}
     ]
     const result = list.find((item, index, arr)=>{
           return  item.age===22
     })
       console.log(result). // {id:2, name:'李四', age:22}

             可以接收三个参数=> item：数组当前项的值，index：数组当前项的索引，arr：数组对象本身

             配合return使用，返回第一个满足条件的元素值，如果不存在返回undefined

 

findIndex

const list = [
      {id:1, name:'张三', age:18},
      {id:4, name:'1111'},
      {id:2, name:'李四', age:22},
      {id:3, name:'赵六', age:22}
      ]
      const result = list.findIndex((item, index, arr)=>{
            return  item.age===22
      })
       console.log(result). // 2

                 可以接收三个参数=> item：数组当前项的值，index：数组当前项的索引，arr：数组对象本身

                 配合return使用，用于找出第一个符合条件的数组成员位置（索引），如果没有找到返回-1

reduce

  // 数组求和
  const list = [
  {name:'张三', age:18},
  {name:'李四', age:62},
  {name:'王二', age:36},
  ]
  const total = list.reduce((ageTotal, item) =>{
        return ageTotal + item.age
  },0)
 console.log(total)  // 116

// 数组去重
  const list = [
  {name:'王二', age:36},
  {name:'张三', age:18},
  {name:'李四', age:62},
  {name:'王二', age:36},
  {name:'李四', age:62},
  ]
  const obj = {}
  const result = list.reduce((array, item)=>{
           if ( obj[item.name] ){
                 obj[item.age]++
                 return array
           }
           obj[item.name] = 1
           return [...array, item]
  },[])
  console.log(result)   //[{name:'王二', age:36}, {name:'张三', age:18},{name:'李四', age:62}]

            方法接收两个参数，第一个回调函数（callback），第二个是初始值

            其中回调函数接收四个参数：1、表示上一次回调时的返回值，或者初始值，2、表示当前正在处理的数组元素，3、表示当前正则处理的数组元素的索引，若提供初始值，则索引为0，否则索引为1（如果传入值为初始值，将从索引0开始，并从初始值的基础上累计执行回调函数，如果不传入初始值，该方法会从索引1开始执行回调函数），4、表示愿数组