数组遍历方法总结

在网上找了很久，没有很全面的，总是缺几个，索性自己查一查资料总结一下子

1.1 for 循环

不过多解释，大家都懂

实例：

  <script>
    var arr = [1, 2, 3, 4, 7, 8, 9]
    for (let i = 0;i < arr.length;i++) {
      console.log(arr[i]);
    }
  </script>

输出效果：

for循环优化 ：让arr.length只获取一次，不重复获取。

  <script>
    var arr = [1, 2, 3, 4, 7, 8, 9]
    for (let i = 0,len = arr.length;i < len;i++) {
      console.log(arr[i]);
    }
  </script>

1.2 forEach

由数组继承的Array对象的原型方法，在参数中可添加回调函数，回调函数可添加一个或多个参数。

参数包括：

• currentValue

  数组中正在处理的当前元素。

• index可选

  数组中正在处理的当前元素的索引。

• array可选

  forEach() 方法正在操作的数组。

实例：

<script>
    var arr = [1, 2, 3, 4, 7, 8, 9]
    arr.forEach(currentValue => {
      console.log(currentValue);
    });
  </script>

输出：

一般工作中都只加前面两个参数，就是当前值和索引两个参数

实例：

  <script>
    var arr = [1, 2, 3, 4, 7, 8, 9]
    arr.forEach((element, index) => {
      console.log('第' + index + '个数值为：' + element);
    });
  </script>

输出

注意点：

forEach不会改变数组本身的值，因为他每次回调函数返回的都是undefined，而且他不能被链式调用，但是不排除在回调函数里改变数组本身的值。最明显的例子就是forEach不能像是Map一样return改变数组本身的值。

实例：

  <script>
    var arr = [1, 2, 3, 4, 7, 8, 9]
    var arr2 = arr.forEach((element, index) => {
      console.log('第' + index + '个数值为：' + element);
      return element * 2;
    });
    console.log(arr2);
  </script>

输出：

另外一个注意点：

就是forEach一旦开始无法使用return或者break来终止循环或者跳出循环。

这个就不上例子了，很好理解。

1.3 map

由数组继承的Array对象的原型方法，在参数中可添加回调函数，回调函数可添加一个或多个参数。

参数包括：

• currentValue

  数组中正在处理的当前元素。

• index可选

  数组中正在处理的当前元素的索引。

• array可选

  forEach() 方法正在操作的数组。

和forEach最大的区别就是map可以通过return可以改变输出值，但是不改变原数组值，而非单纯的遍历

实例：

  <script>
    var arr = [1, 2, 3, 4, 7, 8, 9];
    const arr2 = arr.map(element => element * 2);
    console.log(arr);
    console.log(arr2);
  </script>

输出：

1.4 for-of

for-of可以迭代很多东西，包括包括 [Array]，[Map]，[Set]，[String]，[TypedArray]对象等等。在这里只解释一下在数组中的迭代。

for (variable of iterable) {
    //statements
}

variable是在每次迭代中，将不同属性的值分配给变量。

iterable是被迭代枚举其属性的对象。

实例：

  <script>
    var arr = [1, 2, 3, 4, 7, 8, 9];
    for (value of arr) {
      console.log(value);
    }
  </script>

输出：

与forEach的不同点就是支持return break和continue等操作。

1.5 for-in

For-in 在数组遍历的时候与for -of不同的是他遍历枚举属性，而像数组的值不是可枚举属性。可以说for-in不是合适的遍历数组的方法。

举个简单的例子，这篇就不涉及for-in和for-of的更详细的内容了，只需要知道for-in是遍历枚举属性的方法，他不适合遍历数组就OK了。
for-in 和 for-of和枚举属性等概念在这里：https://www.cnblogs.com/wangzirui98/p/11227853.html

实例：

  <script>
    var arr = [1, 2, 3, 4, 7, 8, 9];
    for (value in arr) {
      console.log(value);
    }
  </script>

输出：

所以输出的都是枚举属性，不会输出具体的值。

1.6 find 和 findIndex

准确的说find不是遍历数组的，而是寻找数组中的具体的值的作返回的一个方法。他和findIndex非常相像，findIndex是返回具体的索引的。

他是由数组继承的Array对象的原型方法，所以直接在数组上调用，他的方法体内需要一个回调函数，在数组每一项上执行的函数，接收 3 个参数：

• element

  当前遍历到的元素。

• index可选

  当前遍历到的索引。

• array可选

  数组本身。

他的返回值可以是具体的值，或者undefined(没有找到符合要求的元素)

实例：

  <script>
    var arr = [1, 2, 3, 4, 7, 8, 9];
    const res = arr.find(element => element > 3)
    console.log(res);
  </script>

输出：4

所以说他不会返回具体一个数组，而是返回下一个的值。

findIndex同理：

  <script>
    var arr = [1, 2, 3, 4, 7, 8, 9];
    const res = arr.findIndex(element => element > 3)
    console.log(res);
  </script>

输出：3（PS：因为元素4在索引3上。这里的3不是指3这个值）

1.7 filter

这个准确的说也不是用来遍历的，顾名思义，它是用来筛选数组的。同样，它里面放一个回调函数，函数里面放三个参数

• element

  数组中当前正在处理的元素。

• index可选

  正在处理的元素在数组中的索引。

• array可选

  调用了 filter 的数组本身。

实例：

  <script>
    var arr = [1, 2, 3, 4, 7, 8, 9];
    const res = arr.filter(element => element > 3)
    console.log(res);
  </script>

输出：

需要强调的是filter是通过回调函数返回的true或者false来返回不同的值来组成数组的。而且他不会改变原有的数组。

1.8 some 和 every

some和every遍历数组的每个值然后返回一个布尔值。如果每个值运行回调函数都返回true或者都返回false，every会返回true或者false；如果有一个返回true，some会返回true，如果所有返回false则some会返回false。它们里面放的这个回调函数里面可以放三个参数：

• element

  数组中当前正在处理的元素。

• index可选

  正在处理的元素在数组中的索引。

• array可选

  调用了 filter 的数组本身。

实例：

  <script>
    var arr = [1, 2, 3, 4, 7, 8, 9];
    let res = arr.some(element => element > 10)
    console.log(res);
    res = arr.some(element => element > 8)
    console.log(res);
    res = arr.some(element => element < 10)
    console.log(res);
    res = arr.every(element => element > 3)
    console.log(res);
    res = arr.every(element => element > 0)
    console.log(res);
  </script>

输出：

1.9 reduce

reduce()方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值.
回调函数执行数组中每个值的函数(也可以叫做reducer),包含4个参数.

• previousValue

  上一次调用回调返回的值,或者是提供的初始值(initialValue)

• currentValue

  数组中当前被处理的元素

• index

  当前元素在数组中的索引

• array

  调用reduce的数组

实例：

  <script>
    var arrString = 'abcdaabc'
    // 获取字符中中每个字母出现的次数
    let count = arrString.split('').reduce(function (res, cur) {
      res[cur] ? res[cur]++ : res[cur] = 1
      return res
    }, {})
    console.log(count)
  </script>

输出：

仅是自己总结，要了解全面的话还是需要去查文档，推荐MDN上仔细阅读文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array