本文详解为何在 for 循环中将索引重置为 0 会导致首元素丢失，并提供安全、可读、符合 javascript 最佳实践的无限遍历方案。
本文详解为何在 for 循环中将索引重置为 0 会导致首元素丢失，并提供安全、可读、符合 javascript 最佳实践的无限遍历方案。
在 JavaScript 中，使用 for 循环实现数组的无限重复遍历（如 [1,2,3,4,5] → 1,2,3,4,5,1,2,3,4,5,...）看似简单，但一个细微的执行时序错误就会导致逻辑偏差——正如问题中所示：首元素 1 仅在第一次完整循环中输出，后续循环从 2 开始。
? 问题根源：for 循环的三段式执行机制
标准 for (init; condition; final-expression) 的执行顺序为：
- 执行初始化（i = 0）
- 检查条件（i < li.length）→ 若为真，则进入循环体
- 执行循环体（console.log(li[i]) + 条件重置逻辑）
- 执行终表达式（i++）
- 返回第 2 步继续判断
关键就落在第 4 步：i++ 总是在本轮循环体执行完毕后无条件执行。
来看原代码在 i === 4（即访问最后一个元素 li[4] === 5）时的行为：
立即学习“Java免费学习笔记（深入）”；
i = 4 → 条件 i < 5 成立 → 进入循环体 console.log(li[4]) // 输出 5 if (4 + 1 === 5) → true → i = 0 → 循环体结束 → 执行 i++ → i 变为 1 ✅（不是 0！） → 下一轮：i = 1 → 输出 li[1] === 2
因此，1 永远不会再次出现——因为 i 实际跳过了 0，直接变为 1。
✅ 正确解法：让 i++ 后回归 0
要使下一轮从索引 0 开始，需让 i++ 前的值为 -1：
const li = [1, 2, 3, 4, 5];
for (let i = 0; i < li.length; i++) {
console.log(li[i]);
if (i === li.length - 1) { // 等价于 i + 1 === li.length，更直观
i = -1; // 下次 i++ 后变为 0
}
}✅ 输出：1 2 3 4 5 1 2 3 4 5 ...（无限循环）
⚠️ 注意事项：
- 必须使用 let 声明 i（避免全局污染和变量提升问题）；原题中 i=0 是隐式全局变量，属不良实践。
- 此方案虽可行，但可读性差、易出错、违背 for 循环设计本意，不推荐用于生产环境。
? 更优替代方案（推荐）
方案 1：使用 while(true) + 模运算（清晰、安全、高效）
const li = [1, 2, 3, 4, 5];
let i = 0;
while (true) {
console.log(li[i % li.length]);
i++;
// 可选：添加终止条件防止失控，例如 if (i > 20) break;
}方案 2：封装为可复用的生成器函数（ES6+，最优雅）
function* infiniteLoop(arr) {
let i = 0;
while (true) {
yield arr[i % arr.length];
i++;
}
}
// 使用示例
const gen = infiniteLoop([1, 2, 3, 4, 5]);
for (let i = 0; i < 12; i++) {
console.log(gen.next().value); // 1 2 3 4 5 1 2 3 4 5 1 2
}方案 3：使用 setInterval 实现可控节拍输出（适合 UI 场景）
const li = [1, 2, 3, 4, 5];
let index = 0;
const interval = setInterval(() => {
console.log(li[index]);
index = (index + 1) % li.length;
}, 500); // 每500ms输出一个
// 停止示例：clearInterval(interval);✅ 总结
- 原始 for 循环中 i = 0 导致跳过首元素，本质是忽略了 i++ 的强制执行时机；设 i = -1 可修复，但属“技巧性 hack”。
- 生产代码应优先选择语义明确、易于维护的方案：while(true) + 模运算 或 Generator 函数。
- 任何无限循环都必须配备显式的退出机制（如计数器、用户交互、条件判断），否则将阻塞主线程或导致浏览器无响应。
掌握循环底层机制，才能写出既正确又健壮的代码。
