JavaScript中用%实现循环索引需注意负数问题，安全写法为((n % m) + m) % m，适用于轮播图、环形菜单等场景。
JavaScript 中用求余运算符 % 实现循环索引控制，核心是利用它“取余数”的特性，把任意整数映射到固定范围内（比如数组长度），从而自动回到开头，形成循环效果。
理解 % 运算符的行为
求余运算符 % 返回的是除法后的余数。关键点在于：
- 当被除数为正数时，结果与数学定义一致（如
5 % 3→2） - 当被除数为负数时，JavaScript 的 % 返回的是“带符号的余数”（如
-1 % 3→-1），这可能破坏循环逻辑 - 要实现稳定循环，通常需配合 模运算等效写法：
((index % length) + length) % length
用 % 实现数组循环读取
假设有一个颜色数组，想按顺序无限轮播：
const colors = ['red', 'green', 'blue'];
用 i 计数器递增，直接用 i % colors.length 获取当前索引：
立即学习“Java免费学习笔记（深入）”；
-
i = 0→0 % 3 = 0→'red' -
i = 2→2 % 3 = 2→'blue' -
i = 3→3 % 3 = 0→ 又回到'red' -
i = 5→5 % 3 = 2→'blue'
处理负数索引（如左移、回退）
如果用户点击“上一张”，索引减 1，可能出现负值：-1、-2……这时直接 -1 % 3 得 -1，不是想要的 2。
安全写法（兼容正负）：
const safeIndex = ((i % len) + len) % len;- 例如
i = -1：先算-1 % 3 = -1，再(-1 + 3) % 3 = 2 % 3 = 2 - 或封装成函数：
const mod = (n, m) => ((n % m) + m) % m;
实际应用场景举例
常见于轮播图、环形菜单、循环计时器、动画帧索引等：
- 轮播图点击下一页：
currentIndex = (currentIndex + 1) % slides.length; - 键盘方向键切换：
currentIndex = mod(currentIndex - 1, items.length); - 每 3 帧换一种样式：
styleClass = ['a', 'b', 'c'][frameCount % 3];
