本文解析 for 循环中重置索引导致首元素丢失的根本原因，并提供安全、可维护的无限遍历方案，包括修正版 for 循环、更推荐的 while 实现及现代 javascript 替代方案。
本文解析 for 循环中重置索引导致首元素丢失的根本原因，并提供安全、可维护的无限遍历方案，包括修正版 for 循环、更推荐的 while 实现及现代 javascript 替代方案。
在 JavaScript 中实现数组元素的无限循环输出（如 [1,2,3,4,5] → 1,2,3,4,5,1,2,3,4,5,...）看似简单，但直接在 for 循环中修改计数器 i 容易引发逻辑陷阱。问题代码如下：
const li = [1, 2, 3, 4, 5];
for (let i = 0; i < li.length; i++) {
console.log(li[i]);
if (i + 1 === li.length) {
i = 0; // ❌ 错误：跳过下一轮的 i=0
}
}为何第一次循环后 1 不再出现？
关键在于 for 循环的执行顺序：每次迭代结束时，无论是否手动修改 i，都会自动执行 i++。当 i 达到 4（即最后一个索引），console.log(li[4]) 输出 5，随后进入 if 块将 i 设为 0；紧接着，循环自动执行 i++ → i 变为 1，下一轮直接访问 li[1]，因此 1 被跳过，输出序列为 1,2,3,4,5,2,3,4,5,...。
✅ 修复方案一：设 i = -1（使 i++ 后恢复为 0）
const li = [1, 2, 3, 4, 5];
for (let i = 0; i < li.length; i++) {
console.log(li[i]);
if (i + 1 === li.length) {
i = -1; // ✅ 正确：下次 i++ 后 i=0
}
}⚠️ 但该写法违反 for 循环的语义直觉，可读性差，且易出错（如误写为 i = 0）。更推荐以下两种专业实践：
方案二：使用 while 循环（清晰可控）
const li = [1, 2, 3, 4, 5];
let i = 0;
while (true) {
console.log(li[i % li.length]); // 利用取模自动回绕
i++;
// 可选：添加终止条件避免死循环（如调试时）
// if (i > 20) break;
}✅ 优势：逻辑显式、无副作用、天然支持任意长度数组；i % li.length 是无限循环的标准数学解法。
立即学习“Java免费学习笔记（深入）”；
方案三：函数式替代（生产环境首选）
若需可中断、可复用、符合现代规范的无限序列，建议封装为生成器函数：
function* infiniteCycle(array) {
let i = 0;
while (true) {
yield array[i % array.length];
i++;
}
}
// 使用示例
const cycle = infiniteCycle([1, 2, 3, 4, 5]);
console.log(cycle.next().value); // 1
console.log(cycle.next().value); // 2
// 或批量获取前 8 项：
console.log(Array.from({ length: 8 }, () => cycle.next().value));
// → [1, 2, 3, 4, 5, 1, 2, 3]? 注意事项总结：
- 避免在 for 循环体中修改计数器变量，尤其当循环头部已含增量表达式时；
- 无限循环必须配备明确的退出机制（如 break、return 或外部控制），否则将阻塞主线程；
- 在浏览器环境中，无节制的 console.log 可能拖慢调试器，建议结合 setTimeout 或 requestAnimationFrame 实现节流；
- 数组为空 [] 时，i % li.length 会返回 NaN，实际使用前应校验 array.length > 0。
掌握索引回绕的本质（取模运算）和循环控制权的归属，是写出健壮无限遍历逻辑的关键。优先选择 while + % 或生成器方案，兼顾可读性、可维护性与工程安全性。
