遍历数组的方法

遍历数组

1、forEach(最简单、最常用的数组遍历方法)

• 把数组的每一项都罗列出来，并不能返回东西；

 var array = [1,2,3,4,5];
 var res = array.forEach(function(item) {
     if(item == 1){
        return item;
     }
 })
 console.log(res);//undefined

• 迭代数组并且将当前元素和元素的index扔到一个函数中

   var arr = ['a','b','c'];
   arr.forEach(function(elem,index){
   	console.log(index + '.' + elem)
   })
   // 输出结果:
   // 0.a    
   // 1.b  
   // 2.c
  

• 提供一个回调函数（参数有三个，第一个是处于当前循环的元素，第二个是该元素的下标，第三个是数组本身，三个参数可选），可用于处理数组的每一个元素，默认没有返回值

  // 计算出数组中大于等于3的元素的个数。
  var arr = [1, 2, 3, 4, 5];
  var res = 0;
  arr.forEach(item => {
      item >= 3 ? res++ : res
  })
  console.log(res);//3
  

2、map方法

• 映射，无论发生什么事情，原来的数组有多长，返回的数组就有多长

   var arr = [1,2,3,4,5];
   var res = arr.map(function(item){
       if(item == 1) {
          return item;
       }
   })
   console.log(res);//长度依旧是5，其余4项是undefined[1,undefined,undefined,undefined,  undefined]
  

• 提供一个回调函数，参数依次为处于当前循环元素、该元素下标、数组本身，三者均可选。默认返回一个数组，这个新数组的每一个元素都是原数组元素执行了回调函数之后的返回值。该方法不改变原数组

  // 原数组的每一项乘以自身下标+1的数
  var arr = [1,2,3,4,5];
  var res = arr.map((item,index)=>{
      return item*(index+1)
  })
  console.log(arr);//[1, 2, 3, 4, 5]
  console.log(res);//[1, 4, 9, 16, 25]
  

3、filter方法

• 过滤，提供一个回调函数，参数依次为处于当前循环元素、该元素下标、数组本身，三者均可选。默认返回一个数组，原数组的元素执行了回调函数之后返回值若为true，则会将这个元素放入返回的数组中；如果条件不满足，则返回一个空数组。该方法不改变原数组

  // 筛选出原数组中，自身乘以下标大于等于3的元素。
  var arr = [1,2,3,4,5];
  var res = arr.filter((item,index)=>{
      return item*index>=3;
  })
  console.log(arr);//[1, 2, 3, 4, 5]
  console.log(res);//[3, 4, 5]
  

4、find方法

• 查找第一个符合条件的数组元素

  • 找到一个符合条件的组件成员，返回该成员的值，如果没有找到，返回undefined

• 它的参数是一个回调函数。在回调函数中可以写要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined，该方法不改变原数组

  • 回调函数有三个参数:当前的数组元素，当前索引值，被查找的数组，三者均可选

  var arr =[1,2,3];
  var res = arr.find((item)=>{
      return item >2;
  })
  console.log(arr);//[1, 2, 3]
  console.log(res)//3
  

  var arr =[1,2,3];
  var res = arr.find((item)=>{
      return item >3;
  })
  console.log(res)//undefined
  

• 注：find()找到第一个元素后就不会在遍历其后面的元素,所以如果数组中有两个相同的元素，他只会找到第一个，第二个将不会再遍历了。

5、findIndex方法

• 使用方法和find相同，参数是回调函数，有三个参数，同上

• 当条件为true时返回的是索引值，如果没有符合条件时返回-1

• //⚠️如果是对象类型，findIndex返回的是元素，而不是index
  

   var arr =['张三','李四','王五'];
   var res = arr.findIndex((item,index,arr)=>{
       return item == '李四'
   })
   console.log(res);//1
  

  const bookArr = [
      {
          id: 1,
          bookName: "三国演义"
      },
      {
          id: 2,
          bookName: "水浒传"
      },
      {
          id: 3,
          bookName: "红楼梦"
      },
      {
          id: 4,
          bookName: "西游记"
      }
  ];
  var res = bookArr.findIndex((value)=>{
      return value.id == 3
  });
  console.log(res);//2
  
  var res1 = bookArr.findIndex((value)=> {
  	return value.bookName == '骆驼祥子'
  })
  console.log(res1);//-1
  

6、reduce方法

• 这个方法接受两个参数：

  • 用于执行每个数组元素的函数，函数参数分别为
    • prev:上次调用函数的返回值
    • cur:当前元素
    • index:当前元素索引，可选
    • arr:被遍历的数组，可选
  • 函数迭代的初始值：可选

  // 没有设置函数的初始迭代值
  let arr = [1, 2, 3, 4];
  let sum = arr.reduce(function (prev, cur, index, arr) {
      console.log(prev, cur, index);
      // 1 2 1
      // 3 3 2
      // 6 4 3
      console.log(prev);//1 3 6
      console.log(cur);// 2 3 4
      console.log(index);//1 2 3
      return prev + cur;
  })
  console.log(arr, sum);//[1,2,3,4]  10
  //在这里reduce的作用就是对这个数组进行求和，迭代了3次，函数迭代的初始值是1，也就是默认值（数组的第一项），prev的值是每次计算后的值，
  

  // 设置初始迭代值
  let arr = [1, 2, 3, 4];
  let sum = arr.reduce(function (prev, cur, index, arr) {
      console.log(prev, cur, index);
      // 5  1  0
      // 6  2  1
      // 8  3  2
      // 11 4  3
      return prev + cur;
  }, 5)
  console.log(arr, sum);//[1,2,3,4] 15
  //让prev从5开始计算，可以看到，这里迭代了4次，结果也加上了初始值。
  

7、every方法

• 使用指定函数检测数组中的所有元素是否满足条件，不会对空数组进行检测，也不会改变原数组

• 元素全部满足条件，方法返回true

• 有一个元素不满足条件，方法返回false且其余元素不再检测

• 参数说明：

  • 第一个函数为一个回调函数，必传，数组中的每一项都会遍历执行该函数
    • currentValue:必传，当前项的值
    • index:选传，当前项的索引值
    • arr:选传，当前项所属的数组对象
  • 第二个参数thisValue为可选参数，回调函数中的this会指向该参数对象

  let arr = [1,2,3,4];
  let flag = arr.every(function(cur,index,arr){
      console.log(cur);//1
      console.log(index);//0
      console.log(arr);//[1,2,3,4]
      return cur > 5;
  })
  console.log(flag);//false
  

8、some方法

• 用于检测数组中的元素是否满足指定条件，方法会依次执行数组的每一个元素

• 如果有一个元素满足条件，表达式返回true,剩余元素不会再执行检测

• 如果没有满足条件的元素，返回false

• 注意：不会对空数组进行检测，不会改变原来的数组，同every

• 参数说明同every方法的参数说明

  let arr = [1,2,3,4];
  let flag = arr.some(cur=>cur>3);
  console.log(flag);//true
  

9、for循环—最简单，传统的