JavaScript能否将三个并列for循环合并为单个循环

完全可以把三段独立循环合并，而且合并后的代码可读性、可维护性都会比重复写三段同结构循环更好，只要保持坐标推入数组的顺序和原逻辑一致，运行结果就不会有任何差异。

你当前的代码本质是生成3行×3列的网格坐标：

• 共9个坐标点
• 行与行的y值间隔166，三行y值分别为0、166、332
• 每行内的x值间隔166，三个点x值分别为0、166、332
• 推入顺序是按行遍历：先推完第一行所有点，再推第二行，最后推第三行

原代码如下：

let board_coord = []

for (let i = 0; i < 3; i++) {
  board_coord.push({
    x: i * 166,
    y: 0
  })
}
for (let j = 0; j < 3; j++) {
  board_coord.push({
    x: j * 166,
    y: 166
  })
}
for (let k = 0; k < 3; k++) {
  board_coord.push({
    x: k * 166,
    y: 332
  })
}

console.log(board_coord)

方案1：双层循环（最推荐，可读性最高） #

因为网格本身是二维结构，用外层循环控制行、内层循环控制列的写法最贴合业务逻辑，后续看代码的人不需要额外做换算就能看懂逻辑，后续要改网格大小也只需要改循环上限就行：

const board_coord = []
const CELL_STEP = 166 // 坐标步长抽成常量，后续改尺寸更方便
const GRID_ROW_COL = 3 // 网格行列数

// 外层遍历行
for (let row = 0; row < GRID_ROW_COL; row++) {
  const currentY = row * CELL_STEP
  // 内层遍历当前行的所有列
  for (let col = 0; col < GRID_ROW_COL; col++) {
    board_coord.push({
      x: col * CELL_STEP,
      y: currentY
    })
  }
}

console.log(board_coord)

方案2：单层循环实现 #

如果严格要求只使用一层for循环，可以通过数学计算拆分每个索引对应的行列值，最终输出结果和原逻辑完全一致：

const board_coord = []
const CELL_STEP = 166
const GRID_ROW_COL = 3
const TOTAL_POINTS = GRID_ROW_COL * GRID_ROW_COL

for (let i = 0; i < TOTAL_POINTS; i++) {
  const col = i % GRID_ROW_COL // 对列数取余得到当前列索引
  const row = Math.floor(i / GRID_ROW_COL) // 除以列数向下取整得到当前行索引
  board_coord.push({
    x: col * CELL_STEP,
    y: row * CELL_STEP
  })
}

console.log(board_coord)

两种方案的输出和原代码完全一致：

• 数组前3项：y固定为0，x依次为0、166、332
• 数组中间3项：y固定为166，x依次为0、166、332
• 数组最后3项：y固定为332，x依次为0、166、332

日常开发优先选双层循环的写法，不要为了“只用一层循环”刻意把逻辑绕复杂，代码可读性永远是优先考虑的项。

内容的提问来源于stack exchange，提问作者the Lorde