为何for循环中使用||（逻辑或）语句会导致页面崩溃？

原代码逻辑回顾 #

原代码的for循环从i=0开始递增，当i === 3时通过break终止循环，最终输出0、1、2三个数：

<html>
<body>

<h2>JavaScript Loops</h2>

<p>A loop with a <b>break</b> statement.</p>

<p id="demo"></p>

<script>
let text = "";
for (let i = 0; i < 10; i++) {
  if (i === 3) { break; }
  text += "The number is " + i + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

错误修改的问题根源 #

你把循环条件改成i < 10 || i !== 3后触发了无限循环，直接导致页面崩溃，核心原因是逻辑或||的运算规则：只要任意一个条件为真，整个表达式就为真。

• 当i从0到9时，i < 10始终为真，不管i是否等于3，循环都会继续执行
• 当i递增到10时，i < 10变为假，但i !== 3仍然为真，整个表达式还是真，循环不会停止
• 后续i会一直递增到无穷大，浏览器无法处理持续运行的无限循环，最终导致页面崩溃

正确修改的逻辑解析 #

换成逻辑与&&后循环正常运行，因为&&要求两个条件同时为真时，表达式才为真：

<html>
<body>

<h2>JavaScript Loops</h2>

<p>A loop with a <b>break</b> statement.</p>

<p id="demo"></p>

<script>
let text = "";
for (let i = 0; i < 10 && i !== 3; i++) {
  text += "The number is " + i + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

• 当i为0、1、2时，i < 10和i !== 3都为真，循环正常执行
• 当i === 3时，i !== 3为假，整个表达式为假，循环终止，和原代码的break效果完全一致
• 即使i没到3，当i >=10时，i <10为假，表达式也为假，循环会正常终止

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