本章定位上一章我们正式进入了 JavaScript 的“数据世界”。你已经学习了什么是变量。let和const的区别。常见数据类型是什么。算术运算、比较运算和逻辑运算怎么用。到这里你已经能写出一些会“存值、取值、比较和计算”的代码了。但如果代码只能从上到下一行一行执行它其实还是很“死”。例如成绩大于等于 60就显示“及格”用户是会员就显示会员内容一个提示要重复输出 5 次从 1 输出到 10只打印偶数这些问题都说明了一件事程序不仅要能处理数据还要能根据不同情况做不同选择并且在需要时重复执行一些逻辑。这就是这一章要解决的内容条件判断循环如果上一章是在学“程序在处理什么值”那这一章就是在学程序该怎么根据这些值决定往哪走以及要不要重复执行。本章学习目标学完这一章后你应该能做到理解条件判断的作用知道为什么程序需要分支逻辑。掌握if、if...else、if...else if...else的基础写法。理解switch的适用场景并知道它和if...else的区别。掌握for和while的基础用法。能理解循环“什么时候继续、什么时候停止”。知道条件判断和循环如何配合解决简单问题。能写出成绩等级判断、数字规律输出、列表数据生成这类基础练习。一、为什么程序需要条件判断现实世界里的很多事情都不是“永远只有一种结果”。例如如果今天下雨就带伞如果余额足够就付款如果成绩大于等于 60就显示及格如果用户没登录就提示先登录程序也是一样。很多时候代码不能永远只做同一件事而是要先看“当前情况是什么”再决定“接下来怎么做”。这就是条件判断存在的原因。你可以先把它理解成条件判断就是让程序根据不同情况走不同的代码路径。二、条件判断的本质是什么条件判断的核心其实并不复杂。它通常只包含两步先判断某个条件是否成立。再根据判断结果决定执行哪段代码。1. 条件判断依赖布尔结果你在上一章已经学过布尔值truefalse条件判断本质上就是围绕这两个结果展开的。例如constscore85;console.log(score60);这行代码会先计算score60它的结果不是数字也不是字符串而是一个布尔值。也就是说如果结果是true说明条件成立如果结果是false说明条件不成立2. 先判断再决定走哪条路比如constisMembertrue;if(isMember){console.log(显示会员内容);}这里的意思可以先按中文去读如果isMember为真就执行大括号里的代码。你会发现JavaScript 的条件判断其实非常像我们平时说话里的“如果……就……”。三、最基础的ifif是最基础的条件判断写法。它适合表示一种非常直接的逻辑如果条件成立就执行某段代码。1. 基本语法if(条件){条件成立时要执行的代码;}你可以先不要被符号吓到重点看它的结构if小括号里写条件大括号里写条件成立后要执行的代码2. 一个最简单的例子constscore80;if(score60){console.log(成绩及格);}这段代码的意思是先判断score 60是否成立因为80 60成立所以输出“成绩及格”如果改成constscore50;if(score60){console.log(成绩及格);}那这次条件不成立大括号里的代码就不会执行。3. 大括号里的代码块是什么意思大括号里的内容可以先理解成只有条件成立时才会一起执行的一组代码。例如constisLogintrue;if(isLogin){console.log(欢迎回来);console.log(正在进入个人中心);}如果isLogin为true这两行都会执行。如果为false这两行都不会执行。四、if...else两条路二选一很多时候我们不只是想表达“条件成立时做什么”还想表达条件不成立时做什么。这时就要用到if...else。1. 基本语法if(条件){条件成立时执行的代码;}else{条件不成立时执行的代码;}2. 一个直观例子constscore58;if(score60){console.log(成绩及格);}else{console.log(成绩不及格);}这段代码表示如果成绩大于等于 60输出“成绩及格”否则输出“成绩不及格”3. 为什么这里只会走一条分支这点很重要。if...else的逻辑不是“两边都看看”而是先判断条件是否成立成立就走if不成立就走else。也就是说一次只会走其中一条路。五、if...else if...else多种情况逐个判断现实问题通常不只分成两种情况。例如成绩可能是优秀良好及格不及格这时候只用if...else就不够了我们需要更多分支。1. 基本语法if(条件1){条件1成立时执行;}elseif(条件2){条件2成立时执行;}elseif(条件3){条件3成立时执行;}else{前面都不成立时执行;}2. 成绩等级的基础例子constscore86;if(score90){console.log(成绩等级A);}elseif(score80){console.log(成绩等级B);}elseif(score60){console.log(成绩等级C);}else{console.log(成绩等级D);}这段代码的执行顺序是先判断score 90如果不成立再判断score 80如果还不成立再判断score 60前面都不成立才走else3. 判断顺序为什么很重要这一点特别值得初学者注意。条件判断通常是从上到下依次检查的只要遇到第一个成立的分支就会停下来。比如还是刚才那个成绩例子如果你写成这样constscore86;if(score60){console.log(成绩等级C);}elseif(score80){console.log(成绩等级B);}elseif(score90){console.log(成绩等级A);}那结果就会出问题。因为86 60已经成立了程序会直接输出C后面的分支根本不会继续判断。4. 范围判断通常要从严格到宽松这是一个非常实用的经验。像成绩分级这种范围判断通常更适合先判断范围更高、更严格的条件再判断范围更宽的条件。所以先判断 90再判断 80再判断 60会更合理。六、什么时候用switchif...else很常用但不是所有多分支场景都一定要用它。当你遇到这样的情况时同一个值要和多个固定结果做比较这时候switch往往会比较清楚。1. 一个典型场景例如用户角色是admin用户角色是editor用户角色是guest这类判断不是范围判断而是“这个值到底等于哪一个固定结果”。2.switch的基础写法constuserRoleeditor;switch(userRole){caseadmin:console.log(显示管理员面板);break;caseeditor:console.log(显示编辑内容区);break;caseguest:console.log(显示游客提示);break;default:console.log(显示默认页面);}你可以先把它理解成看userRole的值是什么然后依次和每个case去匹配匹配上哪个就执行哪个分支3.break是什么在switch里break非常重要。你现在可以先这样理解break表示“这一段执行完了到这里停住不要继续往下串”。如果少了break程序可能会继续执行后面的case造成结果不符合预期。4.default相当于什么default可以先理解成如果前面的case都没有匹配上就执行这里。它很像if...else中最后的else。5.switch和if...else怎么选这是一个非常常见的问题。你可以先用下面这个简单判断法1. 如果是范围判断、复杂条件判断优先考虑if...else比如分数区间预算是否超出同时满足多个条件2. 如果是同一个值和多个固定结果比较优先考虑switch比如用户角色星期编号状态字符串3.switch不适合直接判断区间例如成绩等级这种场景score90score80score60本质上是区间比较所以通常还是if...else if...else更自然。七、写条件判断前先把流程想清楚这是本章非常重要的一点。很多小白一学到if和switch就会马上开始写很长的判断逻辑。结果常常是写着写着分支乱了先后顺序错了自己都不知道代码想表达什么更稳妥的方式是先把流程想清楚再写代码。1. 可以先问自己三个问题1. 我要判断的条件到底是什么例如分数是否大于等于 60用户是否登录当前角色是什么2. 一共有几种可能结果例如及格 / 不及格A / B / C / Dadmin / editor / guest3. 这些结果之间有没有先后顺序例如成绩等级就有明显顺序而角色类型更像并列关系。只要你先把这三件事想清楚条件判断就会写得顺很多。八、什么是循环解决完“程序怎么做选择”之后下一类非常重要的问题就是程序怎么重复执行同一类操作例如输出 1 到 10输出 5 条欢迎语计算 1 到 100 的总和逐个检查一批数据如果没有循环你可能只能一行一行手动写console.log(1);console.log(2);console.log(3);console.log(4);console.log(5);这当然能用但明显很笨重。循环存在的目的就是解决这个问题。你可以先把循环理解成让一段代码在满足条件时重复执行。九、为什么程序需要循环程序里很多问题本质上都不是“做一次”而是“做很多次”。例如重复输出编号重复累加数字重复生成内容重复判断某些值如果没有循环代码会很快出现这些问题重复很多不容易改容易漏所以循环最大的价值之一就是用更少的代码完成重复性的工作。十、for已知大概要重复多少次在初学阶段for是最常见的循环之一。它特别适合这种场景我大概知道这段逻辑要重复多少次。例如从 1 输出到 10重复 5 次累加 1 到 1001. 基本语法for(初始值;条件;每轮更新){要重复执行的代码;}第一次看到这行语法很正常会有点懵但你现在不用急着一下子全背住。你可以先把它拆开理解。2. 三个位置分别在做什么例如for(letnumber1;number5;number1){console.log(number);}这三部分分别表示1.let number 1从哪里开始。2.number 5满足什么条件就继续循环。3.number 1每执行完一轮后怎么更新这个变量。你可以把这整段读成从 1 开始只要还小于等于 5就继续执行每执行完一轮就加 1。3. 一个打印 1 到 5 的例子for(letnumber1;number5;number1){console.log(number);}执行结果会依次输出1 2 3 4 54. 用for做累加循环不只是打印数字也可以边循环边计算。例如lettotal0;for(letnumber1;number5;number1){totalnumber;}console.log(total);这段代码的意思是先准备一个初始总和0从1累加到5每轮把当前数字加进总和里最后输出结果会是15十一、while只要条件成立就继续while也是非常重要的一种循环。它更适合这种场景现在不一定知道具体循环多少次但知道“只要某个条件成立就继续”。1. 基本语法while(条件){要重复执行的代码;}2. 一个最基础的例子letcount1;while(count5){console.log(count);count1;}这段代码的意思是count从 1 开始只要count 5成立就继续执行循环体每轮执行后让count加 1最终也会输出1 2 3 4 53. 为什么while容易写出死循环这是初学者很容易踩的坑。比如你写成letcount1;while(count5){console.log(count);}这里的问题是count永远没有变化。它会一直是1那么count 5就永远成立循环就不会停下来。这类问题通常就叫“死循环”。所以写while时一定要特别留意你的循环变量有没有在合适的时候更新。十二、for和while怎么选这也是初学者很常问的问题。你现在可以先用一个很直观的判断法1. 如果你大概知道要循环多少次优先考虑for比如从 1 到 10重复 5 次累加固定范围的数字2. 如果你更关注“条件什么时候不成立”优先考虑while比如只要余额还够就继续购买只要输入还没合格就继续提示3. 初学阶段一个更实用的建议如果只是数字范围类练习例如输出 1 到 10累加 1 到 100一般先优先用for会更容易写清楚。十三、条件和循环如何配合到这里你已经分别学了条件判断循环但真实问题里它们经常不是分开使用而是配合起来解决问题。你可以先把这种组合理解成先通过循环重复处理数据再在每一轮里用条件判断决定要不要做某件事。1. 在循环里加条件例如我们想输出 1 到 10 中的偶数。只靠循环还不够因为循环只能帮我们“从 1 数到 10”。但“哪些数字该输出”还需要一个判断条件。2. 输出 1 到 10 的偶数for(letnumber1;number10;number1){if(number%20){console.log(${number}是偶数);}}这里for负责从 1 走到 10if负责判断当前数字是不是偶数只有满足条件的数字才会输出这就是“条件和循环配合”的一个非常典型的入门场景。3. 用循环生成一组列表数据虽然我们现在还没有正式学数组和 DOM 渲染但你已经可以先做一个很有感觉的小练习for(letindex1;index5;index1){console.log(第${index}项继续学习 JavaScript 基础);}输出结果会是第 1 项继续学习 JavaScript 基础 第 2 项继续学习 JavaScript 基础 第 3 项继续学习 JavaScript 基础 第 4 项继续学习 JavaScript 基础 第 5 项继续学习 JavaScript 基础这个练习非常适合帮助你建立循环是“重复生成结构”模板字符串是“把重复内容组织起来”的初步感觉。十四、一个完整示例成绩等级判断程序下面我们来做一个本章最典型的完整示例。这个例子主要训练你使用if...else if...else理解分支顺序把判断结果组织成清晰输出1. 示例代码constscore86;letlevel;if(score90){levelA;}elseif(score80){levelB;}elseif(score60){levelC;}else{levelD;}console.log(成绩${score});console.log(等级${level});2. 怎么逐步读懂这段代码你可以按下面的顺序理解1. 先看输入数据这里的输入是constscore86;也就是本次成绩是86。2. 再看程序准备输出什么letlevel;这里先准备一个变量level后面会把成绩等级放进去。3. 最后按顺序看判断过程因为86 90不成立所以不会进入第一个分支。接着判断8680这次成立所以levelB;后面的分支就不会再继续判断了。所以最后输出结果是成绩86 等级B十五、一个完整示例输出简单数字规律这一次我们把循环和条件放在一起用。目标是输出 1 到 20 中所有能被 3 整除的数字。1. 示例代码for(letnumber1;number20;number1){if(number%30){console.log(${number}能被 3 整除);}}2. 这里同时用到了什么这段代码虽然不长但已经串起了很多前面学过的内容for负责从 1 循环到 20%判断是否整除if决定当前数字是否输出模板字符串把结果组织成一条清晰文本这也说明一件事真正写程序时知识点通常不是单独出现而是一起配合。十六、switch和循环会一起用吗会但在当前阶段你先不用急着把它们强行组合得太复杂。你可以先把重点放在用if...else学会范围判断用switch学会固定值匹配用for和while学会重复执行先掌握“循环里套一个简单判断”这已经足够打下很稳的基础了。等你后面继续学习函数、数组、DOM 和事件时它们才会更频繁地一起出现。十七、初学者最容易踩的坑这一章的坑非常典型而且几乎每个初学者都会遇到。1. 把当成比较再强调一次是赋值是比较是否相等例如letscore80;这里是把80赋给score。而下面才是判断score802. 条件顺序写反了尤其是在成绩分级、区间判断这类问题里这个坑非常常见。如果你把宽松条件放前面程序可能会太早进入某个分支后面的更精确条件就永远没机会执行。3.switch忘记写break这会导致本来只想执行一个分支结果继续串到后面的分支。所以入门阶段你可以先养成一个非常稳的习惯每个case写完主要逻辑后先想一下要不要接break。4.while忘记更新变量这会很容易造成死循环。比如条件一直成立变量永远没变循环就停不下来5. 一上来就写很深的嵌套例如if(条件1){if(条件2){if(条件3){// ...}}}这种写法不是绝对不能用但对纯小白来说刚开始就写三层四层嵌套通常会让逻辑变得很难读。当前阶段更推荐你先做到先把流程想清楚先写最直接的分支尽量让每个判断的责任清楚等学到函数以后你会进一步接触更舒服的整理方式。6. 还没想清楚“什么时候停”就开始写循环这是循环里最核心的问题之一。每次写循环前你都可以先问自己这个循环什么时候结束只要这个问题没想清楚循环就很容易写乱。十八、本章实践练习这一章非常适合做“小而完整”的逻辑练习。重点不是把代码写得花哨而是把流程写清楚。1. 练习 1写一个成绩等级判断程序请你自己声明一个成绩变量例如constscore72;然后完成下面规则90分及以上A80分及以上B60分及以上C其他D完成后用console.log输出最终等级。2. 练习 2用循环生成一组列表数据请用for循环输出 5 行内容例如第 1 项继续学习前端 第 2 项继续学习前端 ...这个练习重点是练习循环练习模板字符串练习“重复结构”的感觉3. 练习 3输出 1 到 20 中的偶数请使用一个循环一个条件判断来完成这个任务。建议你先自己写再和下面这个思路对照循环负责从 1 到 20判断负责筛选偶数4. 练习 4尝试用switch写一个角色判断例如admineditorguest请根据不同角色输出不同提示。这个练习重点是帮你真正体会switch更适合同一个值对应多个固定结果。5. 挑战练习输出简单数字规律如果你想多练一点可以试试下面两个挑战里的一个1. 输出 1 到 30 中所有能被 5 整除的数字2. 输出一个简单的乘法规律例如先不要急着做完整九九乘法表可以先做1 x 2 2 2 x 2 4 3 x 2 6 ... 9 x 2 18这个难度会更适合当前阶段。十九、学习重点提示这一章最重要的不是把所有语法都背下来而是先真正理解程序为什么要分支为什么要重复执行。请重点记住条件判断本质上是在根据布尔结果决定执行哪条路径。if适合“条件成立就执行”if...else适合两种结果if...else if...else适合多种分支。switch更适合同一个值和多个固定结果做比较。for更适合已知大致循环次数的场景while更适合“只要条件成立就继续”的场景。条件和循环经常会配合使用例如“循环里做筛选”。写条件和循环前先想清楚流程和停止条件会让代码更稳。避免一上来就写过深嵌套先把逻辑写清楚比写复杂更重要。如果你只记一句话请记住条件判断决定程序往哪走循环决定一段逻辑要不要继续重复做。二十、本章小结这一章你已经从“程序会处理值”进一步走到了“程序会做选择也会重复执行”。你已经学习了条件判断为什么存在if、if...else、if...else if...else的基础写法switch的使用场景for和while的基础用法条件与循环如何配合成绩等级判断和数字规律输出这类典型练习这一步非常关键因为从这一章开始JavaScript 才真正开始像一门“会控制流程的编程语言”。后面你学函数、数组、DOM 和事件时会不断重复用到本章的思想先判断再决定需要时重复如果这一章学扎实了后面写交互逻辑时会明显轻松很多。二十一、课后思考题请你思考下面几个问题为什么程序不能永远只从上到下执行同一套逻辑为什么if...else if...else的判断顺序很重要什么场景更适合switch什么场景更适合if...else为什么循环最关键的问题之一是“什么时候停止”为什么说“循环里加条件”是非常常见的一类基础逻辑建议你用自己的话把答案写下来。只要你能把这些问题说明白说明你已经开始真正建立程序流程的思维了。二十二、下一章预告下一章我们会继续学习从零开始学前端 | 第十四章函数与代码复用到那时你会开始接触“把一段逻辑封装起来反复调用”的思路这会让你的代码从“能写出来”进一步走向“更好组织、更容易复用”。
从零开始学前端 | 第十三章：条件判断与循环
本章定位上一章我们正式进入了 JavaScript 的“数据世界”。你已经学习了什么是变量。let和const的区别。常见数据类型是什么。算术运算、比较运算和逻辑运算怎么用。到这里你已经能写出一些会“存值、取值、比较和计算”的代码了。但如果代码只能从上到下一行一行执行它其实还是很“死”。例如成绩大于等于 60就显示“及格”用户是会员就显示会员内容一个提示要重复输出 5 次从 1 输出到 10只打印偶数这些问题都说明了一件事程序不仅要能处理数据还要能根据不同情况做不同选择并且在需要时重复执行一些逻辑。这就是这一章要解决的内容条件判断循环如果上一章是在学“程序在处理什么值”那这一章就是在学程序该怎么根据这些值决定往哪走以及要不要重复执行。本章学习目标学完这一章后你应该能做到理解条件判断的作用知道为什么程序需要分支逻辑。掌握if、if...else、if...else if...else的基础写法。理解switch的适用场景并知道它和if...else的区别。掌握for和while的基础用法。能理解循环“什么时候继续、什么时候停止”。知道条件判断和循环如何配合解决简单问题。能写出成绩等级判断、数字规律输出、列表数据生成这类基础练习。一、为什么程序需要条件判断现实世界里的很多事情都不是“永远只有一种结果”。例如如果今天下雨就带伞如果余额足够就付款如果成绩大于等于 60就显示及格如果用户没登录就提示先登录程序也是一样。很多时候代码不能永远只做同一件事而是要先看“当前情况是什么”再决定“接下来怎么做”。这就是条件判断存在的原因。你可以先把它理解成条件判断就是让程序根据不同情况走不同的代码路径。二、条件判断的本质是什么条件判断的核心其实并不复杂。它通常只包含两步先判断某个条件是否成立。再根据判断结果决定执行哪段代码。1. 条件判断依赖布尔结果你在上一章已经学过布尔值truefalse条件判断本质上就是围绕这两个结果展开的。例如constscore85;console.log(score60);这行代码会先计算score60它的结果不是数字也不是字符串而是一个布尔值。也就是说如果结果是true说明条件成立如果结果是false说明条件不成立2. 先判断再决定走哪条路比如constisMembertrue;if(isMember){console.log(显示会员内容);}这里的意思可以先按中文去读如果isMember为真就执行大括号里的代码。你会发现JavaScript 的条件判断其实非常像我们平时说话里的“如果……就……”。三、最基础的ifif是最基础的条件判断写法。它适合表示一种非常直接的逻辑如果条件成立就执行某段代码。1. 基本语法if(条件){条件成立时要执行的代码;}你可以先不要被符号吓到重点看它的结构if小括号里写条件大括号里写条件成立后要执行的代码2. 一个最简单的例子constscore80;if(score60){console.log(成绩及格);}这段代码的意思是先判断score 60是否成立因为80 60成立所以输出“成绩及格”如果改成constscore50;if(score60){console.log(成绩及格);}那这次条件不成立大括号里的代码就不会执行。3. 大括号里的代码块是什么意思大括号里的内容可以先理解成只有条件成立时才会一起执行的一组代码。例如constisLogintrue;if(isLogin){console.log(欢迎回来);console.log(正在进入个人中心);}如果isLogin为true这两行都会执行。如果为false这两行都不会执行。四、if...else两条路二选一很多时候我们不只是想表达“条件成立时做什么”还想表达条件不成立时做什么。这时就要用到if...else。1. 基本语法if(条件){条件成立时执行的代码;}else{条件不成立时执行的代码;}2. 一个直观例子constscore58;if(score60){console.log(成绩及格);}else{console.log(成绩不及格);}这段代码表示如果成绩大于等于 60输出“成绩及格”否则输出“成绩不及格”3. 为什么这里只会走一条分支这点很重要。if...else的逻辑不是“两边都看看”而是先判断条件是否成立成立就走if不成立就走else。也就是说一次只会走其中一条路。五、if...else if...else多种情况逐个判断现实问题通常不只分成两种情况。例如成绩可能是优秀良好及格不及格这时候只用if...else就不够了我们需要更多分支。1. 基本语法if(条件1){条件1成立时执行;}elseif(条件2){条件2成立时执行;}elseif(条件3){条件3成立时执行;}else{前面都不成立时执行;}2. 成绩等级的基础例子constscore86;if(score90){console.log(成绩等级A);}elseif(score80){console.log(成绩等级B);}elseif(score60){console.log(成绩等级C);}else{console.log(成绩等级D);}这段代码的执行顺序是先判断score 90如果不成立再判断score 80如果还不成立再判断score 60前面都不成立才走else3. 判断顺序为什么很重要这一点特别值得初学者注意。条件判断通常是从上到下依次检查的只要遇到第一个成立的分支就会停下来。比如还是刚才那个成绩例子如果你写成这样constscore86;if(score60){console.log(成绩等级C);}elseif(score80){console.log(成绩等级B);}elseif(score90){console.log(成绩等级A);}那结果就会出问题。因为86 60已经成立了程序会直接输出C后面的分支根本不会继续判断。4. 范围判断通常要从严格到宽松这是一个非常实用的经验。像成绩分级这种范围判断通常更适合先判断范围更高、更严格的条件再判断范围更宽的条件。所以先判断 90再判断 80再判断 60会更合理。六、什么时候用switchif...else很常用但不是所有多分支场景都一定要用它。当你遇到这样的情况时同一个值要和多个固定结果做比较这时候switch往往会比较清楚。1. 一个典型场景例如用户角色是admin用户角色是editor用户角色是guest这类判断不是范围判断而是“这个值到底等于哪一个固定结果”。2.switch的基础写法constuserRoleeditor;switch(userRole){caseadmin:console.log(显示管理员面板);break;caseeditor:console.log(显示编辑内容区);break;caseguest:console.log(显示游客提示);break;default:console.log(显示默认页面);}你可以先把它理解成看userRole的值是什么然后依次和每个case去匹配匹配上哪个就执行哪个分支3.break是什么在switch里break非常重要。你现在可以先这样理解break表示“这一段执行完了到这里停住不要继续往下串”。如果少了break程序可能会继续执行后面的case造成结果不符合预期。4.default相当于什么default可以先理解成如果前面的case都没有匹配上就执行这里。它很像if...else中最后的else。5.switch和if...else怎么选这是一个非常常见的问题。你可以先用下面这个简单判断法1. 如果是范围判断、复杂条件判断优先考虑if...else比如分数区间预算是否超出同时满足多个条件2. 如果是同一个值和多个固定结果比较优先考虑switch比如用户角色星期编号状态字符串3.switch不适合直接判断区间例如成绩等级这种场景score90score80score60本质上是区间比较所以通常还是if...else if...else更自然。七、写条件判断前先把流程想清楚这是本章非常重要的一点。很多小白一学到if和switch就会马上开始写很长的判断逻辑。结果常常是写着写着分支乱了先后顺序错了自己都不知道代码想表达什么更稳妥的方式是先把流程想清楚再写代码。1. 可以先问自己三个问题1. 我要判断的条件到底是什么例如分数是否大于等于 60用户是否登录当前角色是什么2. 一共有几种可能结果例如及格 / 不及格A / B / C / Dadmin / editor / guest3. 这些结果之间有没有先后顺序例如成绩等级就有明显顺序而角色类型更像并列关系。只要你先把这三件事想清楚条件判断就会写得顺很多。八、什么是循环解决完“程序怎么做选择”之后下一类非常重要的问题就是程序怎么重复执行同一类操作例如输出 1 到 10输出 5 条欢迎语计算 1 到 100 的总和逐个检查一批数据如果没有循环你可能只能一行一行手动写console.log(1);console.log(2);console.log(3);console.log(4);console.log(5);这当然能用但明显很笨重。循环存在的目的就是解决这个问题。你可以先把循环理解成让一段代码在满足条件时重复执行。九、为什么程序需要循环程序里很多问题本质上都不是“做一次”而是“做很多次”。例如重复输出编号重复累加数字重复生成内容重复判断某些值如果没有循环代码会很快出现这些问题重复很多不容易改容易漏所以循环最大的价值之一就是用更少的代码完成重复性的工作。十、for已知大概要重复多少次在初学阶段for是最常见的循环之一。它特别适合这种场景我大概知道这段逻辑要重复多少次。例如从 1 输出到 10重复 5 次累加 1 到 1001. 基本语法for(初始值;条件;每轮更新){要重复执行的代码;}第一次看到这行语法很正常会有点懵但你现在不用急着一下子全背住。你可以先把它拆开理解。2. 三个位置分别在做什么例如for(letnumber1;number5;number1){console.log(number);}这三部分分别表示1.let number 1从哪里开始。2.number 5满足什么条件就继续循环。3.number 1每执行完一轮后怎么更新这个变量。你可以把这整段读成从 1 开始只要还小于等于 5就继续执行每执行完一轮就加 1。3. 一个打印 1 到 5 的例子for(letnumber1;number5;number1){console.log(number);}执行结果会依次输出1 2 3 4 54. 用for做累加循环不只是打印数字也可以边循环边计算。例如lettotal0;for(letnumber1;number5;number1){totalnumber;}console.log(total);这段代码的意思是先准备一个初始总和0从1累加到5每轮把当前数字加进总和里最后输出结果会是15十一、while只要条件成立就继续while也是非常重要的一种循环。它更适合这种场景现在不一定知道具体循环多少次但知道“只要某个条件成立就继续”。1. 基本语法while(条件){要重复执行的代码;}2. 一个最基础的例子letcount1;while(count5){console.log(count);count1;}这段代码的意思是count从 1 开始只要count 5成立就继续执行循环体每轮执行后让count加 1最终也会输出1 2 3 4 53. 为什么while容易写出死循环这是初学者很容易踩的坑。比如你写成letcount1;while(count5){console.log(count);}这里的问题是count永远没有变化。它会一直是1那么count 5就永远成立循环就不会停下来。这类问题通常就叫“死循环”。所以写while时一定要特别留意你的循环变量有没有在合适的时候更新。十二、for和while怎么选这也是初学者很常问的问题。你现在可以先用一个很直观的判断法1. 如果你大概知道要循环多少次优先考虑for比如从 1 到 10重复 5 次累加固定范围的数字2. 如果你更关注“条件什么时候不成立”优先考虑while比如只要余额还够就继续购买只要输入还没合格就继续提示3. 初学阶段一个更实用的建议如果只是数字范围类练习例如输出 1 到 10累加 1 到 100一般先优先用for会更容易写清楚。十三、条件和循环如何配合到这里你已经分别学了条件判断循环但真实问题里它们经常不是分开使用而是配合起来解决问题。你可以先把这种组合理解成先通过循环重复处理数据再在每一轮里用条件判断决定要不要做某件事。1. 在循环里加条件例如我们想输出 1 到 10 中的偶数。只靠循环还不够因为循环只能帮我们“从 1 数到 10”。但“哪些数字该输出”还需要一个判断条件。2. 输出 1 到 10 的偶数for(letnumber1;number10;number1){if(number%20){console.log(${number}是偶数);}}这里for负责从 1 走到 10if负责判断当前数字是不是偶数只有满足条件的数字才会输出这就是“条件和循环配合”的一个非常典型的入门场景。3. 用循环生成一组列表数据虽然我们现在还没有正式学数组和 DOM 渲染但你已经可以先做一个很有感觉的小练习for(letindex1;index5;index1){console.log(第${index}项继续学习 JavaScript 基础);}输出结果会是第 1 项继续学习 JavaScript 基础 第 2 项继续学习 JavaScript 基础 第 3 项继续学习 JavaScript 基础 第 4 项继续学习 JavaScript 基础 第 5 项继续学习 JavaScript 基础这个练习非常适合帮助你建立循环是“重复生成结构”模板字符串是“把重复内容组织起来”的初步感觉。十四、一个完整示例成绩等级判断程序下面我们来做一个本章最典型的完整示例。这个例子主要训练你使用if...else if...else理解分支顺序把判断结果组织成清晰输出1. 示例代码constscore86;letlevel;if(score90){levelA;}elseif(score80){levelB;}elseif(score60){levelC;}else{levelD;}console.log(成绩${score});console.log(等级${level});2. 怎么逐步读懂这段代码你可以按下面的顺序理解1. 先看输入数据这里的输入是constscore86;也就是本次成绩是86。2. 再看程序准备输出什么letlevel;这里先准备一个变量level后面会把成绩等级放进去。3. 最后按顺序看判断过程因为86 90不成立所以不会进入第一个分支。接着判断8680这次成立所以levelB;后面的分支就不会再继续判断了。所以最后输出结果是成绩86 等级B十五、一个完整示例输出简单数字规律这一次我们把循环和条件放在一起用。目标是输出 1 到 20 中所有能被 3 整除的数字。1. 示例代码for(letnumber1;number20;number1){if(number%30){console.log(${number}能被 3 整除);}}2. 这里同时用到了什么这段代码虽然不长但已经串起了很多前面学过的内容for负责从 1 循环到 20%判断是否整除if决定当前数字是否输出模板字符串把结果组织成一条清晰文本这也说明一件事真正写程序时知识点通常不是单独出现而是一起配合。十六、switch和循环会一起用吗会但在当前阶段你先不用急着把它们强行组合得太复杂。你可以先把重点放在用if...else学会范围判断用switch学会固定值匹配用for和while学会重复执行先掌握“循环里套一个简单判断”这已经足够打下很稳的基础了。等你后面继续学习函数、数组、DOM 和事件时它们才会更频繁地一起出现。十七、初学者最容易踩的坑这一章的坑非常典型而且几乎每个初学者都会遇到。1. 把当成比较再强调一次是赋值是比较是否相等例如letscore80;这里是把80赋给score。而下面才是判断score802. 条件顺序写反了尤其是在成绩分级、区间判断这类问题里这个坑非常常见。如果你把宽松条件放前面程序可能会太早进入某个分支后面的更精确条件就永远没机会执行。3.switch忘记写break这会导致本来只想执行一个分支结果继续串到后面的分支。所以入门阶段你可以先养成一个非常稳的习惯每个case写完主要逻辑后先想一下要不要接break。4.while忘记更新变量这会很容易造成死循环。比如条件一直成立变量永远没变循环就停不下来5. 一上来就写很深的嵌套例如if(条件1){if(条件2){if(条件3){// ...}}}这种写法不是绝对不能用但对纯小白来说刚开始就写三层四层嵌套通常会让逻辑变得很难读。当前阶段更推荐你先做到先把流程想清楚先写最直接的分支尽量让每个判断的责任清楚等学到函数以后你会进一步接触更舒服的整理方式。6. 还没想清楚“什么时候停”就开始写循环这是循环里最核心的问题之一。每次写循环前你都可以先问自己这个循环什么时候结束只要这个问题没想清楚循环就很容易写乱。十八、本章实践练习这一章非常适合做“小而完整”的逻辑练习。重点不是把代码写得花哨而是把流程写清楚。1. 练习 1写一个成绩等级判断程序请你自己声明一个成绩变量例如constscore72;然后完成下面规则90分及以上A80分及以上B60分及以上C其他D完成后用console.log输出最终等级。2. 练习 2用循环生成一组列表数据请用for循环输出 5 行内容例如第 1 项继续学习前端 第 2 项继续学习前端 ...这个练习重点是练习循环练习模板字符串练习“重复结构”的感觉3. 练习 3输出 1 到 20 中的偶数请使用一个循环一个条件判断来完成这个任务。建议你先自己写再和下面这个思路对照循环负责从 1 到 20判断负责筛选偶数4. 练习 4尝试用switch写一个角色判断例如admineditorguest请根据不同角色输出不同提示。这个练习重点是帮你真正体会switch更适合同一个值对应多个固定结果。5. 挑战练习输出简单数字规律如果你想多练一点可以试试下面两个挑战里的一个1. 输出 1 到 30 中所有能被 5 整除的数字2. 输出一个简单的乘法规律例如先不要急着做完整九九乘法表可以先做1 x 2 2 2 x 2 4 3 x 2 6 ... 9 x 2 18这个难度会更适合当前阶段。十九、学习重点提示这一章最重要的不是把所有语法都背下来而是先真正理解程序为什么要分支为什么要重复执行。请重点记住条件判断本质上是在根据布尔结果决定执行哪条路径。if适合“条件成立就执行”if...else适合两种结果if...else if...else适合多种分支。switch更适合同一个值和多个固定结果做比较。for更适合已知大致循环次数的场景while更适合“只要条件成立就继续”的场景。条件和循环经常会配合使用例如“循环里做筛选”。写条件和循环前先想清楚流程和停止条件会让代码更稳。避免一上来就写过深嵌套先把逻辑写清楚比写复杂更重要。如果你只记一句话请记住条件判断决定程序往哪走循环决定一段逻辑要不要继续重复做。二十、本章小结这一章你已经从“程序会处理值”进一步走到了“程序会做选择也会重复执行”。你已经学习了条件判断为什么存在if、if...else、if...else if...else的基础写法switch的使用场景for和while的基础用法条件与循环如何配合成绩等级判断和数字规律输出这类典型练习这一步非常关键因为从这一章开始JavaScript 才真正开始像一门“会控制流程的编程语言”。后面你学函数、数组、DOM 和事件时会不断重复用到本章的思想先判断再决定需要时重复如果这一章学扎实了后面写交互逻辑时会明显轻松很多。二十一、课后思考题请你思考下面几个问题为什么程序不能永远只从上到下执行同一套逻辑为什么if...else if...else的判断顺序很重要什么场景更适合switch什么场景更适合if...else为什么循环最关键的问题之一是“什么时候停止”为什么说“循环里加条件”是非常常见的一类基础逻辑建议你用自己的话把答案写下来。只要你能把这些问题说明白说明你已经开始真正建立程序流程的思维了。二十二、下一章预告下一章我们会继续学习从零开始学前端 | 第十四章函数与代码复用到那时你会开始接触“把一段逻辑封装起来反复调用”的思路这会让你的代码从“能写出来”进一步走向“更好组织、更容易复用”。
