如何在 JavaScript 中遍历数组？

在 JavaScript 中，数组是一种存储项目集合的有效方式。我们可以用数组做的基本事情之一就是遍历或迭代其中的每个元素。让我们来看看我们可以遍历对象的不同方法。

1. 使用 for 循环

数组上的 for 循环 是一种由来已久的方法。这种选项对循环的索引以及随时中断循环的机会给予了完全的控制。

代码

说明

• for 循环从一个新的变量 i 开始，设置为 0。
• 只要数组对象中的变量小于 i（fruits.length），循环就会继续。
• 在每次循环中，fruits[i] 获取当前元素，然后显示在对话框中。
• 每次迭代后，i 值都会增加。

输出

 
Apple
Banana
Cherry
Date   

2. 使用 for...of 循环

For...of 循环 是一种较新、更现代的方法，它在 ES6（ECMAScript 2015）中引入。它为迭代可迭代对象（如数组）提供了更简单的语法。

代码

说明

• for...of 循环的实际功能是通过让每个颜色轮流显示颜色来工作的。
• 在每次迭代中，循环变量 colour 成为当前元素。
• 它的方法更优雅，因为它更直接，并且消除了手动管理索引的需要。

输出

 
Red
Green
Blue
Yellow   

3. 使用 forEach 方法

forEach 是一种方法，用于运行为数组中的每个项目提供的给定函数。它是一个高阶函数，由于其可读性很强，初学者可以很容易地理解它。

代码

说明

• forEach 方法是一个以回调函数作为参数的函数。
• 该函数是为 numbers 数组中的每个成员运行的。
• number 代表当前的数组元素。

输出

 
1
2
3
4   

4. 使用 map 方法

Map 方法是一个函数，它将函数作为第一个输入参数，然后是数组。

代码

说明

• map 方法生成一个新数组作为输出，其中元素是输入函数的计算结果，该函数作为数组的前缀调用。
• 在这种情况下，函数将每个元素乘以 2。

输出

 
[2, 4, 6, 8]   

5. 使用 while 循环

一个 while 语句是一个重复语句，它一直执行直到条件为真。

代码

说明

• while 循环将运行直到为其表达式 index< animals.length 被满足。
• 这里重要的步骤是使用 animals 数组的 animals[index] 来访问当前元素。
• 计数器也在每一步递增。

输出

 
Dog
Cat
Elephant   

6. 使用 do...while 循环

do...while 循环要求在检查条件是否为真之前，至少执行一次循环体。

代码

说明

• do...while 块会先执行，然后检查条件。
• 第一次执行后，它会检查 i < cities.length 是否再次执行。

输出

 
New York
Los Angeles
Chicago   

7. 使用 reduce 方法

Reduce 函数对指定数组的每个元素运行，以产生一个单一的输出值，该值是 reducer 函数的结果。这是一个处理数组以生成不仅仅限于单个过程的最终结果的过程。因此，虽然它不是一个传统的循环，但它可以检查所有记录并用于准备答案。

代码

说明

• 使用 reducer 就像一系列应用，你必须提供它的第一个元素，在本例中是 0。
• 这个 reducer 函数是过程的核心，accumulator 是真实结果，而 currentValue 指的是元素。
• 通过函数，数组元素得到聚合（总和）。

输出

 
30   

8. 使用 for...in 循环

The for...in 循环 用于迭代对象的枚举属性。虽然它适用于数组中的项目，但它的这个特性使其在数组的情况下不太受欢迎，因为它将索引视为字符串。

代码

说明

• for...in 循环枚举 languages 数组的索引。
• index 是一个代表索引号的字符串，languages[index] 用于访问相应的元素。
• 在参考文献中任何不必要的循环迭代都可能导致意外结果。

输出

 
JavaScript
Python
Java   

9. 使用 entries() 方法

此方法生成一种浏览器可以处理的新形式数据，即所谓的迭代器数组。每个槽都包含元素的位置和值的元组。

代码

说明

• 返回的迭代器具有键和值。
• for...of 循环逐个列出每个迭代器，在此过程中生成的数组包含索引和元素。
• 解构赋值 [index, country] 提供了一种简单的方式来提取数组中的位置和值。

输出

 
0 USA
1 Canada
2 Mexico   

10. 使用 Array.from() 方法

通过使用 Array.from() 方法，可以从类数组对象或可迭代对象创建新的数组对象。它与传统的循环机制不同，相反，它能够将可迭代对象（如字符串）转换为数组，然后可以使用传统的迭代方式进行循环访问。

代码

说明

• Array.from() 方法将字符串 name 转换为一个数组，其中每个元素都是字符串中的一个字符。
• 接下来，将生成的 Array 传递给 forEach 方法，该方法随后被传递给 nameArray。
• 对于每次迭代，当前字符（即控制台打印的字符）都会显示在屏幕上。

输出

 
J
o
h
n   

结论

如果您熟悉该语言，您可能会注意到 JavaScript 在数组原型中提供了一些方法。JavaScript 提供了几种遍历数组的方法，每种方法都有其自身的用途和好处。您将使用的循环类型是 for 循环、for-each 循环还是 while 循环。而且，您应该使用您最喜欢的方法。