JavaScript循环打印数字错位：整除替换逻辑偏移一位

嘿，我一眼就瞅到问题所在了——你的循环变量和要判断的数字没对齐，导致规则判断整体错位了！

问题根源分析 #

你当前的循环从 i=-1 开始，每次在else分支输出的是 i+1（也就是实际要处理的目标数字），但你判断整除条件时用的是 i 而不是这个目标数字。举个例子：

• 当你期望处理数字5时，对应的 i 是4，这时候 4%5≠0，所以代码会先输出数字5；
• 当 i=5 时，你判断 5%5==0 输出Apple，但这时候对应的目标数字已经是6了，自然就出现了“本该替换5却替换了6”的错位情况。

两种修复方案 #

方案一：调整循环范围，让变量直接对应目标数字（推荐）

把循环改成从1开始遍历到你需要的数字（比如要100个就到100），这样每个循环变量 i 就是你要判断和输出的数字，逻辑完全对应，不会出错：

function testFunction() { 
  var wrapper = document.getElementById("Test"); 
  var myHTML = ''; 
  // 遍历1到20的数字（要100个数字就改成i <= 100）
  for (var i = 1; i <= 20; i++) { 
    if (i % 5 == 0 && i % 3 == 0) { 
      myHTML += '<span class="test">Pineapple</span><br/>'; 
    } else if (i % 5 == 0) { 
      myHTML += '<span class="test">Apple</span><br/>'; 
    } else if (i % 3 == 0) { 
      myHTML += '<span class="test">Pine</span><br/>'; 
    } else { 
      myHTML += '<span class="test">' + i + '</span><br/>'; 
    } 
  } 
  wrapper.innerHTML = myHTML 
}

方案二：保留原循环结构，统一判断目标数字

如果一定要保持原来的循环起始值，那可以先把目标数字（也就是你要输出的 i+1）提取成变量，所有判断条件都基于这个变量：

function testFunction() { 
  var wrapper = document.getElementById("Test"); 
  var myHTML = ''; 
  for (var i = -1; i < 20; i++) { 
    const targetNum = i + 1; // 明确声明要处理的目标数字
    if (targetNum % 5 == 0 && targetNum % 3 == 0) { 
      myHTML += '<span class="test">Pineapple</span><br/>'; 
    } else if (targetNum % 5 == 0) { 
      myHTML += '<span class="test">Apple</span><br/>'; 
    } else if (targetNum % 3 == 0) { 
      myHTML += '<span class="test">Pine</span><br/>'; 
    } else { 
      myHTML += '<span class="test">' + targetNum + '</span><br/>'; 
    } 
  } 
  wrapper.innerHTML = myHTML 
}

为什么这两种方案有效？ #

两种方案的核心都是让判断条件的对象和输出的数字保持一致：要么让循环变量直接等于目标数字，要么把目标数字提取出来统一使用，这样规则就能精准应用到对应的数字上，不会再出现错位问题啦。

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