JavaScript取余运算符在奇偶判断与循环索引中的实战应用

JavaScript中的取余运算符 % 能够返回两个数相除后的余数。它最常见的两个用途是判断一个数的奇偶性，以及在循环中让索引在固定范围内反复轮转。本文围绕这两个场景，从基本语法开始，逐步展开完整的用法、代码示例和容易出错的细节。

取余运算符的基本规则

表达式 a % b 的计算结果是 a 除以 b 之后的余数。余数的符号始终与被除数 a 相同，这一点和某些语言的"取模"行为不同。

console.log(7 % 3);    // 1     （7 = 2 × 3 + 1）
console.log(10 % 5);   // 0     （整除，余数为零）
console.log(-7 % 3);   // -1    （余数符号跟随被除数）
console.log(7.5 % 2);  // 1.5   （浮点数同样可以取余）

需要记住两条关键规则：当余数为 0 时，说明 a 能被 b 整除；余数的符号由左操作数决定，而不是右操作数。

奇偶判断：用 % 2 区分奇数和偶数

判断一个整数是奇数还是偶数，核心思路是看它除以 2 的余数。余数为 0 就是偶数，不为 0 就是奇数。

function isEven(n) {
  return n % 2 === 0;
}

console.log(isEven(4));   // true
console.log(isEven(7));   // false
console.log(isEven(0));   // true（0 是偶数）

负数的奇偶判断

这里有一个容易踩的坑。由于 JavaScript 取余结果的符号跟随被除数，-3 % 2 的结果是 -1 而不是 1。如果你用 n % 2 === 1 来判断奇数，负奇数会被漏掉：

console.log(-3 % 2);          // -1
console.log(-3 % 2 === 1);    // false  ← 判断失败！

正确的写法是判断"不等于 0"，或者使用 Math.abs：

// 推荐写法：不等于 0 即为奇数
function isOdd(n) {
  return n % 2 !== 0;
}

// 或者取绝对值后比较
function isOddAbs(n) {
  return Math.abs(n % 2) === 1;
}

console.log(isOdd(-3));     // true
console.log(isOddAbs(-5));  // true

实际场景：表格隔行变色

前端页面中最常见的奇偶判断应用是给列表或表格的行交替添加不同背景色。虽然 CSS 的 :nth-child 也能做到，但在动态生成内容时，通过 JavaScript 判断索引奇偶更加灵活：

const rows = document.querySelectorAll('table tbody tr');

rows.forEach((row, index) => {
  if (index % 2 === 0) {
    row.style.backgroundColor = '#f9fbfd';
  } else {
    row.style.backgroundColor = '#ffffff';
  }
});

这里 index 从 0 开始，所以第一行（index = 0）命中偶数分支。如果希望第一行是白色背景，把条件反过来即可。

实际场景：批量数据分组

另一个用途是把数组元素按奇偶位置分成两组。例如从一个混合数组中分别提取偶数位和奇数位的元素：

const data = ['A', 'B', 'C', 'D', 'E', 'F'];
const group0 = data.filter((_, i) => i % 2 === 0);  // ['A', 'C', 'E']
const group1 = data.filter((_, i) => i % 2 !== 0);  // ['B', 'D', 'F']

循环索引：用取余实现范围轮转

取余运算的另一个高频用途是让一个不断递增（或递减）的索引值落在固定范围 [0, n-1] 之内，形成循环效果。公式非常简单：index % n。

// 一个长度为 4 的数组，需要用不断递增的 i 循环访问
const colors = ['红', '绿', '蓝', '黄'];

for (let i = 0; i < 12; i++) {
  const idx = i % colors.length;
  console.log(`i=${i} → colors[${idx}] = ${colors[idx]}`);
}

// 输出：
// i=0 → colors[0] = 红
// i=1 → colors[1] = 绿
// i=2 → colors[2] = 蓝
// i=3 → colors[3] = 黄
// i=4 → colors[0] = 红   ← 重新开始
// i=5 → colors[1] = 绿
// ...

当 i 达到数组长度时，i % length 自动回到 0，不需要手动判断边界或重置计数器。

轮播图的索引控制

图片轮播是循环索引最典型的前端应用。无论用户点击"下一张"多少次，索引始终在图片数量范围内循环：

const images = ['banner1.jpg', 'banner2.jpg', 'banner3.jpg'];
let current = 0;

function next() {
  current = (current + 1) % images.length;
  showImage(images[current]);
}

function prev() {
  current = (current - 1 + images.length) % images.length;
  showImage(images[current]);
}

next 函数很直观：加 1 再取余。prev 函数需要注意，直接 current - 1 在 current 为 0 时会变成 -1，取余结果也是负数。所以先加上 images.length 再取余，保证结果始终是非负值。这是处理反向循环时最常用的技巧。

Round-Robin 轮询分配

后端或任务调度中，需要把请求依次分配给多个处理节点，取余运算正好能做到这一点：

const servers = ['server-A', 'server-B', 'server-C'];
let requestCount = 0;

function handleRequest(req) {
  const target = servers[requestCount % servers.length];
  requestCount++;
  console.log(`请求分配到: ${target}`);
  // 发送到 target ...
}

// 连续调用：server-A → server-B → server-C → server-A → ...

每次请求到来时，用全局计数器对服务器数量取余，得到当前应该处理的服务器索引。计数器只增不减，取余保证索引永远有效。

取余的其他实用技巧

按固定间隔执行操作

在游戏循环或动画帧计数中，经常需要每隔 N 帧执行一次操作。取余运算可以简洁地实现：

let frame = 0;

function gameLoop() {
  frame++;

  // 每 60 帧执行一次（假设 60fps，相当于每秒一次）
  if (frame % 60 === 0) {
    updateScoreboard();
  }

  // 每 10 帧刷新一次敌人位置
  if (frame % 10 === 0) {
    moveEnemies();
  }

  requestAnimationFrame(gameLoop);
}

将线性序号转为行列坐标

把一维数组的索引转换为二维网格的行号和列号，取余和整除配合使用：

const cols = 4; // 每行 4 列

for (let i = 0; i < 12; i++) {
  const row = Math.floor(i / cols);
  const col = i % cols;
  console.log(`元素 ${i} → 第 ${row} 行, 第 ${col} 列`);
}

// 输出示例：
// 元素 0 → 第 0 行, 第 0 列
// 元素 1 → 第 0 行, 第 1 列
// ...
// 元素 4 → 第 1 行, 第 0 列
// 元素 5 → 第 1 行, 第 1 列

i % cols 得到列号，Math.floor(i / cols) 得到行号。这在瀑布流布局、棋盘渲染、分页显示等场景都会用到。

容易出错的地方

除了前面提到的负数取余问题，还有几个需要注意的点：

• 浮点数取余：0.1 + 0.2 在 JavaScript 中并不精确等于 0.3，涉及浮点数的取余运算同样会产生精度问题。如果需要对浮点数做"整除"判断，应当使用误差范围比较。
• 除数为 0：n % 0 的结果是 NaN，不会抛出异常。在动态计算除数时需要预先检查。
• 非数字类型：当操作数不是数字时，JavaScript 会尝试类型转换。'7' % 3 结果是 1（字符串被转为数字），但 'abc' % 3 结果是 NaN。依赖隐式转换容易引入隐蔽的 bug。

console.log(0.3 % 0.1);    // 0.09999999999999998（非精确 0）
console.log(10 % 0);       // NaN
console.log('7' % 3);      // 1（隐式转换）
console.log('abc' % 3);    // NaN

总结

取余运算符 % 虽然语法简单，但在实际编码中的应用范围很广。核心要点可以归纳为以下几条：

• 判断奇偶用 n % 2 === 0（偶数）和 n % 2 !== 0（奇数），避免用 === 1 遗漏负数。
• 循环索引用 i % length 保持范围有效，反向循环时先加数组长度再取余。
• 按固定间隔触发操作用 count % N === 0。
• 一维转二维坐标时，取余得列号，整除得行号。
• 注意三个陷阱：负数余数的符号、浮点精度、除数为零返回 NaN。