文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本文围绕 Modern JavaScript Tutorialjavascript.info中 1-js/02-first-steps/13-while-for/5-replace-for-while/task.md 这道经典练习展开在不改变程序行为的前提下把一段for循环改写为等价的while循环。读完本文你将掌握两种循环语句在结构与执行顺序上的对应关系学会行为不变的循环等价改写方法并能通过逐步追踪验证改写结果的正确性。该任务位于教程First Steps章节的 Loops: while and for 主题之下是检验初学者是否真正理解循环三要素初始化、条件、步进的标准练习题。任务要求改写循环而保持行为不变原任务importance: 5属于高优先级核心练习要求如下Rewrite the code changing theforloop towhilewithout altering its behavior (the output should stay same).即把下面的for循环改写为while循环不得改变程序行为最终输出必须与原代码完全一致for (let i 0; i 3; i) { alert( number ${i}! ); }这段代码的运行效果是依次弹出三次对话框内容分别为number 0!、number 1!、number 2!。改写后的代码必须保持这三个输出值、输出顺序和输出次数不变。先看懂for循环的三段式结构要完成改写首先要拆解for语句的三个组成部分。根据教程 Loops: while and for 中的说明for循环的标准语法为for (begin; condition; step) { // ... loop body ... }对应到本题部分本题代码作用begin初始化let i 0进入循环时仅执行一次声明并初始化计数器condition条件i 3每次迭代前检查为假则循环终止body循环体alert(number ${i}!)条件为真时反复执行step步进i每次循环体执行完毕后运行for循环的完整执行算法可以展开为Run begin → (if condition → run body and run step) → (if condition → run body and run step) → ...代入本题逐步展开就是// for (let i 0; i 3; i) alert(number ${i}!) // run begin let i 0 // if condition → run body and run step if (i 3) { alert(number 0!); i } // i 变为 1 // if condition → run body and run step if (i 3) { alert(number 1!); i } // i 变为 2 // if condition → run body and run step if (i 3) { alert(number 2!); i } // i 变为 3 // ...finish, because now i 3可以看到begin只执行一次之后是条件检查 → 循环体 → 步进的循环往复直到i等于 3 时条件i 3为假循环结束。改写为while循环把三段式展开为显式语句while循环的语法只有条件 循环体两个要素while (condition) { // code // so-called loop body }改写思路很直接把for的begin提前到循环外声明变量把condition原样搬进while的条件位置再把step移到循环体的末尾手动执行。官方参考答案位于 5-replace-for-while/solution.mdlet i 0; while (i 3) { alert( number ${i}! ); i; }改写后的执行顺序与原for完全对应原for部分while改写位置let i 0begin循环外的let i 0;i 3conditionwhile (i 3)的条件alert(...)body循环体内的第一条语句istep循环体末尾的i;改写后的循环同样依次弹出number 0!、number 1!、number 2!满足输出保持不变的要求。为什么这样改写是正确的执行语义等价性验证while版本与for版本在语义上等价关键在于步进的执行时机。for循环中i在每次循环体执行完之后运行while版本把i放在循环体末尾同样保证了首次进入循环时i 0条件0 3为真弹出number 0!随后i使i 1第二次检查1 3为真弹出number 1!i使i 2第三次检查2 3为真弹出number 2!i使i 3第四次检查3 3为假循环终止。把执行过程展开验证如下let i 0; // if (0 3) { alert(number 0!); i } // if (1 3) { alert(number 1!); i } // if (2 3) { alert(number 2!); i } // if (3 3) → false, loop stops如果漏写循环体末尾的i循环条件永远为真会形成无限循环——正如教程中特别提醒的在浏览器环境中无限循环可以被用户强制停止在服务端 JavaScript 中则只能终止进程。因此把step从for头部搬到while循环体末尾是改写中最容易遗漏、也最关键的一步。改写中的细节要点1. 计数器变量的作用域差异for中的let i 0是内联声明变量i只在循环内部可见循环结束后访问i会报错ReferenceError。而改写后的while版本把i声明在循环外部循环结束后i依然存在且值为 3。如果原for代码依赖内联变量的块级作用域例如循环后有同名变量声明改写时需要留意作用域变化如果原代码使用的是循环外已存在的变量如for (i 0; i 3; i)则改写前后作用域一致。2.for与while的结构关系教程指出去掉for的begin和step之后for (; i 3;) { ... }与while (i 3) { ... }完全等价。这从侧面印证了任何for循环都可以在不改变条件检查语义的前提下改写为while只需把三段内容拆开安置。反过来while循环也可写成省略 begin/step 的for形式。3. 不要混淆do..while教程中的第三种循环do..while把条件检查放在循环体之后保证循环体至少执行一次。本题要求行为不变因此必须使用先检查条件的while形式而不能使用do..while——后者在原for条件一开始就为假的情况下仍会执行一次循环体行为不再等价。4. 条件与递增的执行顺序改写时注意保持先检查、后递增的顺序while的条件中不要直接写i如while (i 3)因为后缀自增会先返回旧值再递增导致输出结果偏移。本题标准解法把递增放在循环体末尾清晰还原了for中body 之后执行 step的顺序这是保持输出一致最稳妥的写法。相关练习题与延伸阅读本节所属的 13-while-for 目录下还有一系列配套练习可用来巩固循环语义1-loop-last-value分析while (i)配合alert(i--)时最后一次弹出的值答案为1训练对真值转换与后缀自增的理解2-which-value-while对比while (i 5)与while (i 5)输出序列的差异分别输出 14 与 15演示前后缀形式在条件表达式中的不同行为3-which-value-for证明for的 step 中i与i输出相同均为 04因为步进与条件检查分离其返回值未被使用4-for-even用for配合取模运算符%输出 2 到 10 的偶数6-repeat-until-correct 与 7-list-primes进一步练习循环嵌套与终止条件设计。小结把for改写为while表面上是一次机械的语法搬运实际上考察的是对循环执行模型的理解for的begin / condition / step / body四要素如何按固定顺序反复执行。改写步骤可归纳为三条将begin提取为循环前的变量声明将condition原样放入while条件将step移入循环体末尾且顺序必须在body之后。遵循这三步即可保证输出不变这也是本任务要求without altering its behavior的判定标准。读者可在浏览器控制台分别运行 task.md 与 solution.md 中的代码逐一核对弹出的三次alert内容来验证等价性。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐JavaScript for 循环改写为 while 循环行为等价的替换实战解析JavaScript for 循环改写为 while 循环行为等价的替换实战解析 本指南以 Modern JavaScript Tutorial 中「Repl文档/教程前端JavaScript 循环结构详解while 和 for 循环JavaScript 循环结构详解while 和 for 循环 在编写脚本时经常需要重复执行相同的操作多次。比如逐个显示列表中的商品或者遍历1到10的数JavaScript 流程控制之循环结构for、while、do...while 与 break/continue 实战详解JavaScript 流程控制之循环结构for、while、do...while 与 break/continue 实战详解 循环语句是 JavaScript文档教程前端上一篇Trigger.dev 构建扩展trigger.dev/build权威指南从 Prisma 三模式到 Agent Skills 的完整演进下一篇MCA SelectorMinecraft存档区块选择与删除工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考