前言

随着ES6中新增对数组的find方法，对于数组的遍历已经有越来越多的方法可以选择，我们完全可以抛弃古老的for方法。今天这篇文章我们就一起来看看在Javascript中都可以使用哪些方法来遍历一个数组吧，同时提供一些兼容性的处理。

本篇文章中的代码已经开源到Github上，感兴趣的可以自取，Github地址为：

https://github.com/zhouxiongking/article-pages/blob/master/articles/arrayTraverse/arrayTraverse.js

Javascript

forEach

forEach是数组遍历使用最为频繁的一个方法，它的作用是使用定义的函数处理数组中的每个元素。

首先我们来看看forEach的基本使用方法。

forEach基本使用

forEach中定义的回调函数接收三个参数，分别是当前元素值，当前元素索引，当前数组。

实际上forEach方法接收第二个参数，如果传入这个参数，则回调函数中的this就指向这个参数值，如果没有传入，则this指向全局变量window。通过下面的代码可以很容易看清楚。

传入第二个参数

这里我们提供一个兼容性处理的方案。

forEach兼容性处理

map

map方法会将数组中每个元素做处理得到新的元素，然后返回这些新的元素组成的数组。其回调函数中接收的参数和forEach一样，其基本使用如下。

map基本使用

需要注意的一点是，在map的回调函数中需要有return返回值，如果没有返回值，得到的结果会是由undefined组成的数组。

必须有返回值

这里提供一下兼容性处理。

map兼容性处理

filter

filter顾名思义，过滤数组中满足条件的数值，得到一个新的数组。在filter的回调函数中需要返回true或者false，true代表满足条件，通过筛选；false代表不满足条件，不通过筛选。

filter基本使用方法

这里提供一下兼容性处理。

filter兼容性处理

some与every

some方法与every方法在使用上有很多相似之处。some方法的作用是只要数组中某个元素满足条件就返回true；而every方法作用是数组中每个元素都要满足条件才返回true。

它们的测试结果如下所示。

some与every

some与every方法的兼容性处理也很类似，一个是对true值的判断，一个是对false值的判断。对some方法的兼容性处理如下。

some方法兼容性处理

every方法兼容性处理如下。

every兼容性处理

reduce

reduce方法作用是使用可能提供的初始值来处理数组中的每个元素，每轮计算都会有一个返回值进入下一轮计算，得到一个最终的返回值。

reduce在是否接收初始值上会对结果有很大的影响。在不接收初始值的情况下，会将第一个值作为初始值，索引是从第二个值开始计算。通过下面的代码可以很容易看出来。

reduce不接收初始值

当reduce接收初始值时，索引是从数组第一个值开始。

reduce接收初始值

这里提供对reduce方法的兼容性处理。

reduce方法兼容性处理

find

find方法是ES6新增的方法，其作用是返回数组中第一个满足条件的值，如果都不满足条件则返回undefined。其基本使用方法如下所示。

find基本使用

这里提供一下兼容性处理。

find兼容性处理

结束语

今天这篇文章主要总结了下Javascript中对数组进行遍历的一些方法，以及对低级浏览器提供了一些兼容性处理，你学会了吗？