从零开始学前端 | 第十三章：条件判断与循环-酒店常州论坛

本章定位

上一章，我们正式进入了 JavaScript 的“数据世界”。

你已经学习了：

什么是变量。
let和const的区别。
常见数据类型是什么。
算术运算、比较运算和逻辑运算怎么用。

到这里，你已经能写出一些会“存值、取值、比较和计算”的代码了。

但如果代码只能从上到下一行一行执行，它其实还是很“死”。

例如：

成绩大于等于 60，就显示“及格”
用户是会员，就显示会员内容
一个提示要重复输出 5 次
从 1 输出到 10，只打印偶数

这些问题都说明了一件事：

程序不仅要能处理数据，还要能根据不同情况做不同选择，并且在需要时重复执行一些逻辑。

这就是这一章要解决的内容：

条件判断
循环

如果上一章是在学“程序在处理什么值”，那这一章就是在学：

程序该怎么根据这些值决定往哪走，以及要不要重复执行。

本章学习目标

学完这一章后，你应该能做到：

理解条件判断的作用，知道为什么程序需要分支逻辑。
掌握if、if...else、if...else if...else的基础写法。
理解switch的适用场景，并知道它和if...else的区别。
掌握for和while的基础用法。
能理解循环“什么时候继续、什么时候停止”。
知道条件判断和循环如何配合解决简单问题。
能写出成绩等级判断、数字规律输出、列表数据生成这类基础练习。

一、为什么程序需要条件判断

现实世界里的很多事情，都不是“永远只有一种结果”。

例如：

如果今天下雨，就带伞
如果余额足够，就付款
如果成绩大于等于 60，就显示及格
如果用户没登录，就提示先登录

程序也是一样。

很多时候，代码不能永远只做同一件事，而是要先看“当前情况是什么”，再决定“接下来怎么做”。

这就是条件判断存在的原因。

你可以先把它理解成：

条件判断就是让程序根据不同情况，走不同的代码路径。

二、条件判断的本质是什么

条件判断的核心，其实并不复杂。

它通常只包含两步：

先判断某个条件是否成立。
再根据判断结果决定执行哪段代码。

1. 条件判断依赖布尔结果

你在上一章已经学过布尔值：

true
false

条件判断本质上就是围绕这两个结果展开的。

例如：

constscore=85;console.log(score>=60);

这行代码会先计算：

score>=60

它的结果不是数字，也不是字符串，而是一个布尔值。

也就是说：

如果结果是true，说明条件成立
如果结果是false，说明条件不成立

2. 先判断，再决定走哪条路

比如：

constisMember=true;if(isMember){console.log("显示会员内容");}

这里的意思可以先按中文去读：

如果isMember为真，就执行大括号里的代码。

你会发现，JavaScript 的条件判断，其实非常像我们平时说话里的“如果……就……”。

三、最基础的`if`

if是最基础的条件判断写法。

它适合表示一种非常直接的逻辑：

如果条件成立，就执行某段代码。

1. 基本语法

if(条件){条件成立时要执行的代码;}

你可以先不要被符号吓到，重点看它的结构：

if
小括号里写条件
大括号里写条件成立后要执行的代码

2. 一个最简单的例子

constscore=80;if(score>=60){console.log("成绩及格");}

这段代码的意思是：

先判断score >= 60是否成立
因为80 >= 60成立
所以输出“成绩及格”

如果改成：

constscore=50;if(score>=60){console.log("成绩及格");}

那这次条件不成立，大括号里的代码就不会执行。

3. 大括号里的代码块是什么意思

大括号里的内容，可以先理解成：

只有条件成立时，才会一起执行的一组代码。

例如：

constisLogin=true;if(isLogin){console.log("欢迎回来");console.log("正在进入个人中心");}

如果isLogin为true，这两行都会执行。

如果为false，这两行都不会执行。

四、`if...else`：两条路二选一

很多时候，我们不只是想表达“条件成立时做什么”，还想表达：

条件不成立时做什么。

这时就要用到if...else。

1. 基本语法

if(条件){条件成立时执行的代码;}else{条件不成立时执行的代码;}

2. 一个直观例子

constscore=58;if(score>=60){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. 成绩等级的基础例子

constscore=86;if(score>=90){console.log("成绩等级：A");}elseif(score>=80){console.log("成绩等级：B");}elseif(score>=60){console.log("成绩等级：C");}else{console.log("成绩等级：D");}

这段代码的执行顺序是：

先判断score >= 90
如果不成立，再判断score >= 80
如果还不成立，再判断score >= 60
前面都不成立，才走else

3. 判断顺序为什么很重要

这一点特别值得初学者注意。

条件判断通常是从上到下依次检查的，只要遇到第一个成立的分支，就会停下来。

比如还是刚才那个成绩例子，如果你写成这样：

constscore=86;if(score>=60){console.log("成绩等级：C");}elseif(score>=80){console.log("成绩等级：B");}elseif(score>=90){console.log("成绩等级：A");}

那结果就会出问题。

因为86 >= 60已经成立了，程序会直接输出C，后面的分支根本不会继续判断。

4. 范围判断通常要从严格到宽松

这是一个非常实用的经验。

像成绩分级这种范围判断，通常更适合：

先判断范围更高、更严格的条件，再判断范围更宽的条件。

所以：

先判断>= 90
再判断>= 80
再判断>= 60

会更合理。

六、什么时候用`switch`

if...else很常用，但不是所有多分支场景都一定要用它。

当你遇到这样的情况时：

同一个值，要和多个固定结果做比较

这时候switch往往会比较清楚。

1. 一个典型场景

例如：

用户角色是admin
用户角色是editor
用户角色是guest

这类判断不是范围判断，而是“这个值到底等于哪一个固定结果”。

2.`switch`的基础写法

constuserRole="editor";switch(userRole){case"admin":console.log("显示管理员面板");break;case"editor":console.log("显示编辑内容区");break;case"guest":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`不适合直接判断区间

例如成绩等级这种场景：

score>=90score>=80score>=60

本质上是区间比较，所以通常还是if...else if...else更自然。

七、写条件判断前，先把流程想清楚

这是本章非常重要的一点。

很多小白一学到if和switch，就会马上开始写很长的判断逻辑。

结果常常是：

写着写着分支乱了
先后顺序错了
自己都不知道代码想表达什么

更稳妥的方式是：

先把流程想清楚，再写代码。

1. 可以先问自己三个问题

1. 我要判断的条件到底是什么

例如：

分数是否大于等于 60
用户是否登录
当前角色是什么

2. 一共有几种可能结果

例如：

及格 / 不及格
A / B / C / D
admin / editor / guest

3. 这些结果之间有没有先后顺序

例如成绩等级就有明显顺序，而角色类型更像并列关系。

只要你先把这三件事想清楚，条件判断就会写得顺很多。

八、什么是循环

解决完“程序怎么做选择”之后，下一类非常重要的问题就是：

程序怎么重复执行同一类操作？

例如：

输出 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 到 100

1. 基本语法

for(初始值;条件;每轮更新){要重复执行的代码;}

第一次看到这行语法很正常会有点懵，但你现在不用急着一下子全背住。

你可以先把它拆开理解。

2. 三个位置分别在做什么

例如：

for(letnumber=1;number<=5;number+=1){console.log(number);}

这三部分分别表示：

1.`let number = 1`

从哪里开始。

2.`number <= 5`

满足什么条件就继续循环。

3.`number += 1`

每执行完一轮后，怎么更新这个变量。

你可以把这整段读成：

从 1 开始，只要还小于等于 5，就继续执行；每执行完一轮，就加 1。

3. 一个打印 1 到 5 的例子

for(letnumber=1;number<=5;number+=1){console.log(number);}

执行结果会依次输出：

1 2 3 4 5

4. 用`for`做累加

循环不只是打印数字，也可以边循环边计算。

例如：

lettotal=0;for(letnumber=1;number<=5;number+=1){total+=number;}console.log(total);

这段代码的意思是：

先准备一个初始总和0
从1累加到5
每轮把当前数字加进总和里

最后输出结果会是：

十一、`while`：只要条件成立就继续

while也是非常重要的一种循环。

它更适合这种场景：

现在不一定知道具体循环多少次，但知道“只要某个条件成立就继续”。

1. 基本语法

while(条件){要重复执行的代码;}

2. 一个最基础的例子

letcount=1;while(count<=5){console.log(count);count+=1;}

这段代码的意思是：

count从 1 开始
只要count <= 5成立，就继续执行循环体
每轮执行后，让count加 1

最终也会输出：

1 2 3 4 5

3. 为什么`while`容易写出死循环

这是初学者很容易踩的坑。

比如你写成：

letcount=1;while(count<=5){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(letnumber=1;number<=10;number+=1){if(number%2===0){console.log(`${number}是偶数`);}}

这里：

for负责从 1 走到 10
if负责判断当前数字是不是偶数
只有满足条件的数字才会输出

这就是“条件和循环配合”的一个非常典型的入门场景。

3. 用循环生成一组列表数据

虽然我们现在还没有正式学数组和 DOM 渲染，但你已经可以先做一个很有感觉的小练习：

for(letindex=1;index<=5;index+=1){console.log(`第${index}项：继续学习 JavaScript 基础`);}

输出结果会是：

第 1 项：继续学习 JavaScript 基础 第 2 项：继续学习 JavaScript 基础 第 3 项：继续学习 JavaScript 基础 第 4 项：继续学习 JavaScript 基础 第 5 项：继续学习 JavaScript 基础

这个练习非常适合帮助你建立：

循环是“重复生成结构”
模板字符串是“把重复内容组织起来”

的初步感觉。

十四、一个完整示例：成绩等级判断程序

下面我们来做一个本章最典型的完整示例。

这个例子主要训练你：

使用if...else if...else
理解分支顺序
把判断结果组织成清晰输出

1. 示例代码

constscore=86;letlevel="";if(score>=90){level="A";}elseif(score>=80){level="B";}elseif(score>=60){level="C";}else{level="D";}console.log(`成绩：${score}`);console.log(`等级：${level}`);

2. 怎么逐步读懂这段代码

你可以按下面的顺序理解：

1. 先看输入数据

这里的输入是：

constscore=86;

也就是本次成绩是86。

2. 再看程序准备输出什么

letlevel="";

这里先准备一个变量level，后面会把成绩等级放进去。

3. 最后按顺序看判断过程

因为86 >= 90不成立，所以不会进入第一个分支。

接着判断：

86>=80

这次成立，所以：

level="B";

后面的分支就不会再继续判断了。

所以最后输出结果是：

成绩：86 等级：B

十五、一个完整示例：输出简单数字规律

这一次我们把循环和条件放在一起用。

目标是：

输出 1 到 20 中所有能被 3 整除的数字。

1. 示例代码

for(letnumber=1;number<=20;number+=1){if(number%3===0){console.log(`${number}能被 3 整除`);}}

2. 这里同时用到了什么

这段代码虽然不长，但已经串起了很多前面学过的内容：

for：负责从 1 循环到 20
%：判断是否整除
if：决定当前数字是否输出
模板字符串：把结果组织成一条清晰文本

这也说明一件事：

真正写程序时，知识点通常不是单独出现，而是一起配合。

十六、`switch`和循环会一起用吗

会，但在当前阶段，你先不用急着把它们强行组合得太复杂。

你可以先把重点放在：

用if...else学会范围判断
用switch学会固定值匹配
用for和while学会重复执行
先掌握“循环里套一个简单判断”

这已经足够打下很稳的基础了。

等你后面继续学习函数、数组、DOM 和事件时，它们才会更频繁地一起出现。

十七、初学者最容易踩的坑

这一章的坑非常典型，而且几乎每个初学者都会遇到。

1. 把`=`当成比较

再强调一次：

=是赋值
===是比较是否相等

例如：

letscore=80;

这里是把80赋给score。

而下面才是判断：

score===80

2. 条件顺序写反了

尤其是在成绩分级、区间判断这类问题里，这个坑非常常见。

如果你把宽松条件放前面，程序可能会太早进入某个分支，后面的更精确条件就永远没机会执行。

3.`switch`忘记写`break`

这会导致本来只想执行一个分支，结果继续串到后面的分支。

所以入门阶段你可以先养成一个非常稳的习惯：

每个case写完主要逻辑后，先想一下要不要接break。

4.`while`忘记更新变量

这会很容易造成死循环。

比如：

条件一直成立
变量永远没变
循环就停不下来

5. 一上来就写很深的嵌套

例如：

if(条件1){if(条件2){if(条件3){// ...}}}

这种写法不是绝对不能用，但对纯小白来说，刚开始就写三层四层嵌套，通常会让逻辑变得很难读。

当前阶段更推荐你先做到：

先把流程想清楚
先写最直接的分支
尽量让每个判断的责任清楚

等学到函数以后，你会进一步接触更舒服的整理方式。

6. 还没想清楚“什么时候停”，就开始写循环

这是循环里最核心的问题之一。

每次写循环前，你都可以先问自己：

这个循环什么时候结束？

只要这个问题没想清楚，循环就很容易写乱。

十八、本章实践练习

这一章非常适合做“小而完整”的逻辑练习。

重点不是把代码写得花哨，而是把流程写清楚。

1. 练习 1：写一个成绩等级判断程序

请你自己声明一个成绩变量，例如：

constscore=72;

然后完成下面规则：

90分及以上：A
80分及以上：B
60分及以上：C
其他：D

完成后，用console.log输出最终等级。

2. 练习 2：用循环生成一组列表数据

请用for循环输出 5 行内容，例如：

第 1 项：继续学习前端 第 2 项：继续学习前端 ...

这个练习重点是：

练习循环
练习模板字符串
练习“重复结构”的感觉

3. 练习 3：输出 1 到 20 中的偶数

请使用：

一个循环
一个条件判断

来完成这个任务。

建议你先自己写，再和下面这个思路对照：

循环负责从 1 到 20
判断负责筛选偶数

4. 练习 4：尝试用`switch`写一个角色判断

例如：

admin
editor
guest

请根据不同角色输出不同提示。

这个练习重点是帮你真正体会：

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？
为什么循环最关键的问题之一是“什么时候停止”？
为什么说“循环里加条件”是非常常见的一类基础逻辑？

建议你用自己的话把答案写下来。只要你能把这些问题说明白，说明你已经开始真正建立程序流程的思维了。

二十二、下一章预告

下一章我们会继续学习：

从零开始学前端 | 第十四章：函数与代码复用

到那时，你会开始接触“把一段逻辑封装起来，反复调用”的思路，这会让你的代码从“能写出来”进一步走向“更好组织、更容易复用”。

企业官网建设流程全解析

本章定位

本章学习目标

一、为什么程序需要条件判断

二、条件判断的本质是什么

1. 条件判断依赖布尔结果

2. 先判断，再决定走哪条路

三、最基础的if

1. 基本语法

2. 一个最简单的例子

3. 大括号里的代码块是什么意思

四、if...else：两条路二选一

1. 基本语法

2. 一个直观例子

3. 为什么这里只会走一条分支

五、if...else if...else：多种情况逐个判断

1. 基本语法

2. 成绩等级的基础例子

3. 判断顺序为什么很重要

4. 范围判断通常要从严格到宽松

六、什么时候用switch

1. 一个典型场景

2.switch的基础写法

3.break是什么

4.default相当于什么

5.switch和if...else怎么选

1. 如果是范围判断、复杂条件判断

2. 如果是同一个值和多个固定结果比较

3.switch不适合直接判断区间

七、写条件判断前，先把流程想清楚

1. 可以先问自己三个问题

1. 我要判断的条件到底是什么

2. 一共有几种可能结果

3. 这些结果之间有没有先后顺序

八、什么是循环

九、为什么程序需要循环

十、for：已知大概要重复多少次

1. 基本语法

2. 三个位置分别在做什么

1.let number = 1

2.number <= 5

3.number += 1

3. 一个打印 1 到 5 的例子

4. 用for做累加

十一、while：只要条件成立就继续

1. 基本语法

2. 一个最基础的例子

3. 为什么while容易写出死循环

十二、for和while怎么选

1. 如果你大概知道要循环多少次

2. 如果你更关注“条件什么时候不成立”

3. 初学阶段一个更实用的建议

十三、条件和循环如何配合

1. 在循环里加条件

2. 输出 1 到 10 的偶数

3. 用循环生成一组列表数据

十四、一个完整示例：成绩等级判断程序

1. 示例代码

2. 怎么逐步读懂这段代码

1. 先看输入数据

2. 再看程序准备输出什么

3. 最后按顺序看判断过程

十五、一个完整示例：输出简单数字规律

1. 示例代码

2. 这里同时用到了什么

十六、switch和循环会一起用吗

十七、初学者最容易踩的坑

1. 把=当成比较

2. 条件顺序写反了

3.switch忘记写break

4.while忘记更新变量

5. 一上来就写很深的嵌套

6. 还没想清楚“什么时候停”，就开始写循环

十八、本章实践练习

1. 练习 1：写一个成绩等级判断程序

2. 练习 2：用循环生成一组列表数据

3. 练习 3：输出 1 到 20 中的偶数

4. 练习 4：尝试用switch写一个角色判断

5. 挑战练习：输出简单数字规律

1. 输出 1 到 30 中所有能被 5 整除的数字

三、最基础的`if`

四、`if...else`：两条路二选一

五、`if...else if...else`：多种情况逐个判断

六、什么时候用`switch`

2.`switch`的基础写法

3.`break`是什么

4.`default`相当于什么

5.`switch`和`if...else`怎么选

3.`switch`不适合直接判断区间

十、`for`：已知大概要重复多少次

1.`let number = 1`

2.`number <= 5`

3.`number += 1`

4. 用`for`做累加

十一、`while`：只要条件成立就继续

3. 为什么`while`容易写出死循环

十二、`for`和`while`怎么选

十六、`switch`和循环会一起用吗

1. 把`=`当成比较

3.`switch`忘记写`break`

4.`while`忘记更新变量

4. 练习 4：尝试用`switch`写一个角色判断