前言本文是JavaScript基础系列的第三篇深入讲解相等运算符含与的核心区别、三元运算符、运算符优先级、三种流程控制结构顺序、分支、循环以及continue和break的用法与区别。配合大量代码示例和课堂练习帮助你彻底掌握JS的逻辑控制能力。一、相等运算符1. 四种相等运算符运算符名称是否做类型转换说明相等✅值相等即可类型不同时会自动转换!不等✅值不相等返回true会做类型转换全等❌值和类型都必须相等!不全等❌值和类型必须不全等2.与的区别面试必考console.log(123 123); // true类型转换后相等 console.log(123 123); // false类型不同核心区别比较前会做隐式类型转换再判断值是否相等。不做类型转换值和类型必须完全一致。3. 特殊情况undefined null; // trueundefined衍生自null undefined null; // false类型不同 NaN NaN; // falseNaN不与任何值相等包括自身 null 0; // falsenull不会转成数字0判断NaN的方法使用isNaN()函数。isNaN(NaN); // true isNaN(123); // false二、三元运算符1. 语法结构条件表达式 ? 语句1 : 语句2;2. 执行流程先判断条件表达式如果为true执行语句1并返回结果如果为false执行语句2并返回结果如果条件表达式是非布尔值会自动转为布尔值再判断3. 应用示例求三个数中的最大值let a 10, b 20, c 15; let max a b ? (a c ? a : c) : (b c ? b : c); console.log(max); // 20三、运算符优先级基本原则优先级表不需要死记硬背使用小括号() 可以明确改变运算顺序小括号具有最高优先级示例var result 1 2 * 3; // 7乘法优先 result 1 || (2 3); // 1逻辑或短路 (a || b) (c - 10) * 10 / 2; // 使用括号明确优先级四、流程控制流程控制是用来控制代码按照什么结构顺序执行的机制主要有三种结构结构类型说明顺序结构代码按先后顺序依次执行分支结构根据条件选择执行不同的代码路径循环结构重复执行一段代码1. 顺序流程控制最简单的流程控制程序按照代码的先后顺序依次执行。代码块{}ES5中只有代码分组作用ES6中let和const在{}内定义的变量只在当前块级作用域有效五、分支流程控制1. if 语句let age prompt(请输入年龄); if (age 18) { alert(允许进入); alert(欢迎光临); }2. if...else 语句if (age 18) { alert(允许进入); } else { alert(回去好好学习); }3. if...else if...else 语句if (age 18) { alert(未成年); } else if (age 18 age 60) { alert(努力工作); } else { alert(可以退休); }注意else if理论上可以有多个但只有一个代码块会被执行。4. 三元表达式简化版if...elselet age prompt(请输入年龄); age 18 ? alert(欢迎光临) : alert(回家学习吧);5. switch 语句适用于特定值的多分支判断。switch (条件表达式) { case 表达式1: 执行语句; break; case 表达式2: 执行语句; break; default: 执行语句; }特殊写法多个case共用执行语句switch (num) { case 1: case 2: case 3: case 4: case 5: console.log(合法数字); break; default: console.log(非法数字); }6. switch 与 if 的区别对比项switchif...else适用场景特定值的判断枚举范围判断大于、小于等执行效率直接跳转到匹配的case效率高逐个条件判断分支越多越慢灵活性较低较高分支少时效率略低于if效率略高于switch六、for 循环语句1. 语法结构for (初始化表达式; 条件表达式; 更新表达式) { // 循环体 }初始化表达式声明计数器变量只执行一次条件表达式决定循环是否继续执行更新表达式每次循环结束后执行用于更新计数器2. 执行流程执行初始化表达式仅一次判断条件表达式如果为true执行循环体如果为false退出循环执行更新表达式重复步骤23. 应用实例1-100求和let sum 0; for (let i 1; i 100; i) { sum i; } console.log(总和:, sum); // 5050 console.log(平均值:, sum / 100); // 50.5奇偶数分别求和let oddSum 0, evenSum 0; for (let i 1; i 100; i) { if (i % 2 0) { evenSum i; } else { oddSum i; } } console.log(奇数之和:, oddSum); // 2500 console.log(偶数之和:, evenSum); // 2550能被3整除的数求和let sum 0; for (let i 1; i 100; i) { if (i % 3 0) { sum i; } } console.log(能被3整除的数之和:, sum); // 1683班级成绩统计let num prompt(请输入班级人数); let sum 0; for (let i 1; i num; i) { let score prompt(请第${i}个同学输入成绩); sum score; } console.log(总成绩:, sum); console.log(平均成绩:, sum / num);七、课堂练习1. 闰年判断let year prompt(请输入年份); let flag (year % 4 0 year % 100 ! 0) || (year % 400 0); if (flag) { alert(闰年); } else { alert(平年); }2. 分数奖励系统let score prompt(请输入成绩); if (score 90) { alert(奖励宝马); } else if (score 80) { alert(奖励100元); } else if (score 70) { alert(奖励书包); } else if (score 60) { alert(奖励练习册); } else { alert(奖励棍棒炒肉丝); }3. 星星打印let num prompt(输入小星星个数); for (let i 0; i num; i) { document.writeln(*br/); }八、continue 与 break 关键字1. continue —— 跳过当次循环for (let i 0; i 5; i) { if (i 2) { continue; // 跳过i2这次循环 } console.log(i); // 输出: 0, 1, 3, 4 }2. break —— 退出整个循环for (let i 0; i 5; i) { if (i 2) { break; // 循环到此结束 } console.log(i); // 输出: 0, 1 }3. break 指定结束外层循环可以使用标签名来标识循环break 标签名可以结束指定的循环。outer: for (let i 0; i 5; i) { console.log(外层循环 i); for (let j 0; j 5; j) { break outer; // 结束外层循环 console.log(内层循环 j); // 不会执行 } }4. continue 与 break 对比关键字作用影响范围continue跳过本次循环剩余代码进入下一次循环默认离它最近的循环break立即终止整个循环默认离它最近的循环可用标签指定总结本文系统梳理了JavaScript中关于运算符和流程控制的全部核心知识相等运算符牢记做类型转换、不做类型转换以及NaN的特殊性。三元运算符简洁的条件判断利器适合替代简单的if...else。流程控制三兄弟顺序、分支if/switch、循环for构成了程序逻辑的骨架。continue与break循环控制的两把钥匙配合标签可以精准控制多层循环。掌握这些内容你就可以写出具备完整逻辑判断能力的JavaScript程序了。
JS运算符（相等、三元、运算符优先级）与流程控制完全指南（附经典案例）
前言本文是JavaScript基础系列的第三篇深入讲解相等运算符含与的核心区别、三元运算符、运算符优先级、三种流程控制结构顺序、分支、循环以及continue和break的用法与区别。配合大量代码示例和课堂练习帮助你彻底掌握JS的逻辑控制能力。一、相等运算符1. 四种相等运算符运算符名称是否做类型转换说明相等✅值相等即可类型不同时会自动转换!不等✅值不相等返回true会做类型转换全等❌值和类型都必须相等!不全等❌值和类型必须不全等2.与的区别面试必考console.log(123 123); // true类型转换后相等 console.log(123 123); // false类型不同核心区别比较前会做隐式类型转换再判断值是否相等。不做类型转换值和类型必须完全一致。3. 特殊情况undefined null; // trueundefined衍生自null undefined null; // false类型不同 NaN NaN; // falseNaN不与任何值相等包括自身 null 0; // falsenull不会转成数字0判断NaN的方法使用isNaN()函数。isNaN(NaN); // true isNaN(123); // false二、三元运算符1. 语法结构条件表达式 ? 语句1 : 语句2;2. 执行流程先判断条件表达式如果为true执行语句1并返回结果如果为false执行语句2并返回结果如果条件表达式是非布尔值会自动转为布尔值再判断3. 应用示例求三个数中的最大值let a 10, b 20, c 15; let max a b ? (a c ? a : c) : (b c ? b : c); console.log(max); // 20三、运算符优先级基本原则优先级表不需要死记硬背使用小括号() 可以明确改变运算顺序小括号具有最高优先级示例var result 1 2 * 3; // 7乘法优先 result 1 || (2 3); // 1逻辑或短路 (a || b) (c - 10) * 10 / 2; // 使用括号明确优先级四、流程控制流程控制是用来控制代码按照什么结构顺序执行的机制主要有三种结构结构类型说明顺序结构代码按先后顺序依次执行分支结构根据条件选择执行不同的代码路径循环结构重复执行一段代码1. 顺序流程控制最简单的流程控制程序按照代码的先后顺序依次执行。代码块{}ES5中只有代码分组作用ES6中let和const在{}内定义的变量只在当前块级作用域有效五、分支流程控制1. if 语句let age prompt(请输入年龄); if (age 18) { alert(允许进入); alert(欢迎光临); }2. if...else 语句if (age 18) { alert(允许进入); } else { alert(回去好好学习); }3. if...else if...else 语句if (age 18) { alert(未成年); } else if (age 18 age 60) { alert(努力工作); } else { alert(可以退休); }注意else if理论上可以有多个但只有一个代码块会被执行。4. 三元表达式简化版if...elselet age prompt(请输入年龄); age 18 ? alert(欢迎光临) : alert(回家学习吧);5. switch 语句适用于特定值的多分支判断。switch (条件表达式) { case 表达式1: 执行语句; break; case 表达式2: 执行语句; break; default: 执行语句; }特殊写法多个case共用执行语句switch (num) { case 1: case 2: case 3: case 4: case 5: console.log(合法数字); break; default: console.log(非法数字); }6. switch 与 if 的区别对比项switchif...else适用场景特定值的判断枚举范围判断大于、小于等执行效率直接跳转到匹配的case效率高逐个条件判断分支越多越慢灵活性较低较高分支少时效率略低于if效率略高于switch六、for 循环语句1. 语法结构for (初始化表达式; 条件表达式; 更新表达式) { // 循环体 }初始化表达式声明计数器变量只执行一次条件表达式决定循环是否继续执行更新表达式每次循环结束后执行用于更新计数器2. 执行流程执行初始化表达式仅一次判断条件表达式如果为true执行循环体如果为false退出循环执行更新表达式重复步骤23. 应用实例1-100求和let sum 0; for (let i 1; i 100; i) { sum i; } console.log(总和:, sum); // 5050 console.log(平均值:, sum / 100); // 50.5奇偶数分别求和let oddSum 0, evenSum 0; for (let i 1; i 100; i) { if (i % 2 0) { evenSum i; } else { oddSum i; } } console.log(奇数之和:, oddSum); // 2500 console.log(偶数之和:, evenSum); // 2550能被3整除的数求和let sum 0; for (let i 1; i 100; i) { if (i % 3 0) { sum i; } } console.log(能被3整除的数之和:, sum); // 1683班级成绩统计let num prompt(请输入班级人数); let sum 0; for (let i 1; i num; i) { let score prompt(请第${i}个同学输入成绩); sum score; } console.log(总成绩:, sum); console.log(平均成绩:, sum / num);七、课堂练习1. 闰年判断let year prompt(请输入年份); let flag (year % 4 0 year % 100 ! 0) || (year % 400 0); if (flag) { alert(闰年); } else { alert(平年); }2. 分数奖励系统let score prompt(请输入成绩); if (score 90) { alert(奖励宝马); } else if (score 80) { alert(奖励100元); } else if (score 70) { alert(奖励书包); } else if (score 60) { alert(奖励练习册); } else { alert(奖励棍棒炒肉丝); }3. 星星打印let num prompt(输入小星星个数); for (let i 0; i num; i) { document.writeln(*br/); }八、continue 与 break 关键字1. continue —— 跳过当次循环for (let i 0; i 5; i) { if (i 2) { continue; // 跳过i2这次循环 } console.log(i); // 输出: 0, 1, 3, 4 }2. break —— 退出整个循环for (let i 0; i 5; i) { if (i 2) { break; // 循环到此结束 } console.log(i); // 输出: 0, 1 }3. break 指定结束外层循环可以使用标签名来标识循环break 标签名可以结束指定的循环。outer: for (let i 0; i 5; i) { console.log(外层循环 i); for (let j 0; j 5; j) { break outer; // 结束外层循环 console.log(内层循环 j); // 不会执行 } }4. continue 与 break 对比关键字作用影响范围continue跳过本次循环剩余代码进入下一次循环默认离它最近的循环break立即终止整个循环默认离它最近的循环可用标签指定总结本文系统梳理了JavaScript中关于运算符和流程控制的全部核心知识相等运算符牢记做类型转换、不做类型转换以及NaN的特殊性。三元运算符简洁的条件判断利器适合替代简单的if...else。流程控制三兄弟顺序、分支if/switch、循环for构成了程序逻辑的骨架。continue与break循环控制的两把钥匙配合标签可以精准控制多层循环。掌握这些内容你就可以写出具备完整逻辑判断能力的JavaScript程序了。
