Javascript笔记分享-流程控制（超级超级详细！！！）

wanderful_2025-12-23 8:24

一、基础知识：定义变量：

JS 中代码块与let/var的作用域

（1）代码块的核心作用

用 { } 包裹的代码称为代码块，它的作用是对代码分组：

  • 同一代码块内的代码是 "同一组"，要么全部执行，要么全部不执行（比如if/ 循环的代码块）。

（2）let和var的作用域差异

作用域指 "变量能被访问的范围"，let和var的核心区别是是否具有块作用域：

声明方式 块作用域 变量访问范围
let ✅ 有 仅在代码块内部可访问，外部无法访问
var ❌ 无 不受代码块限制，代码块外部也能访问

（3）示例验证（对应代码）

javascript运行

复制代码 
{
    // 用var声明变量a
    var a = 10
}
// 代码块外部可以访问var声明的a → 输出10
console.log(a)

如果把var换成let：javascript运行

复制代码 
{
    let a = 10
}
// 代码块外部无法访问let声明的a → 报错：a is not defined
console.log(a)

二、if语句：

（1）简答的if判断

流程控制语句可以用来改变程序执行的顺序，我们也应该编写代码块，这样结构会更加的清晰

  1. 条件判断语句
  2. 条件分支语句
  3. 循环语句

if 语句：

  • 语法：if (条件表达式){

语句...

}

  • 执行流程
  1. if 语句在执行会先对 if 后的条件表达式进行求值判断， 如果结果为 true ，则执行 if 后的语句如果结果为false 则不执行
  2. if 语句只会控制紧随其后的那一行代码，如果希望可以控制多行代码 ，可以使用 {} 将语句扩起 来最佳实践：即使 if 后只有 1 行代码 ，我们也应该编写代码块 ，这样结构 会更加的清晰

举个例子

（2）if-else语句

javascript 复制代码 
/*if-else语句
- 语法:
  if(条件表达式){
      语句...
  }else{
      语句...
  }
- 执行流程:
  if-else执行时, 先对条件表达式进行求值判断,
      如果结果为true 则执行if后的语句
      如果结果为false 则执行else后的语句*/


if-else if-else语句:
- 语法:
  if(条件表达式){
      语句...
  }else if(条件表达式){
      语句...
  }else if(条件表达式){
      语句...
  }else if(条件表达式){
      语句...
  }else{
      语句...
  }
/*- 执行流程:
  if-else if-else语句, 会自上向下依次对if后的条件表达式进行求值判断,
      如果条件表达式结果为true, 则执行当前if后的语句, 执行完毕语句结束
      如果条件表达式结果为false, 则继续向下判断, 直到找到true位置*/
javascript 复制代码 
/*
如果条件表达式结果为false, 则继续向下判断, 直到找到true为止
如果所有的条件表达式都是false, 则执行else后的语句
*/

let age = 70

// if(age >= 60){
//     alert('你已经退休了!')
// }else{
//     alert('你还没有退休!')
// }

// 新增：大于等于90的条件
if(age >= 90){
    alert('您太长寿了')
}else if(age >= 80){
    alert('你比楼上那位还年轻不小!')
}else if(age >= 60 ){
    alert('你已经退休了!')
}else if(age >= 30){
    alert('你已经步入中年了!')
}else if(age >= 18){
    alert('你已经成年了!')
}else{
    alert('你还未成年!')
}

（3）补充知识------运算符

JS 比较运算符：==、===、!=、!== 详解

1.相等运算符（==）

  • 核心作用：判断两个值是否 "值相等"（允许类型转换）
  • 规则 ：比较不同类型的值时，先自动转换为相同类型（通常转数值），再比较值
  • 特殊情况 ：
    1. null == undefined → 返回 true
    2. NaN == 任意值（包括 NaN 自身）→ 都返回 false

2.全等运算符（===）

  • 核心作用：判断两个值是否 "值 + 类型都全等"（不允许类型转换）
  • 规则 ：若两个值的类型不同 ，直接返回 false；类型相同才比较值
  • 特殊情况 ：null === undefined → 返回 false（类型不同：null 是对象类型，undefined 是未定义类型）

3.不等运算符（!=）

  • 核心作用：判断两个值是否 "值不相等"（允许类型转换）
  • 规则 ：先自动转换类型，再判断值是否不相等（是 == 的取反）

4.不全等运算符（!==）

  • 核心作用：判断两个值是否 "值或类型不全等"（不允许类型转换）
  • 规则 ：若类型不同，直接返回 true；类型相同则判断值是否不相等（是 === 的取反）
运算符 示例代码 执行结果 结果说明
== 10 == '10' true 字符串转数值后值相等
== null == undefined true 特殊规则：null 和 undefined 相等
== NaN == NaN false NaN 不和任何值相等（包括自身）
== 0 == false true false 转数值为 0，值相等
=== 10 === '10' false 类型不同（数字 vs 字符串），直接返回 false
=== null === undefined false 类型不同（null 是对象，undefined 是未定义）
=== 10 === 10 true 类型 + 值都相等
!= 10 != '10' false 类型转换后值相等，取反为 false
!= null != undefined false 特殊规则：null 和 undefined 相等，取反为 false
!== 10 !== '10' true 类型不同，直接返回 true
!== null !== undefined true 类型不同，直接返回 true
!== 10 !== 20 true 类型相同但值不同，返回 true
javascript 复制代码 
// 1. 相等运算符 ==
console.log(10 == '10'); // true
console.log(null == undefined); // true
console.log(NaN == NaN); // false

// 2. 全等运算符 ===
console.log(10 === '10'); // false
console.log(null === undefined); // false
console.log(10 === 10); // true

// 3. 不等运算符 !=
console.log(10 != '10'); // false
console.log(null != undefined); // false

// 4. 不全等运算符 !==
console.log(10 !== '10'); // true
console.log(null !== undefined); // true
console.log(10 !== 20); // true

（4）小练习

1.前置知识点说明

prompt() 是 JS 中用于获取用户输入的方法：

  • 作用：弹出输入框，获取用户输入的内容
  • 返回值：以字符串类型返回用户输入的内容
  • 转换为数字：可通过 +prompt(...) 的方式，将输入的字符串转为数值类型示例：let num = +prompt("请输入一个整数：")

2.练习题目（共 3 题）

练习 1：判断奇偶数

需求：编写程序，获取用户输入的整数，判断并显示该数是奇数还是偶数。

javascript 复制代码 
<script>
/*
    - 练习1:
        编写一个程序，获取一个用户输入的整数。然后通过程序显示这个数是奇数还是偶数。
*/
// 编写一个程序，获取一个用户输入的整数
// let num = +prompt("请输入一个整数")
let num = parseInt(prompt("请输入一个整数"))

// 验证一下，用户的输入是否合法，只有是有效数字时，我们才检查它是否是偶数
// 我们不能使用==或===来检查一个值是否是NaN
// 可以使用isNaN()函数来检查一个值是否是NaN
if (isNaN(num)) {
    alert("你的输入有问题，请输入整数! ")
} else {
    // 然后通过程序显示这个数是奇数还是偶数。
    if (num % 2 === 0) {
        alert(`${num} 是偶数! `)
    } else {
        alert(`${num} 是奇数! `)
    }
}
</script>
练习 2：成绩对应奖励

需求：从键盘输入小明的期末成绩，根据成绩给出对应奖励：

  • 成绩 = 100 时 → 奖励一辆 BMW
  • 成绩在 [80-99] 时 → 奖励一台 iphone
  • 成绩在 [60-79] 时 → 奖励一本参考书
  • 其他情况 → 无奖励
javascript 复制代码 
/*
- 练习2:
从键盘输入小明的期末成绩:
    当成绩为100时, '奖励一辆BMW'
    当成绩为[80-99]时, '奖励一台iphone'
    当成绩为[60-79]时, '奖励一本参考书'
    其他时, 什么奖励也没有
*/

//从键盘输入小明的期末成绩
let score = +prompt('请输入小明的期末成绩：')

// 检查score是否合法
if(isNaN(score) || score<0 || score>100){
    alert('请输入一个合法的分数')
}else{
    // 当成绩为100时, '奖励一辆BMW'
    if(score === 100){
        alert('汽车一辆~')
    }else if(score >= 80){
        // 当成绩为[80-99]时, '奖励一台iphone'
        alert('手机一台~')
    }else if(score >= 60){
        // 当成绩为[60-79]时, '奖励一本参考书'
        alert('参考书一本~')
    }else{
        // 其他时, 什么奖励也没有
        alert('啥也没有~')
    }
}
练习 3：创业项目融资评估

需求：投资机构评估创业项目是否值得融资，核心考察 3 个维度：

  • 条件：团队实力≥90 分、市场规模≥10 亿、盈利模型评分≥80 分
  • 判断逻辑（和原逻辑完全一致）：
    1. 三个条件同时满足 → 输出 "重点投资，全力扶持！"
    2. 仅满足两个条件 → 输出 "可小额投资，持续观察！"
    3. 三个条件都不满足 → 输出 "暂不投资，建议优化项目！"
javascript 复制代码 
// 获取三个维度的评分（转为数字类型）
let teamScore = +prompt("请输入团队实力评分（0-100）：");
let marketScale = +prompt("请输入市场规模（单位：亿，直接输入数字）：");
let profitScore = +prompt("请输入盈利模型评分（0-100）：");

// 统计满足的条件数量
let meetCount = 0;
if (teamScore >= 90) meetCount++;
if (marketScale >= 10) meetCount++;
if (profitScore >= 80) meetCount++;

// 按条件判断输出结果
if (meetCount === 3) {
    alert("重点投资，全力扶持！");
} else if (meetCount === 2) {
    alert("可小额投资，持续观察！");
} else {
    alert("暂不投资，建议优化项目！");
}

三、switch-case语句

JS 中 switch 语句详解

1.switch 语句的语法

用于多条件匹配的分支判断，语法结构：

javascript 复制代码 
switch(表达式) {
    case 表达式1:
        代码块1;
        break; // 可选，用于终止后续case执行
    case 表达式2:
        代码块2;
        break;
    // ... 更多case
    default:
        默认代码块; // 所有case不匹配时执行
        break;
}

2.执行流程

  1. 先计算switch后的表达式的值；
  2. 依次将该值与每个case后的表达式做全等比较（===）；
  3. 若某case匹配成功（结果为true），则从当前case开始执行代码；
  4. 若所有case都不匹配，执行default里的代码。

3.核心注意事项

  • case是 "代码执行的起始位置"：匹配成功后，会继续执行后续所有 case 的代码 （除非用break终止）；
  • break的作用：执行完当前case的代码后，用break跳出switch，避免执行其他case。

4.示例：根据星期数显示对应文案

javascript 复制代码 
// 获取当前星期数（0=周日，1=周一...6=周六）
let week = new Date().getDay();

switch(week) {
    case 0:
        alert("今天是周日，好好休息~");
        break;
    case 1:
        alert("今天是周一，开启新的一周！");
        break;
    case 2:
        alert("今天是周二，加油搬砖~");
        break;
    case 3:
        alert("今天是周三，周三过半啦！");
        break;
    case 4:
        alert("今天是周四，再坚持一天~");
        break;
    case 5:
        alert("今天是周五，准备迎接周末！");
        break;
    case 6:
        alert("今天是周六，放松一下~");
        break;
    default:
        alert("无效的星期数");
        break;
}

（注：若去掉某case后的break，比如去掉case 1的break，则周一匹配成功后，会继续执行case 2、case 3等后续代码）

四、循环语句

1.JS 循环语句：while 循环详解

1.1循环的基础认知

  • 作用 ：让指定代码重复执行
  • JS 中的循环类型：while 语句、do-while 语句、for 语句（本次聚焦 while 循环）

1.2while 循环的核心

  • 语法
javascript 复制代码 
while(条件表达式){
    循环体代码; // 条件为true时执行的代码
}
  • 执行流程

  1. 先判断条件表达式的结果；

  2. 若结果为true，执行循环体代码；

  3. 执行完循环体后，再次判断条件表达式；

  4. 重复步骤 2-3，直到条件表达式结果为false，循环结束。

  • 循环的三个关键要素（避免死循环）

编写 while 循环时，必须包含这 3 个要素：

  1. 初始化表达式 ：定义循环的起始变量（如let a = 0）；
  2. 条件表达式 ：设置循环运行的条件（如a < 5）；
  3. 更新表达式 ：修改初始化变量（如a++），让条件最终能变为false。

1.3while 循环的示例解析

示例 1：基础 while 循环（包含三要素）
javascript 复制代码 
// 1. 初始化表达式：定义起始变量a
let a = 0;

// 2. 条件表达式：循环运行的条件
while(a < 5){
    alert(a); // 循环体：输出当前a的值
    // 3. 更新表达式：修改a，让条件最终为false
    a++;
}
// 执行结果：依次弹出0、1、2、3、4（a=5时条件不满足，循环结束）
示例 2：死循环与 break 终止
  • 死循环 ：条件表达式恒为true的循环（会一直执行，需谨慎使用）
  • break：强制终止循环的关键字
javascript 复制代码 
let i = 0;
// 条件恒为true（死循环）
while(true){
    console.log(i);
    i++;
    // 当i>=5时，用break终止循环
    if(i >= 5){
        break;
    }
}
// 执行结果：控制台输出0、1、2、3、4（i=5时触发break，循环终止）
示例 3：实际场景（银行存款计算）

需求：年利率 5%，1000 元存多少年能变成 5000 元？

javascript 复制代码 
// 初始化：存款金额、年份计数器
let money = 1000;
let year = 0;

// 条件：存款<5000时继续循环
while(money < 5000){
    money *= 1.05; // 每年按5%计息
    year++; // 年份+1
}

console.log(`需要存${year}年，最终的钱数为${money.toFixed(2)}`);
// 执行结果：计算出达到5000元所需的年份和最终金额

2.JS 循环语句：do-while 循环详解

2.1do-while 循环核心语法

javascript 复制代码 
do {
    循环体语句;
} while (条件表达式);

2.2执行流程（核心区别于 while 循环）

  1. 第一步必执行循环体：不管条件表达式是否成立，先执行一次循环体内的代码（这是 do-while 最核心的特点）；

  2. 再判断条件 ：执行完一次循环体后，对while()中的条件表达式进行求值判断；

  3. 循环 / 终止：

    • 若条件为true，回到第一步再次执行循环体；

    • 若条件为false，直接终止整个 do-while 循环。

2.3核心特点总结

  • 「先执行，后判断」：循环体至少会执行一次（这是和 while 循环 "先判断、后执行" 最关键的区别）；

  • 适用场景：需要确保代码块至少运行一次的场景（比如用户输入验证、初始化操作等）。

2.4示例演示（对比 while 循环更易理解）

示例 1：do-while 循环（条件不满足仍执行一次）
javascript 复制代码 
let num = 5;
// do-while：先执行循环体，再判断条件
do {
    console.log("do-while执行了：" + num);
    num++;
} while (num < 5); // 条件：num < 5（初始num=5，条件不满足）

// 执行结果：输出 "do-while执行了：5"（循环体执行了1次）
示例 2：对比 while 循环（条件不满足则不执行）
javascript 复制代码 
let num = 5;
// while：先判断条件，不满足则直接终止
while (num < 5) {
    console.log("while执行了：" + num);
    num++;
}

// 执行结果：无输出（条件一开始就不满足，循环体一次都没执行）
示例 3：实际场景（用户输入验证，确保至少提示一次）
javascript 复制代码 
let input;
// 确保至少弹出一次输入框，直到用户输入有效数字
do {
    input = prompt("请输入一个大于0的数字：");
} while (isNaN(input) || Number(input) <= 0);

alert("你输入的有效数字是：" + input);

3.JS 循环：for 循环详解

3.1for 循环的基础认知

  1. 与 while 循环的关系

  • 功能上无本质区别：都是实现代码重复执行；

  • 语法上更清晰：把循环的「三要素」集中写在一处。

  1. 语法（包含循环三要素）
javascript 复制代码 
for(①初始化表达式; ②条件表达式; ④更新表达式){
    ③循环体语句; // 条件为true时执行
}

  1. 执行流程

  2. 执行①初始化表达式（仅执行 1 次，定义循环起始变量）；

  3. 判断②条件表达式：

    • 若为true，执行③循环体语句；

    • 若为false，循环终止；

  4. 执行④更新表达式（修改初始化变量）；

  5. 重复步骤 2-3，直到条件为false。

  6. 变量作用域

  • 用let在for()中声明的变量：是局部变量，仅能在 for 循环内访问；

  • 用var在for()中声明的变量：是全局变量，可在 for 循环外部访问。

3.2 for 循环案例：基础应用

案例 1：求 100 以内 3 的倍数（个数 + 总和）
javascript 复制代码 
let count = 0; // 记录3的倍数的个数
let result = 0; // 记录3的倍数的总和

// 遍历1-100的所有数
for(let i=1; i<=100; i++){
    if(i % 3 === 0){ // 判断是否是3的倍数
        count++;
        result += i;
    }
}

console.log(`3的倍数一共有${count}个，总和为${result}`);

也可以直接遍历 3 的倍数（更高效）：

javascript 复制代码 
for(let i=3; i<=100; i+=3){
    count++;
    result += i;
}
案例 2：判断水仙花数（100-1000 之间）

水仙花数：一个 3 位数，各位数字的立方和等于它本身（如153 = 1³ + 5³ + 3³）

javascript 复制代码 
for(let i=100; i<1000; i++){
    // 拆分出个位、十位、百位
    let strI = i + ""; // 转为字符串
    let bai = +strI[0]; // 百位
    let shi = +strI[1]; // 十位
    let ge = +strI[2]; // 个位
    
    // 判断是否是水仙花数
    if(bai**3 + shi**3 + ge**3 === i){
        console.log(i);
    }
}
案例 3：判断质数（素数）

质数：大于 1 的自然数，只能被 1 和自身整除

javascript 复制代码 
let num = +prompt("请输入一个大于1的整数");
let flag = true; // 标记是否是质数（默认是）

// 遍历2到num-1的数，判断是否能整除num
for(let i=2; i<num; i++){
    if(num % i === 0){
        flag = false; // 能整除，说明不是质数
        break; // 无需继续判断，终止循环
    }
}

// 输出结果
if(flag){
    alert(`${num}是质数`);
}else{
    alert(`${num}不是质数`);
}

3.3 for 循环的嵌套（循环里套循环）

核心规则

外层循环执行 1 次，内层循环会完整执行一轮（常用于打印图形）。

案例：打印图形（三角形、倒三角形）
打印正三角形（每行 * 数递增）
javascript 复制代码 
// 外层循环控制"行数"（5行）
for (let i = 0; i < 5; i++) {
    // 内层循环控制"每行的*数"（第i行有i+1个*）
    for (let j = 0; j < i + 1; j++) {
        document.write("*&nbsp;&nbsp;");
    }
    document.write("<br>"); // 换行
}
打印倒三角形（每行 * 数递减）
javascript 复制代码 
for (let i = 0; i < 5; i++) {
    // 第i行有5-i个*
    for (let j = 0; j < 5 - i; j++) {
        document.write("*&nbsp;&nbsp;");
    }
    document.write("<br>");
}

3.4 break 与 continue（循环控制）

  • break ：终止最近的循环 /switch，直接跳出；

  • continue ：跳过当前循环的剩余代码，直接进入下一轮循环。

3.5 for 循环的性能优化（以质数判断为例）

优化 1：遇到因数直接 break
javascript 复制代码 
for(let i=2; i<num; i++){
    if(num % i === 0){
        flag = false;
        break; // 终止内层循环，减少不必要的判断
    }
}
优化 2：循环范围缩小到√num

一个数的因数不会超过它的平方根，因此循环到√num即可：

javascript 复制代码 
for(let j=2; j <= Math.sqrt(i); j++){
    if(i % j === 0){
        flag = false;
        break;
    }
}

请多多支持我一下~~~谢谢 笔芯笔芯~~~~~

相关推荐
ghgxm5202 小时前
EXCEL使用VBA代码实现按条件查询数据库--简单实用
开发语言·数据仓库·笔记·excel·数据库开发
张人玉2 小时前
C# WPF 折线图制作笔记（LiveCharts 库）
笔记·c#·wpf·折线图·linechart
长安牧笛2 小时前
制作本地美食测评评分工具，输入美食名称，口味，价格，自动生成评分，帮助消费者选择美食。
javascript
Aftery的博客2 小时前
Uniapp-vue实现语言功能切换(多语言)
javascript·vue.js·uni-app
一字白首2 小时前
Vuex 进阶，模块化开发（Modules）：解决单状态树臃肿问题
前端·javascript·vue.js
喵了几个咪2 小时前
开箱即用的 GoWind Admin｜风行，企业级前后端一体中后台框架：用 JavaScript/Lua 解锁动态业务扩展能力
javascript·后端·微服务·golang·lua·admin
多看书少吃饭12 小时前
从Vue到Nuxt.js
前端·javascript·vue.js
前端一小卒12 小时前
从 v5 到 v6：这次 Ant Design 升级真的香
前端·javascript
前端不太难13 小时前
《Vue 项目路由 + Layout 的最佳实践》
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Labelme从安装到标注：零基础完整指南07CentOS的ISO镜像下载08BongoCat - 跨平台键盘猫动画工具09jdk21下载、安装（Windows、Linux、macOS）10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南