超重要的数组迭代方法总结

数组迭代方法基本语法概括如下,其功能各异,但都有相同的结构.

​
arr.map((item,index) =>{})
arr.filter((item,index) =>{})
arr.forEach((item,index) =>{})
arr.every((item,index) =>{})
arr.some((item,index) =>{})
arr.findIndex((item,index) =>{}) 

数组map方法

数组map方法作用

数组map方法作用: 映射数组,得到映射之后的新数组

实际应用eg:全场商品打五折

原数组:[10,20,30,40,50]

映射数组:[5,10,15,20,25]

数组map方法特点

0. 回调执行次数 == 数组长度
1. 回调函数return作用: return 新数组元素
2. 最终自身返回值: 返回映射之后的新数组

let arr = [88,90,50,60,100]
//需求:全场商品打五折
​
//完整写法
/*let newArr = arr.map((item,index)=>{
    console.log(item,index)
    return item*0.5
})
console.log(newArr)*/
​
//简洁写法
let newArr = arr.mao(item => item*0.5 )
console.log(newArr)

数组filter方法

数组filter方法作用

数组filter方法作用: 筛选数组,得到满足筛选条件的新数组

实际应用eg:根据价格筛选商品

filter方法特点

0. 回调执行次数 == 数组长度

1. 回调函数return作用:

   return true : 满足筛选条件，会放入新数组中

   return false : 不满足筛选条件，不会放入新数组中

2. 最终自身返回值

   返回满足筛选条件的新数组

   let arr = [188, 98, 288, 600, 800]//数组里存储商品价格
   //需求：筛选 低于300块钱的商品
   ​
   //完整写法
   // let newArr = arr.filter((item, index) => {
   //     console.log(item, index)
   //     if (item <= 300) {
   //         return true
   //     } else {
   //         return false
   //     }
   // })
   ​
   //简洁写法
   let newArr = arr.filter( item => item <= 300 )
   console.log(newArr)
   

   数组forEach方法

   数组forEach方法作用

   数组forEach方法作用: 遍历数组

   相当于 for循环

   forEach方法特点

   0. 回调执行次数 == 数组长度

   1. 回调函数return作用

      无

   2. 最终自身返回值

      无

   let arr = [188, 98, 288, 600, 800]
   //for循环
   /*  for(let i = 0;i<arr.length;i++){
        console.log(arr[i])
    } */
    //forEach
    arr.forEach((item,index)=>{
        // return 1
        console.log(item,index);
    })
   

   数组some方法

   数组some方法作用 : 判断数组中有没有满足条件的数组

   需求:非空判断(判断有没有空)

   some方法特点

   0. 回调执行函数 != 数组长度

   1. 回调函数return作用:

      return true: 循环结束.找到满足的元素,并且some的结果也是true

      return false: 循环继续,没有找到满足的元素,如果所有元素遍历结束还是false,最终some

   2. 最终自身返回值:

      返回 满足筛选条件的新数组

   //需求:判断数组有没有奇数
   let arr = [5, 6, 7, 8, 9]
   //完整写法
   /* let res = arr.some((item, index) => {
       if (item % 2 == 1) {
           return true
       } else {
           return false
       }
   }) */
   //简洁写法
   let res = arr.some(item => item % 2 == 1)
   console.log(res);
   

   数组every方法

   数组every方法作用 : 判断数组中是否所有的元素满足条件 (逻辑与&&)

   应用: 购物车全选(判断单选框是否全部选中)

   every方法特点

   1. 回调执行函数 != 数组长度

   2. 回调函数return作用

      return true: 循环继续 满足条件,如果所有的元素的都是true,最终every的结果也是true

      return false: 循环结束

   3. 最终自身返回值

      返回 满足筛选条件的新数组

      let arr = [55, 57, 59, 61, , 63, 66]
      //完整写法
      /* let res = arr.every((item, index) => {
          if (item % 2 == 1) {
              return true
          } else {
              return false
          }
      })
      console.log(res) */
      //简洁写法
      let res = arr.every(item => item % 2 == 1)
      console.log(res);
      

      数组findIndex方法

      findIndex作用与场景 : 找元素下标

      • 数组中的元素是值类型: arr.indexOf()

      • 数组中的元素是引用类型: arr.findIndex()

      语法特点 :

      1. 循环执行次数 != 数组长度

      2. 回调函数内部return作用

         (1)return true : 找到了,循环结束。 此时findIn是当前元素下标

         (2)return false : 没找到，循环继续。 如果执行完毕还找不到，最终返回固定值-1

      3. findIndex本身返回值作用

         return -1 : 没有

         return 下标 : 有

      let arr = [
          {name:'张三',age:20},
          {name:'李四',age:20},
          {name:'王五',age:20},
      ]
      //完整写法
      /* let index = arr.findIndex((item,index)=>{
          if(item.name == '李四'){
              return true
          }else{
              return false
          }
      }) */
      //简洁写法
      let index = arr.findIndex(item=>item.name == '李四')
      console.log(index);
      

      数组reduce方法

      数组reduce方法作用: 为每一个元素执行一次回调,并最终返回最后一次结果

      经典应用: 求数组累加和

      参数含义

      第一个参数:回调 (sum,value,index)=>{}

      sum:累加和变量

      value:当前元素

      index:当前下标

      return:下一次回调sum的值

      第二个参数: sum初始值

      如果不传,sum默认是第一个元素值

      一般要传0,如果不传,遇到空数组的话reduce直接报错

      //求数组累加和
      let arr = [10, 20, 30,40]
      // let res = arr.reduce((sum,value)=>sum+value,0)
      // console.log(res);
      //累加和
      /* let sum = 0
      for(let i = 0;i<arr.length;i++){
          sum += arr[i]
      } */
      ​
       //简写
      let res = arr.reduce((sum,value)=>sum+value,0)
      console.log(res);
      

\