迭代 JavaScript 数组

2025年4月18日 | 阅读 4 分钟

JavaScript 中的迭代是什么?

迭代是指当我们执行集合中每个项目的代码时发生的过程,基本上是针对数组中的元素或对象的属性。

借助迭代器,我们可以定义序列,并且它可能会在完成时返回值。迭代器是一个用于数组循环的对象,因此我们可以对数组的每个元素进行迭代。在 JavaScript 中,遍历数组是每个 JavaScript 开发人员都应该知道的一项基本技能。

JavaScript 中遍历数组的方法

JavaScript 中有一些遍历数组的方法。一些常见的方法如下:

使用 for 循环()

在 JavaScript 中,for 循环是我们用于遍历数组的最常用技术之一。在 JavaScript 中,For 循环允许我们循环遍历数组的每个元素并对其执行操作。

例如

输出

JavaScript Iterate Over Array

使用 for...of 循环()

在 JavaScript 中,我们可以使用另一种循环技术来遍历数组:for...of 循环。此循环与前一个循环类似,在此类循环中,我们无需指定索引,这意味着我们可以循环遍历元素而不指定数组的索引。

例如

输出

JavaScript Iterate Over Array

使用 forEach 循环()

在 JavaScript 中,我们还有另一个名为 forEach 循环的循环,可用于遍历数组。它有一个内置的数组方法,可以帮助我们循环遍历每个元素并对其执行操作。

例如

输出

JavaScript Iterate Over Array

使用 Map()

在 JavaScript 中,map() 方法用于通过应用函数到每个元素来创建一个新数组,之后它将返回结果。换句话说,使用 map() 方法,我们可以将函数作为参数调用,该函数对数组的每个元素执行,并回调该函数,该函数将返回该元素的新值。

例如

输出

4, 49, 1, 0, 9

使用 Filter() 方法

在 JavaScript 中,我们使用 filter() 方法来根据条件过滤数组中的元素。借助 filter() 方法,我们可以将函数作为参数回调,它将在执行每个元素后返回布尔值。

例如

输出

2, 4

使用 reduce() 方法

在 JavaScript 中,我们还有另一种方法可用于使用函数式逻辑遍历数组,它将数组缩减为单个值。

例如

输出

28

为什么要遍历 JavaScript 中的数组?

访问数组元素

在 JavaScript 中,迭代允许开发人员单独访问数组的元素,还有助于我们根据需要读取和修改值。

执行操作

通过遍历数组,我们可以对每个元素执行各种操作,例如计算、转换或验证。

过滤数据

借助迭代,我们可以根据特定标准过滤数组,还允许开发人员提取满足特定条件的元素。

映射数据

通过使用迭代,我们可以将数组的每个元素映射到新值或结构,我们可以创建原始数组的转换版本。

聚合值

在 JavaScript 中,迭代使开发人员能够聚合数组中的数据,例如计算总和或查找某些元素的最大值或最小值。

异步迭代

某些操作涉及异步操作,例如从 API 获取数据或执行 I/O 操作,迭代允许开发人员按顺序处理每个元素,确保正确的执行流程。

总而言之,在 JavaScript 中遍历数组对于有效操作和处理数据至关重要,使开发人员能够构建动态和交互式 Web 应用程序。

遍历数组的限制

虽然在 JavaScript 中遍历数组提供了强大的功能,但它也有一定的局限性。

没有内置的 break

在 JavaScript 中,有一些数组迭代方法(如 forEach())不支持提前中断循环。这使得根据特定条件停止迭代变得具有挑战性。

不可变方法

在 JavaScript 中,forEach()、map() 或 filter() 等方法不会更改原始数组,但它们会返回新数组或对每个元素执行操作而不更改数组本身。这种不变性在需要就地修改的情况下可能受限。

索引复杂性

在某些情况下,在迭代期间访问当前元素的索引可能很复杂或效率低下,尤其是在我们使用 forEach() 等不提供直接索引访问的方法时。

兼容性问题

旧版本的 JavaScript 可能不支持 ECMAScript 标准中引入的较新的数组迭代方法。当我们为支持现代 JavaScript 功能有限的环境编写代码时,这可能导致兼容性问题。

了解这些限制对于开发人员在为其特定用例选择合适的迭代方法以及实现高效且可维护的代码至关重要。