TypeScript for循环前置判断为true但循环体不执行排查

问题现象 #

• 编写区间标签标注函数时，预期通过for循环完成遍历逻辑，但循环内部代码完全不会执行
• 此前通过索引动态定义for循环参数时，运行长度达数百万级的循环会耗尽全部内存，无法定位故障原因

复现代码 #

selectMonth(newMonth: number) {
  console.log(newMonth);
  const NMH: number[] = [ 744, 1416, 2160, 2800, 3624, 4344, 5088, 5832, 6552, 7296, 8016];
  const WH: number = 168;
  let labelValue: Label[] = ['Sunday'];
  // let i = NMH[newMonth];
  let WC = 0;
  let loopSize = NMH[newMonth + 1] - NMH[newMonth];
  console.log(" loopSize" , loopSize);
  let i = 0;
  console.log("i right before" , i, i < loopSize)
  for(i; i++; i < loopSize) {
    console.log("inside loop" , i)
  }
  console.log(labelValue);
}

故障原因 #

JavaScript/TypeScript的for循环固定语法为for(初始化表达式; 循环执行前的条件判断表达式; 单次循环结束后的更新表达式)，代码里三个表达式的顺序写反了：

• 第二个位置（条件判断位）写的是i++，该后缀自增表达式会先返回i的初始值0，0属于falsy值，首次判断就不满足循环执行要求，直接退出循环，因此内部代码完全不会运行
• 第三个位置（循环更新位）写的是i < loopSize，该位置的表达式返回值不会被用作循环终止判断，属于无效代码
  之前遇到的大长度循环内存溢出，本质也是循环条件、更新逻辑写反，导致循环终止逻辑失效，死循环持续占用内存最终耗尽。

修复方法 #

调整for循环三个表达式的顺序到正确位置即可：

for(i = 0; i < loopSize; i++) {
  console.log("inside loop" , i)
}

提示：如果循环量级达到百万级，不要在循环内部执行频繁DOM操作、大对象深拷贝、无界数组push等操作，纯数值遍历本身不会造成内存溢出。

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