一文搞懂JS中数组与对象的几种循环方式

一、引言

在 JavaScript 编程中，数组和对象作为最为常用的数据结构，对它们的操作贯穿于项目开发的方方面面。无论是处理一组数据元素，还是管理具有键值对形式的复杂信息，循环遍历都是必不可少的操作手段。从简单的数据展示、筛选，到复杂的数据转换、聚合，不同的循环方式都有着各自独特的优势与适用场景。熟练掌握多种循环方式，能够让我们在面对多样化的编程需求时，写出更加简洁、高效且易维护的代码。接下来，让我们深入探索 JS 中数组与对象的循环奥秘。

二、数组的循环方式

2.1 for 循环：最经典的遍历手段

for 循环作为 JavaScript 中最基础、最常用的循环结构，在数组遍历领域有着无可替代的地位。其基本语法如下：

for (初始表达式; 条件表达式; 更新表达式) {
    // 循环体
}

当应用于数组时，通常利用索引来逐个访问数组元素，示例代码如下：

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]); 
}

在上述代码中，首先定义变量 i 并初始化为 0，作为数组的索引。每次循环时，判断 i 是否小于数组 arr 的长度，若是，则执行循环体中的代码，即打印当前索引对应的数组元素。循环体执行完毕后，通过更新表达式 i++ 让索引自增 1，接着进行下一次循环，直到索引超出数组长度，循环结束。
for 循环的优势在于其灵活性极高，开发者可以完全掌控循环的起始、终止条件以及索引的变化步长。通过修改初始表达式、条件表达式和更新表达式，能够轻松实现从指定位置开始遍历、反向遍历、跳跃式遍历等复杂操作。在需要对数组进行精细操作，如同时处理多个数组且索引有对应关系，或者根据特定条件灵活调整遍历节奏时，for 循环能展现出强大的适应性。而且，由于其底层运行机制相对简单直接，在处理大规模数组时，效率表现较为出色。
然而，for 循环也存在一定缺点，代码相对冗长，尤其是当嵌套多层循环时，容易使代码结构变得复杂，可读性降低，增加后期维护成本。此外，若不小心错误设置初始、条件或更新表达式，可能导致数组越界或死循环等问题。

2.2 forEach 循环：简洁的数组迭代器

forEach 循环是 ES5 中引入的专门用于数组遍历的方法，它为数组的迭代提供了一种简洁直观的方式。其语法如下：

array.forEach(function(currentValue, index, array) {
    // 操作代码
}, thisArg);

其中，currentValue 代表当前正在遍历的数组元素，index 是该元素的索引，array 即为被遍历的数组本身，thisArg 是可选参数，用于指定回调函数内部 this 的指向。以下是一个简单示例：

const arr = [10, 20, 30];
arr.forEach((value, index) => {
    console.log(`索引${index}处的元素值为：${value}`);
});

上述代码会依次输出数组 arr 中每个元素及其对应的索引信息。forEach 循环在执行过程中，会自动遍历数组的每一个元素，无需像 for 循环那样手动管理索引的更新，使得代码更加简洁明了，专注于对元素的操作处理。同时，它不会对原数组产生任何修改，保证了数据的原始性，这在很多只需要读取数组元素进行操作而不希望改变原始数据的场景下非常实用。
不过，forEach 循环也有一些局限性。由于其设计初衷是完整遍历数组，所以无法像传统的 for 循环那样使用 break 或 continue 语句中途跳出循环，若遇到某些满足特定条件即可终止遍历的情况，就显得不够灵活。另外，在一些低版本浏览器（如 IE8 及以下）中，不支持箭头函数形式的回调，兼容性方面存在一定问题，需要开发者额外注意并进行兼容性处理。

2.3 map 循环：强大的数组映射工具

map 循环是数组原型上的一个高阶函数，它能够基于原数组创建一个新数组，新数组中的每个元素都是原数组元素经过特定函数处理后的结果。其语法如下：

const newArray = array.map(function(currentValue, index, array) {
    // 返回处理后的值
    return processedValue;
});

下面通过一个示例来展示其强大功能：

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((num) => num ** 2);
console.log(squaredNumbers); 

在这个例子中，原数组 numbers 中的每个元素都被传入箭头函数，经过求平方运算后，返回的结果组成了新数组 squaredNumbers。原数组 numbers 保持不变，符合函数式编程中 “无副作用” 的理念，避免了数据的意外修改。
map 循环的优势不仅在于能够方便地对数组元素进行批量转换，而且由于它返回一个新数组，使得可以链式调用其他数组方法，进一步对新生成的数据进行处理，构建出简洁而高效的数据处理流水线。比如，可以在 map 之后紧接着调用 filter 方法筛选出符合特定条件的元素，代码如下：

const processedNumbers = numbers.map((num) => num * 2).filter((num) => num > 5);
console.log(processedNumbers); 

这种链式操作能够在不创建中间变量的情况下，一气呵成地完成复杂的数据转换与筛选任务，大大提升代码的简洁性与表现力。

2.4 for of 循环：ES6 的