《Js》Array数组中遍历 的方法和使用场景

在ES5之后，数组的增加了很多方法，一些方法中带有 “遍历” 的旗号

forEach

它的功能是把数组的每一项都罗列出来，仅此而已！它是不能返回东西的。

比如你想这样：

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

当然，如果你实在想用forEach来收集东西，可以在外部定义一个变量去接。。
既然这样，那为什么不用接下来说的 map 呢？

map

它的功能是：映射！无论发生什么事情，原来的数组有多长，返回的新数组就有多长

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

如果你想筛选出只有一项，可以借助 filter 进一步筛选，你还可以用一下的 reduce 一步到位

reduce

具体参考 mdn...
我一般使用它来一步映射+筛选

var arr = [ 1, 2, 3, 4 ];
var res = arr.reduce (function (acc, item) {
  if (item == 1) {
    acc.push(item)  // 收集
  }
  return acc;
}, []); // 初始化是一个数组
console.log(res); // [1]

问题来了，有了数组的这些方法，普通的 for 循环就废了吗？

答案：绝对不是！

普通的 for 循环更加的灵活，
以上数组新增的方法，本质都是迭代器iterable，它死都要把每一下遍历到。。是不能中断的：
假设我想遍历到第一项之后的时候就中断：

var arr = [ 1, 2, 3, 4 ];
arr.forEach(item => {
  console.log('hello')
  if (item === 1) {
    // break 是直接报错的...
    return
  }
});

会发现，结果还是打印了4次 hello。
只有普通的 for循环才能中断，不再执行下去！这一点 在一些嵌套循环中尤为重要！