ES6数组迭代方法——七种

最新推荐文章于 2025-10-07 06:16:48 发布

原创最新推荐文章于 2025-10-07 06:16:48 发布 · 567 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

数组方法专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了ES6中的七种数组迭代方法：map、filter、forEach、some、every、findIndex和reduce。通过实例解析了每种方法的作用、应用场景，帮助读者更好地理解和运用这些方法来处理数组数据。

1、map方法

作用: 根据某种规则映射数组，得到映射之后的新数组

应用场景：(1)数组中所有的元素 * 0.8 (2)将数组中的js对象，映射成 html字符串

示例：


const arr = [10,20,30,40,50]
  // 完整写法
  // let res = arr.map((item,index)=>{
  //     return item * 0.8
  //   })
  // 熟练写法
   let res = arr.map(item=>item*0.8)
    console.log(res)
  // 返回处理后的新数组   [8, 16, 24, 32, 40]

2、filter方法

作用：根据判断的条件，进行筛选。

应用场景：(1)筛选数组中的偶数 (2)商品价格筛选

示例：

 //需求： 筛选数组里的偶数
    const arr = [10,20,33,44,55]
    // let res =  arr.filter(item=>{
    //   if(item % 2 == 0){
    //     return true
    //   } else{
    //     return false
    //   }
    // })
    // console.log(res)
    let res1 = arr.filter(item => item % 2==0)
    console.log(res1) // [10, 20, 44]

3、forEach方法

作用：相当于 for循环另一种写法

应用场景：遍历数组

示例：

 // 类似for循环遍历
      const arr = [13,22,10,55,60]
      arr.forEach((item,index)=>{
        console.log(item,index)
        // item->数组里每一个元素
        // index->对应的下标
      })

4、some方法

作用：判断数组中是否有满足条件的元素 (逻辑或 ||, 有任意一个满足即可)

应用场景：(1)判断数组中有没有奇数 (2)非空判断 : 判断表单数组中，有没有元素value为空

示例：

 // 判断是否有奇数
    const arr = [10,20,30,40,50]
  //  let res =  arr.some(item=>{
  //     if(item % 2 == 1){
  //       return true
  //     } else{
  //       return false
  //     }
  //   })
    let res = arr.some(item =>item % 2 == 1)
    console.log(res)
   //  true: 有满足条件的元素
   //  false: 没有满足条件的元素

5、every方法

作用：判断数组中是否所有元素都满足条件 (逻辑&&, 全部满足)

应用场景： (1)判断数组中是否所有元素都是偶数 (2)开关思想 : 购物车是否全选

示例：

 // 判断是否全是偶数
      const arr = [10,20,30,40,50]
  //  let res =  arr.some(item=>{
  //     if(item % 2 == 1){
  //       return true
  //     } else{
  //       return false
  //     }
  //   })
    let res = arr.every(item =>item % 2 == 0)
    console.log(res)
   // true: 所有满足都满足条件
   // false: 有元素不满足条件

6、findIndex方法

作用：找元素下标

应用场景：(1)如果数组中是值类型，找元素下标用： arr.indexOf( 元素 )

(2)如果数组中是引用类型，找元素下标： arr.findIndex( )

示例：

 /*
     arr.findIndex()查询数组下标
      如果找到目标元素，则返回改数组的下标
      如果没找到，则返回固定值-1
      */
    let arr = [
      {name:'李四',age:20},
      {name:'王五',age:20},
      {name:'张三',age:20},
    ]

  let index = arr.findIndex(item=>item.name == '王五')
  console.log(index)

7、reduce方法

作用：遍历数组元素，为每一个元素执行一次回调函数

应用场景：数组求和/平均值/最大值/最小值

示例：

 const arr = [10,20,30,40,50]
   let res =  arr.reduce((sum,item,index)=>{
      return sum + item
      // console.log(sum,item,index)
    },0)