11 种在 Javascript 中遍历数组的方法

其他及荣誉提名：

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

啊……JavaScript，我们挚爱的语言，它的自由既是福也是祸。

在这篇文章中，我们将探讨在 Javascript 中遍历数组（而不是对象）的 11 种不同方法（顺序不分先后）。

让我们定义一下数组

好了，这是一个非常简单的数组，我们继续吧。

1- 可靠的旧 forEachArray.prototype.forEach

经典的 forEach 数组接受两个参数：

1. 一个包含三个参数的函数：当前元素、索引和原始数组。2
.this要传递给回调函数的替换值（箭头函数会忽略它）。

这是最推荐的迭代方式，并且与IE9兼容。

2- for-in 循环

这种循环用法并不推荐，通常只用于调试，但有时在生产环境中也可能遇到。它会遍历对象上定义的任何自定义属性，但默认的 JavaScript 属性除外。它也可以用于遍历数组，但如果你在数组原型上定义了任何内容，那么原型也会被遍历。

3 - for-of 循​​环（ES6）

这是最宽松的循环类型之一，它本身就包含在语言规范中。它与 for-in 循环非常相似，但两者之间的主要区别在于 for-of 循​​环只能用于集合类型（Map、Set、Array、TypedArray、NodeList 等）。它会避开对象属性，并且可以与任何实现了 [Symbol.iterator] Symbol 接口的对象一起使用（参见高级用法）。

主要区别在于Array.prototype.forEach，你可以使用break关键字停止循环，continue使用关键字跳过当前迭代。

4 - C 风格的 for 循环

这是计算机科学中最常用和最常教授的数组之一。它的语法继承自 C 语言，由三部分组成：

• 索引初始化器
• 运行条件
• 在每个循环结束时运行的索引修饰符

对于这种循环，您也可以同时使用break`and`关键字。continue

5 - While 循环

while 循环速度最快（原因不明），它的语法也非常简单：

• 运行条件

如果你想用它来遍历数组，你还需要跟踪一个索引变量，这使得它与 C 风格的循环非常相似，但缺点是索引会超出循环的范围。

对于这种循环，您也可以同时使用break`and`关键字。continue

6 - Do-while 循环

do-while 循环与 while 循环非常相似，但它会在执行结束时才评估运行条件，因此循环至少会运行一次。这就需要处理空数组的情况，因为访问空数组会导致错误。它的语法也很简单：

• 运行条件

哦，你也可以在这种循环中使用breakand关键字。continue

7 - Map 方法Array.prototype.map

ES5 新增了三种用于遍历数组以生成新数组的主要方法。其中一种方法是map……

map 函数接受两个参数：

1. 一个包含三个参数的函数：当前元素、索引和原始数组。2
.this要传递给回调函数的替换值（箭头函数会忽略它）。

它不应该改变原始数组。

8 - 过滤法Array.prototype.filter

filter 函数用于评估布尔表达式，如果返回 true，则正在迭代的元素将保留在新循环中；如果返回 false，则该元素将被忽略，并且不会出现在新数组中。

与 map 函数一样，filter 函数也接受两个参数：

1. 一个包含三个参数的函数：当前元素、索引和原始数组。2
.this要传递给回调函数的替换值（箭头函数会忽略它）。

它不应该改变原始数组。

9 - 简化方法Array.prototype.reduce

该reduce函数会跟踪新产品和当前元素，并接收一个参数来设置新产品的初始值。这起初可能难以理解，但你看的 reduce 示例越多，就越容易理解其语法。

reduce 方法接收以下输入：

1. 一个函数，其第一个参数为乘积，第二个参数为当前迭代的元素，第三个参数为当前元素的索引，最后一个参数用于访问原始数组。2
. 乘积的初始值。

reduce 方法通常用于将整个数组合成一个值，例如执行求和运算。

10 - 字符串数组连接方法Array.prototype.join

join 方法与我们介绍的最后一个方法（reduce）有一些共同之处：它确实会从数组生成单个输出，更具体地说是一个字符串，并且它只能在基于字符串的数组上运行。

它只有一个输入：要使用的分隔符字符串。

11 - ES2018 用于 await

这是 JavaScript 最新引入的功能之一，它允许我们在 for 循环中放置 await，从而允许它们迭代 Promise 和异步值（请参阅异步生成器函数）。

你可以将它for await of与异步生成器函数一起使用，以指定循环等待当前正在迭代的 Promise 完成，或者你可以使用它来等待 Promise 数组完成（Promise.all不过你可能应该为此使用异步生成器）。

另一个例子：

其他及荣誉提名：

ES2019Flat方法Array.prototype.flat

它遍历主数组以查找嵌套数组，并将任何嵌套数组中包含的值带到顶层。

您可以指定要深入数组结构多深才能将数组值提取到顶层。

ES2019Flatmap方法Array.prototype.flatMap

map它与后面跟着一个.完全相同flat。你可以用这个来扁平化生成嵌套数组的映射的乘积。

（感谢 Pablo Obando 的建议）😄

递归

你可以使用递归来遍历数组，谢谢@nombrekeff！

函数式编程中的递归是指函数能够调用自身，从而循环执行代码。递归有一些优点：

1. 你可以根据需要自定义循环。2
. 函数式编程方法。3
. 当处理树状结构或循环列表等其他类型的数据结构时，这种方法非常有用。

但要注意，JavaScript 的调用栈大小是有限制的，这意味着每次迭代都会在调用栈中注册一个调用，如果调用次数过多，就会溢出调用栈，导致异常；此外，由于这种特性，递归调用也会变慢。

你甚至可以将 C 风格的循环和 forEach 循环结合起来使用！

接下来，我们定义一个递归函数来复现以下功能Array.prototype.forEach：

所以，在 JavaScript 中遍历数组的方法有很多，比如反向 do-while 循环，或者其他一些不太常用的Array.prototype方法，例如every`if`、some`if`reduceRight或flatMap`if`，但这里列举一些最常用的 JavaScript 数组遍历方法🚀