JavaScript for循环中变量赋值后调用报错，直接调用正常是什么原因

你的第二种写法执行顺序存在逻辑错误：

• 你先直接用legalMoves[i]作为索引读取squareInfo并赋值给lM，如果当前legalMoves[i]是小于0或者大于63的非法值，squareInfo[非法索引]本身就会返回undefined，此时lM已经被赋值为undefined
• 后续你才做边界校验删除非法走法，哪怕你删除了非法元素、执行了i--修正索引，但提前赋值的lM已经是undefined，访问lM[2]自然会抛出类型错误
  第一种写法是先完成边界校验、删除非法元素并修正索引后，才读取squareInfo的对应值，此时legalMoves[i]一定是合法的0-63范围值，因此运行正常。

将lM的赋值逻辑移到边界校验之后即可，同时可以增加continue跳过非法元素的后续处理逻辑，调整后代码如下：

for (i = 0; i < legalMoves.length; i++) {
  if (legalMoves[i] > 63 || legalMoves[i] < 0) {
    legalMoves.splice(i, 1)
    i--
    continue
  }
  // 校验通过后再赋值，保证lM一定有值
  const lM = squareInfo[legalMoves[i]]
  console.log(lM[2])
  // 后续逻辑直接使用lM即可
}

可选优化建议 #

如果不想因为遍历过程中修改原数组导致索引混乱，可以先过滤出合法走法再遍历，代码更简洁也更不容易出错：

// 先过滤得到所有合法走法
const validMoves = legalMoves.filter(move => move >= 0 && move <= 63)
for (const move of validMoves) {
  const lM = squareInfo[move]
  console.log(lM[2])
  // 后续业务逻辑
}

内容的提问来源于stack exchange，提问作者Tardis Man