JavaScript解密之旅-----数组的遍历方法总结

---

数组的循环

一、forEach（）

• 对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。
• 参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

  var arr = [1, 2, 3, 4, 5];
  arr.forEach(function (item, index, arr) {
      console.log(item, index, arr);
      // item:遍历的数组内容,index:第对应的数组索引，arr:数组本身。
  });

二、map（）

• 指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
• 参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身

 var arr = [1, 2, 3, 4, 5];
 var arr2 = arr.map(function (item) {
   return item * item;
  });
 console.log(arr2); //[1, 4, 9, 16, 25]

三、filter（）

• “过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
• 参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身

  var arr = [1, 2, 3, 4, 5];
  var arr2 = arr.filter(function (x, index) {
    return x % 2 == 0 || index >= 2;
  });
  console.log(arr2); // [2,3,4,5]

四、reduce（）与reduceRight()

• x 是上一次计算过的值, 第一次循环的时候是数组中的第1个元素
• y 是数组中的每个元素, 第一次循环的时候是数组的第2个元素
• 最后一个数组本身

//  reduce（）
   let array = [1, 2, 3, 4, 5];
   let arrayNew = array.reduce((x, y) => {
        console.log("x===>" + x);
        console.log("y===>" + y);
        console.log("x+y===>", Number(x) + Number(y));
        return x + y;
   });
   console.log("arrayNew", arrayNew); // 15
   console.log(array); // [1, 2, 3, 4, 5]
   // reduceRight()  只是执行数组顺序为倒序

五、every（）

• 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true否是为false

  var arr = [1, 2, 3, 4, 5];
  var arr2 = arr.every(function (x) {
        return x < 8;
  });
  console.log(arr2); //true
  var arr3 = arr.every(function (x) {
        return x < 3;
  });
  console.log(arr3); // false

六、some（）

• 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true,否则为false

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
});
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x > 6;
});
console.log(arr3); // false

七、find（）与findIndex（）

• 该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。
• 在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。findIndex返回-1

// find()
  let arr = [1, 2, 3, 4, 5];
  let res = arr.find(function (val, index, arr) {
    return val > 3;
  });
  console.log(res); //4
  // findIndex
  let arr = [1, 2, 3, 4, 5];
  let res = arr.findIndex(function (val, index, arr) {
    return val > 3;
  });
  console.log(res); //3

八、 for in

• for…in循环可用于循环对象和数组,推荐用于循环对象,可以用来遍历JSON

   var arr = [
        { id: 1, name: "程序员" },
        { id: 2, name: "掉头发" },
        { id: 3, name: "你不信" },
        { id: 4, name: "薅一下" },
      ];
      var arrNew = [];
      for (var key in arr) {
        console.log(key);
        console.log(arr[key]);
        arrNew.push(arr[key].id);
      }
      console.log(arrNew);

九、 for of

• for…of循环可用于循环对象和数组,推荐用于循环对象,可以用来遍历JSON

   var arr = [
        { name: "程序员" },
        { name: "掉头发" },
        { name: "你不信" },
        { name: "薅一下" },
      ];
      // key()是对键名的遍历；
      // value()是对键值的遍历；
      // entries()是对键值对的遍历；
      for (let item of arr) {
        console.log(item);
      }
      // 输出数组索引
      for (let item of arr.keys()) {
        console.log(item);
      }
      // 输出内容和索引
      for (let [item, val] of arr.entries()) {
        console.table(item + ":" + val);
      }

十、 for

原生实现方式

  var arr = [
        { name: "程序员" },
        { name: "掉头发" },
        { name: "你不信" },
        { name: "薅一下" },
      ];
 for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        console.log(element )
    }

总结

方法1~7为ES6新语法 IE9及以上才支持。不过可以通过babel转义支持IE低版本。以上均不改变原数组。