基础遍历方法：从简单到灵活的入口
普通 for 循环（基于下标的遍历）
本段介绍最基础的遍历方式，利用索引直接访问数组元素，具有明确的边界控制与高可预测的性能表现。手动管理下标和边界使得在需要严格控制循环条件时更直观；同时，逐项访问数组元素也方便嵌入复杂的条件判断和中断逻辑。对于小型数组，这种方式通常比其他迭代略占用更少的抽象开销。
在编码风格上，可读性来自简单的语句结构，但容易产生冗余代码，且不适合后续需要变换遍历策略的场景。若你需要提前退出循环，传统 for 循环的 break/continue 提供了强控制力。下面给出一个基础示例，展示如何逐个输出数组元素：
// 普通 for 循环示例
const arr = [10, 20, 30, 40];
for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}
for...of 循环（基于迭代器的遍历）
该方法基于语言对迭代协议的支持，语法更简洁，不需要显式管理下标；底层仍然依赖于数组的默认迭代器。对于日常遍历，代码可读性提升明显，同时也保留了对 break 的使用能力，便于某些条件下的提前结束。
在实际应用中，for...of 会使用数组的默认 Symbol.iterator，允许你把遍历逻辑与数据结构解耦。若你的目标是保持清晰的遍历语义，这种方式通常是首选。以下为对 arr 的简单遍历示例：
// for...of 循环示例
const arr = [10, 20, 30, 40];
for (const val of arr) {console.log(val);
}
forEach 回调遍历（函数式风格）
对于喜欢函数式编程风格的开发者，forEach 提供了简洁的回调遍历，但它的局限也很明显：无法在遍历中途简单地中断，如果需要提前退出或跳过再处理，将需要额外的状态管理。回调式遍历也让组合其他函数更直观，但会产生额外的函数调用开销。
当你需要对每一个元素执行独立的副作用操作，且不依赖复杂的遍历控制时，forEach 是一个快速、直观的选择。下面是一个简单示例，展示如何对每个元素执行处理：
// forEach 遍历示例
const arr = [5, 15, 25, 35];
arr.forEach((val, idx) => {console.log('index', idx, 'value', val);
});
迭代器协议与自定义实现：从内在原理到自定义结构
迭代器协议要点
要深入理解数组迭代器，首先要掌握 迭代器协议、Symbol.iterator 与 next() 的工作方式。通过该协议，任何可迭代对象都可以被统一遍历，遍历过程会返回一个包含 value 与 done 两个属性的对象。
在数组层面，迭代器实现通常对用户透明，但理解这一点有助于你望向自定义数据结构的遍历能力。下面展示一个简单的迭代器创建示例，演示 next() 的逐步获取：
const iter = [1, 2, 3][Symbol.iterator]();
console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { value: undefined, done: true }
自定义可迭代对象的实现
除了内置的数组，你还可以为自定义集合实现可迭代接口，使其具备与数组相同的遍历能力。实现通常涉及 Symbol.iterator，并返回一个实现 next() 的迭代器对象，或使用生成器语法达到同样效果。
下面给出一个自定义对象的简单可迭代实现，演示如何提供自定义的遍历序列：
const custom = {*[Symbol.iterator]() {yield 1;yield 2;yield 3;}
};// 使用自定义迭代对象进行遍历
for (const x of custom) {console.log(x);
}
高效实现场景对比：从遍历到高效实现的场景
大数据量遍历与内存管理
在面对海量数据时，避免创建中间数组成为提升性能的关键点。直接通过遍历器逐条处理数据，能显著降低峰值内存占用。对于流式数据或分块数据，逐步消费与处理的策略尤为重要。
一个典型做法是结合生成器实现惰性映射/过滤，按需产出结果而非一次性把所有元素放入新数组中。下面的示例展示了如何使用生成器实现惰性映射：
// 惰性映射生成器
function* mapGen(arr, fn) {for (const x of arr) yield fn(x);
}
for (const v of mapGen([1,2,3,4], x => x * 2)) {console.log(v);
}
避免副作用与性能对比
与 map、filter 等高阶函数相比，纯循环结合条件判断往往具有更低的函数调用开销；若你需要连续地、逐步地处理数据，直接使用迭代器或生成器会更高效。惰性遍历与逐步消费在高性能场景中尤为关键。
为了对比不同实现带来的真实开销，你可以在实际项目中做一个简单的基准：将 map 直接应用于数组，和用生成器组合 mapGen 的惰性实现做对比。示例对比如下：
// 直接映射：会创建新数组
const doubled = [1,2,3,4].map(x => x * 2);// 惰性映射：不立即创建完整结果集
function* lazyMap(arr, fn) { for (const x of arr) yield fn(x); }
for (const y of lazyMap([1,2,3,4], x => x * 2)) { console.log(y); }
与常用函数组合的对比与实现：如何在性能和可读性之间取舍
内置方法 vs 自定义迭代器
常用的 map、filter、reduce 等内置方法非常便捷，但它们在某些场景会产生中间结果数组，从而增加额外的内存和时间成本。直接使用内置高阶函数时要关注中间数组的创建与 GC 开销。
如果你愿意采取惰性策略，可以用自定义迭代器或生成器来实现 惰性映射/过滤，从而在遍历阶段就控制数据流。以下给出地图映射的对比示例：
// 直接映射，返回新数组
const mapped = [1,2,3].map(x => x * 2);// 惰性映射：通过生成器逐步产生结果
function* lazyMap(arr, fn) { for (const x of arr) yield fn(x); }
for (const v of lazyMap([1,2,3], x => x * 2)) {console.log(v);
}
惰性实现的实际收益
在需要组合多步数据处理的场景中，惰性实现能显著降低内存使用，并使管线更易于扩展到异步数据源。实现时，你可以把组合操作写成生成器链条，从数据源到消费端逐步传递。
下面给出一个简单的惰性管线示例，展示如何把多步变换串成一条数据流：
function* mapGen(arr, fn) {for (const x of arr) yield fn(x);
}
function* filterGen(iterable, predicate) {for (const x of iterable) if (predicate(x)) yield x;
}
const pipeline = filterGen(mapGen([1,2,3,4], x => x * 3), x => x > 5);
for (const v of pipeline) {console.log(v); // 输出 6、9、12
}
实战案例：在日常前端开发中的应用场景
同步数据遍历的案例
在 UI 渲染、事件驱动处理等同步场景中，简单直接的遍历方式通常就足够满足性能需求。结合阈值控制和早停逻辑，for 循环、for...of 或 forEach 都可以在需要时提供足够的性能与灵活性。
例如，在渲染一个可滚动的列表时，你可能需要逐项处理数据并将可视元素创建组合起来，这时候通过一个清晰的遍历阶段就能实现高效渲染前的准备工作：
const items = getData();
for (const it of items) {renderItem(it);if (shouldPause()) break;
}
异步数据流的遍历（async iteration）
当数据以异步流的形式到来时，异步迭代（for await...of） 能让你像同步遍历一样简洁地处理数据块，同时保持对背压和流控的控制。
如果数据源是一个异步可迭代对象，使用 for await...of 能显著简化代码结构，避免 Promise 地狱式的回调拼接：
async function processAsync(iterable) {for await (const item of iterable) {await processItem(item);}
}// 简单的异步生成器示例
async function* makeAsyncRange(n) {for (let i = 0; i < n; i++) {await new Promise(resolve => setTimeout(resolve, 0));yield i;}
}
for await (const v of makeAsyncRange(5)) {console.log(v);
}
