为何不同判断条件下生成的国际象棋棋盘显示异常？

问题背景 #

这段JavaScript代码试图生成8x8的国际象棋棋盘，但在行尾切换颜色的判断条件上始终出错：

• 用i === 7 * increment时，棋盘显示异常
• 改成i === 8 * increment后，显示仍不符合预期
• 考虑0索引调整判断条件后，结果依然错误

原代码 #

const chessBoard = document.querySelector("#board");
let aSwitch = true; // 用于切换黑白格子的开关
let increment = 1; // 用来判断当前行

for (let i = 0; i < 64; i++) {
  let square = document.createElement("div");
  square.classList.add("square");

  if (aSwitch === true) {
    square.classList.add("white");
    aSwitch = false;
  } else {
    square.classList.add("black");
    aSwitch = true;
  }

  if (i === 7 * increment) {
    increment++;
    aSwitch = !aSwitch;
  } // 试图让下一行保持棋盘格样式
  chessBoard.append(square);
}

错误原因拆解 #

1. i ===7*increment的问题

• 初始increment=1，第一次触发条件是i=7（第一行最后一个格子，0索引下正确），但触发后increment变成2，下一次触发条件变为i=14。
• 但第二行的最后一个格子是i=15（8*2-1），这就导致提前一个格子反转了颜色开关，第二行的最后两个格子颜色相同，后续每一行都提前触发，最终棋盘完全错乱。

2. i ===8*increment的问题

• 初始increment=1，第一次触发条件是i=8，这已经是第二行的第一个格子了。
• 本该在第一行结束后（i=7之后）反转开关，结果延迟到第二行第一个格子才反转，导致第二行第一个格子和第一行最后一个格子颜色相同，行内出现连续同色，棋盘呈现错误的竖条样式。

3. 0索引调整仍出错的可能

如果只是调整判断条件但没修正increment的逻辑，比如改成i === (8*increment)-1但increment初始值还是1，虽然第一次触发在i=7是对的，但后续increment递增后，触发时机是对的，但可能你调整时没配套修改相关逻辑，导致依然出错。

正确的逻辑修正 #

不需要依赖increment变量，直接通过模运算判断行尾：每8个格子为一行，当(i+1) %8 ===0时，说明当前是一行的最后一个格子，此时反转颜色开关即可。

修正后代码：

const chessBoard = document.querySelector("#board");
let aSwitch = true;

for (let i = 0; i < 64; i++) {
  let square = document.createElement("div");
  square.classList.add("square");

  square.classList.add(aSwitch ? "white" : "black");
  aSwitch = !aSwitch;

  // 每一行最后一个格子反转开关，保证下一行开头颜色相反
  if ((i + 1) % 8 === 0) {
    aSwitch = !aSwitch;
  }

  chessBoard.append(square);
}

核心逻辑说明 #

国际象棋棋盘的行与行之间，开头颜色必须相反：第一行开头白，第二行开头黑，第三行开头白，以此类推。所以在每一行结束时（即第8、16...64个格子，对应0索引的7、15...63），需要额外反转一次颜色开关，确保下一行开头颜色与上一行相反。

内容的提问来源于stack exchange，提问作者Cậu Long