【JS】前端遍历数组的方法

1、 基本for 循环 

      // for
      var arr = [1, 2, 3];
      for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);    // 1,2,3
      }

2、for...of...遍历

      // for...of...
      var arr = [1, 2, 3];

      for (var i of arr) {
        console.log(arr[i]);  // 1,2,3
      }

  for...of...遍历的特点

1.  这是最简洁、最直接的遍历数组元素的语法
2.  这个方法避开了for-in循环的所有缺陷
3.  与forEach()不同的是，它可以正确响应break、continue和return语句
4.  性能要好于forin，但仍然比不上普通for循环

3、for...in...遍历

      // for...in...
      var arr = [1, 2, 3];

      for (var i in arr) {
        console.log(arr[i]);  // 1,2,3
      }

for...in 更多是用来遍历对象，很少用来遍历数组， 不过 item 对应与数组的 key 值。（建议不要用该方法来遍历数组，因为它的效率是最低的）

4、forEach()遍历

// forEach( item, index, arr )
var arr = [1, 2, 3];
arr.forEach((item, index, arr) => { // item为arr的元素，index为下标，arr原数组
    console.log(item); // 1, 2, 3
    console.log(index); // 0, 1, 2
    console.log(arr); // [1, 2, 3]
});

forEach( function(item, index, arr )）的特点：

1.  在 forEach 遍历中，并没有终止循环
2. 没有返回值，可以修改原数组
3.  item 必需。当前元素 index 可选。当前元素的索引值。 arr 可选。当前元素所属的数组对象。

5、map() 映射

      // map() 映射
      var arr = [1, 2, 3];
      var arr1 = arr.map((item, index, arr) => { 
         // item为arr的元素，index为下标，arr原数组
        console.log(item); // 1, 2, 3
        console.log(index); // 0, 1, 2
        console.log(arr); // [1, 2, 3]
        return item * 2; // 返回一个处理过的新数组[2, 4, 6]
      });
      console.log(arr);
      console.log(arr1);  // 处理过的新数组[2, 4, 6]

array.map(function(value,index,arr)) 特点：

1. 方法映射并返回一个新的数组，不会改变原数组。
2. map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
3. map() 方法按照原始数组元素顺序依次处理元素。
4. 这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach

6、filter() 过滤

      var arr = [1, 2, 3];
      var arr1 = arr.filter(function (item, index, arr) {
        // item为arr的元素，index为下标，arr原数组
        console.log(item); // 1, 2, 3
        console.log(index); // 0, 1, 2
        console.log(arr); // [1, 2, 3]
        return item > 2; // 返回一个过滤过的新数组[3]
      });
      console.log(arr);
      console.log(arr1); // 过滤过的新数组[3]

array.filter(function(value,index,arr)) 特点：

1. filter() 方法表示过滤，返回过滤后的新数组
2. filter() 方法按照原始数组元素顺序依次处理元素。

7、 some()

      // some()
      var arr = [1, 2, 3];
      arr.some((item, index, arr) => {
        // item为数组中的元素，index为下标，arr为目标数组
        console.log(item); // 1, 2, 3
        console.log(index); // 0, 1, 2
        console.log(arr); // [1, 2, 3]
      });

     

array.some(function(value,index,arr)) 特点：

1. some作为一个用来检测数组是否满足一些条件的函数存在，同样是可以用作遍历的函数签名同forEach，有区别的是当任一callback返回值匹配为true则会直接返回true，如果所有的callback匹配均为false，则返回false。
2. some() 方法会依次执行数组的每个元素：
3. 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
4. 如果没有满足条件的元素，则返回false。

      var arr = [1, 2, 3];
      var arr1 = arr.some(function (item, index, arr) {
        // item为arr的元素，index为下标，arr原数组
        console.log(item); // 1
        console.log(index); // 0
        console.log(arr); // [1, 2, 3]
        return item >= 1; // true
      });
      console.log(arr); // [1, 2, 3]
      console.log(arr1); // true

8、every()

      // every()
      var arr = [1, 2, 3];
      var arr1 = arr.every((item, index, arr) => {
        // item为数组中的元素，index为下标，arr为目标数组
        console.log(item); // 1, 2, 3
        console.log(index); // 0, 1, 2
        console.log(arr); // [1, 2, 3]
        return item > 0; // true
      });
      console.log(arr); // [1, 2, 3]
      console.log(arr1); // true

array.every(function(value,index,arr)) 特点：

1.  every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
2.  every() 方法使用指定函数检测数组中的所有元素：
3. 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
4. 如果所有元素都满足条件，则返回 true。

9、reduce()

      // every()
      var arr = [1, 2, 3];
      var arr1 = arr.reduce((sum, item, index, arr) => {
        // item为数组中的元素，index为下标，arr为目标数组,sum为上一次调用回调函数时的返回值,
        console.log(item);
        console.log(index);
        console.log(arr);
        return sum + item; 
      }, init);

array.reduce(function(value,index,arr)) 特点：

1. reduce ()方法表示数组归并（累加），返回累加后的值。

      // every()
      var arr = [1, 2, 3];
      var arr1 = arr.reduce((sum, item, index, arr) => {
        // item为数组中的元素，index为下标，arr为目标数组,sum
        console.log(sum); // 2, 3, 5
        console.log(item); // 1, 2, 3
        console.log(index); // 0, 1, 2
        console.log(arr); // [1, 2, 3]
        return sum + item;
      }, 2);
      console.log(arr); // [1, 2, 3]
      console.log(arr1); // 8

如有不同见解，欢迎讨论，更多情景，正在更新中。。。。。。