The JavaScript Way 第四章精读：掌握 while 与 for 循环，写出可重复执行的 JavaScript 代码

教程文档【免费下载链接】thejswayThe JavaScript Way book项目地址https://gitcode.com/gh_mirrors/th/thejsway点击查看免费下载本篇指南以开源书籍《The JavaScript Way》仓库路径manuscript/chapter04.md第四章 Repeat statements 为骨架系统讲解 JavaScript 中实现代码重复执行的两种核心结构——while循环与for循环。你将掌握两种循环的完整语法、执行流程、循环计数器counter的作用域与陷阱、无限循环的成因与规避方法并能在章节末尾通过 Carousel、Parity、FizzBuzz 等 6 组实战练习真正学会在「事先知道循环次数」与「次数取决于运行期输入」两类场景下做出正确的循环选型。《The JavaScript Way》是一本面向零基础读者的开源 JavaScript 入门书项目说明见 README.md全书写作基于ES2016语法强调动手实践与良好编码习惯。第四章处于「学会编写程序」学习路线的关键位置前置的 第三章 刚讲完用if/else/switch做条件判断本章将在此基础上引入重复执行而紧随其后的 第五章 则会教你把程序拆解为函数——循环正是函数内部最常用的逻辑构件之一。整本书由 Material for Mkdocs 驱动渲染见 mkdocs.yml本章所有示例都可在浏览器控制台直接运行。为什么需要循环从「重复 5 次」到「重复 1000 次」假设你想让程序依次显示 1 到 5 这五个整数用前面章节学过的console.log()可以这样写console.log(1); console.log(2); console.log(3); console.log(4); console.log(5);这种写法固然可行但已经相当繁琐——如果需求变成「显示 1 到 1000 之间的所有整数」代码将膨胀到 1000 行既难以编写也难以维护。JavaScript 为此提供了循环loop机制你可以把一段代码放进循环体让它反复执行直到被告知停止。循环体每执行一次就称为一次迭代iteration。let number 1; while (number 5) { console.log(number); number; }这段代码和上面 5 条console.log()的效果完全一致但无论把范围扩大到 1000 还是 10000都只需要改动循环条件中的边界值即可。while循环条件为真就继续执行while循环用于「在某个条件为真期间反复执行一段代码」。它适合处理事先不知道要循环多少次的场景。语法与执行流程while (condition) { // Code to run while the condition is true }在每次迭代开始之前程序都会对括号中的condition进行求值判断其是true还是false。与循环体关联的代码块称为循环的主体body。执行流程只有两条分支条件值为true执行循环体中的代码执行完毕后重新评估条件看它是否仍然为真如此循环往复条件值为false循环体要么停止执行要么首次评估即为 false 时从头到尾都不会执行。建议源自原文档提示循环主体必须放在花括号{}中除非主体只有一条语句。作为初学者请始终为循环加上花括号这能避免大量因缩进或语句归属混乱引发的隐蔽 bug。完整示例把开篇需求改写成while版本let number 1; while (number 5) { console.log(number); number; }number先被初始化为 1循环条件number 5为真时打印当前值并执行number自增当number变成 6 时条件为假循环终止。执行结果如下注意这里number是一个会随迭代而变化的变量它的更新发生在循环体内部——这正是while循环的典型用法也是后面要讨论的「无限循环」风险点的来源。for循环把初始化、条件、更新收敛在一行实际开发中大量循环的条件都依赖一个在循环体内被更新的变量就像上面的number。JavaScript 为此提供了for循环把「循环开始前做什么」和「每次迭代后做什么」都显式地纳入循环语法本身。语法与执行流程for (initialization; condition; final expression) { // code to run while the condition is true }for的圆括号内由分号分隔的三个部分各自承担明确职责部分执行时机典型用途初始化initialization整个循环开始前只执行一次设置与循环条件关联的变量的初始值条件condition每次迭代开始之前求值为真则执行循环体为假则终止最终表达式final expression每次迭代结束之后求值更新与循环条件关联的变量通常是自增/自减把开篇例子改写为for版本let number; for (number 1; number 5; number) { console.log(number); }结果与while版本完全相同。可以看到for把「变量更新」从循环体内移到了第三部分的number循环条件从「真」走向「假」的节奏一目了然。循环计数器counterinitialization、condition、final expression三处共同使用的变量称为计数器counter习惯上常命名为iindex 的缩写。计数器可以直接在初始化部分用let声明从而把它的作用域限制在循环体内部避免污染外部命名空间for (let i 1; i 5; i) { console.log(i); // OK } console.log(i); // Error: the i variable is not visible here上面最后一行会抛错i在循环外不可见。这种「块级作用域」的约束能让循环成为自包含的逻辑单元也与整本书倡导的「先用let/const而非var声明变量」的现代 ES2016 风格参见 第二章变量保持一致。常见错误无限循环与计数器误改无限while循环while循环最大的风险是制造无限循环infinite loop条件永远为真代码无限执行最终导致程序崩溃。最典型的诱因是忘记在循环体内更新条件依赖的变量let number 1; while (number 5) { console.log(number); // The number variable is never updated: the loop condition stays true forever }number永远停留在 1number 5永远为真——控制台会疯狂刷屏直到浏览器标签页卡死。防御方法只有一个核心原则确保循环条件终将变为false即条件所依赖的变量必须沿着「趋向终止」的方向被更新。在循环体内修改for计数器for循环把计数器的更新放在了第三部分final expression但这并不阻止你在循环体内再次修改它。假如你无意间写了这样的代码for (let i 1; i 5; i) { console.log(i); i; // The i variable is updated in the loop body }运行结果是原因很清楚每次迭代中i被自增了两次——一次在循环体内i一次在迭代结束后的最终表达式i。于是i依次取 1、3、5循环提前结束只输出了 3 个数字。经验法则源自原文档使用for循环时几乎总应避免在循环体内碰计数器把它留在 for 的第一行里就够了。计数器的生命周期、更新节奏都集中管理正是for相对while的核心价值。用哪种循环结构先问「是否事先知道次数」for循环的优势在于自带计数概念初始化、条件、更新三要素显式排列只要循环次数在编码时即可确定就天然规避了忘记更新变量的无限循环问题。但for的代价是你必须在写代码的那一刻就知道循环要跑多少次。当循环次数取决于运行期输入用户交互、网络数据等时while才是合适的工具。原文档给出的典型场景是「反复询问用户直到输入 X 退出」let letter ; while (letter ! X) { letter prompt(Type a letter or X to exit:); }你无法预知用户要输入多少次才会键入X——也许一次也许一百次所以这里while是自然之选。凡是依赖用户交互、循环次数运行期才能确定的场景优先考虑while。选择建议可以归纳为一条决策链编码时已知循环次数固定次数、或次数来自某个已算好的变量→ 用for计数逻辑一目了然次数取决于用户输入或外部条件→ 用while配合循环体内主动更新条件变量并确保条件终将变为假。从表达能力上讲所有循环都可以用while写出来但「事先知道次数时优先for」能让代码更安全、更自解释。本章速记TL;DR循环loop用于重复执行一系列语句每次重复称为一次迭代iteration与循环关联的代码块称为循环主体body。while循环在条件为真期间重复执行语句for循环则额外管理「循环开始前」与「每次迭代结束后」这两个时机// While loop while (condition) { // Code to run while the condition is true } // For loop for (initialization; condition; final expression) { // code to run while the condition is true }与循环条件关联的变量称为循环计数器counter常命名为i建议在for的初始化部分用let声明将其作用域限定在循环内。警惕两点while的条件必须终将变为false否则会陷入无限循环在for循环体内更新计数器是坏习惯会导致迭代步长错乱。选型所有循环都能用while实现但若事先知道循环次数for是最佳选择。实战练习Coding Time原文档建议每道题分别用while和for各写一遍亲身体会哪种结构更合适。下面给出全部 6 组练习的题目描述与参考实现——请务必先自己动手再对照参考答案。1. Carousel旋转木马编写一个程序让旋转木马转动 10 圈每圈显示当前圈数。完成后改进程序让圈数由用户输入。参考实现for版固定 10 圈for (let turn 1; turn 10; turn) { console.log(Carousel turn #${turn}); }改进版次数由用户给定const turns Number(prompt(How many turns?)); for (let turn 1; turn turns; turn) { console.log(Carousel turn #${turn}); }思考固定 10 圈时for显然更合适用户给定时次数依然在循环开始前就已确定for依旧胜任。2. Parity奇偶性判断检查下面这段「显示 1 到 10 之间偶数」的程序for (let i 1; i 10; i) { if (i % 2 0) { console.log(${i} is even); } }它用到了取模运算符%计算两个数相除的余数常用于判断奇偶console.log(10 % 2); // 0 because 10 5 * 2 0 console.log(11 % 2); // 1 because 11 5 * 2 1 console.log(18 % 3); // 0 because 18 3 * 6 0 console.log(19 % 3); // 1 because 19 3 * 6 1 console.log(20 % 3); // 2 because 20 3 * 6 2改进要求让程序同时显示奇数和偶数把起始数字1替换为用户输入的值。注意原文档提示改进后程序必须恰好显示10 个数字含起始数字不能显示 11 个参考实现同时显示奇偶 用户给定起点const start Number(prompt(Enter a start number:)); for (let i start; i start 9; i) { if (i % 2 0) { console.log(${i} is even); } else { console.log(${i} is odd); } }这里把循环边界设为start 9保证从start起恰好 10 个数。3. Input validation输入校验编写一个程序反复向用户询问数字直到输入的数字小于或等于 100。完成后改进让终止条件变为数字介于 50 和 100 之间。参考实现终止条件number 100let number Number(prompt(Enter a number:)); while (number 100) { number Number(prompt(Enter a number:)); }改进版终止条件50 number 100注意结合第三章的逻辑运算符let number Number(prompt(Enter a number:)); while (number 50 || number 100) { number Number(prompt(Enter a number:)); }循环次数完全取决于用户输入这正是while的典型主场上一章的||与逻辑运算符见 第三章条件在这里直接派上用场。4. Multiplication table乘法表编写程序向用户询问一个数字然后显示该数字的乘法表。完成后改进只接受2 到 9之间的数字可参考上一题的输入校验作为模板。参考实现const number Number(prompt(Enter a number:)); for (let i 1; i 10; i) { console.log(${number} x ${i} ${number * i}); }改进版带输入校验let number Number(prompt(Enter a number between 2 and 9:)); while (number 2 || number 9) { number Number(prompt(Enter a number between 2 and 9:)); } for (let i 1; i 10; i) { console.log(${number} x ${i} ${number * i}); }5. Neither yes nor no不许说「是」或「不是」编写程序与用户玩「不许说 yes 或 no」的游戏反复让用户输入文字直到用户输入 yes 或 no 游戏结束。参考实现let text ; while (text ! yes text ! no) { text prompt(Say something (type yes or no to end the game):); }与输入校验题同源次数未知、依赖用户交互 →while。本题额外练习了用组合两个退出条件。6. FizzBuzz编写程序显示 1 到 100 之间的所有数字但遵循以下例外规则数字能被 3 整除时显示Fizz数字能被 5 整除且不能被 3 整除时显示Buzz完成后改进数字同时能被 3 和 5 整除时显示FizzBuzz。参考实现for (let i 1; i 100; i) { if (i % 3 0 i % 5 0) { console.log(FizzBuzz); } else if (i % 3 0) { console.log(Fizz); } else if (i % 5 0) { console.log(Buzz); } else { console.log(i); } }原文档备注这道题有非常多不同的解法而且是求职面试中的经典考题有相当比例的候选人会在这道题上失手。试着写出属于你自己的最优解吧——能同时锤炼循环、取模、逻辑运算与if/else分支的编排能力是本章最值得反复练习的一道题。完成以上 6 组练习后你应当能够自如地在「已知次数的for」与「未知次数的while」之间做出选择并写出不会无限循环、不会被计数器误改破坏的可维护循环代码——这是后续学习数组遍历见后续章节与函数封装见 第五章函数的必备基础。赞分享教程文档【免费下载链接】thejswayThe JavaScript Way book项目地址https://gitcode.com/gh_mirrors/th/thejsway点击查看免费下载相关推荐3分钟搞定国家中小学智慧教育平台电子课本下载终极指南3分钟搞定国家中小学智慧教育平台电子课本下载终极指南 还在为无法下载国家中小学智慧教育平台的电子课本而烦恼吗tchMaterial parser这款智能下载网页爬虫教育JavaScript 循环结构详解while 和 for 循环JavaScript 循环结构详解while 和 for 循环 在编写脚本时经常需要重复执行相同的操作多次。比如逐个显示列表中的商品或者遍历1到10的数freeCodeCamp 课程精讲用 JavaScript 的 do...while 循环进行迭代freeCodeCamp 课程精讲用 JavaScript 的 do...while 循环进行迭代 本课取材于 freeCodeCamp 课程体系中 Jav前端后端教育上一篇Time-LLM社区生态从NeuralForecast到PyPOTS的集成之路下一篇Vizia 开源项目安装与使用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考