🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] JavaScript使用`if () { ... } else { ... }`来进行条件判断。 # if语句 ![](https://box.kancloud.cn/600a74f1b92db5f462d60e52cfb4cd73_247x284.png) 语法: ~~~javascript if(/* 条件表达式 */){ // 执行语句 } ~~~ ~~~ if(/* 条件表达式 */){ // 成立执行语句 }else{ // 否则执行语句 } ~~~ 多条件选择 ~~~ if(/* 条件表达式1 */){ // 成立执行语句 }else if(/* 条件表达式2 */){ // 成立执行语句 }else if(/* 条件表达式3 */){ // 成立执行语句 }else{ // 否则执行语句 } ~~~ 例如,根据年龄显示不同内容,可以用`if`语句实现如下: ~~~ var age = 20; if (age >= 18) { // 如果age >= 18为true,则执行if语句块 alert('adult'); } else { // 否则执行else语句块 alert('teenager'); } ~~~ 其中`else`语句是可选的。如果语句块只包含一条语句,那么可以省略`{}`: ~~~ var age = 20; if (age >= 18) alert('adult'); else alert('teenager'); ~~~ 省略`{}`的危险之处在于,如果后来想添加一些语句,却忘了写`{}`,就改变了`if...else...`的语义,例如: ~~~ var age = 20; if (age >= 18) alert('adult'); else console.log('age < 18'); // 添加一行日志 alert('teenager'); // <- 这行语句已经不在else的控制范围了 ~~~ 上述代码的`else`子句实际上只负责执行`console.log('age &lt; 18');`,原有的`alert('teenager');`已经不属于`if...else...`的控制范围了,它每次都会执行。 相反地,有`{}`的语句就不会出错: ~~~ var age = 20; if (age >= 18) { alert('adult'); } else { console.log('age < 18'); alert('teenager'); } ~~~ 这就是为什么我们建议永远都要写上`{}`。 ## 多行条件判断 如果还要更细致地判断条件,可以使用多个`if...else...`的组合: ~~~ var age = 3; if (age >= 18) { alert('adult'); } else if (age >= 6) { alert('teenager'); } else { alert('kid'); } ~~~ 上述多个`if...else...`的组合实际上相当于两层`if...else...`: ~~~ var age = 3; if (age >= 18) { alert('adult'); } else { if (age >= 6) { alert('teenager'); } else { alert('kid'); } } ~~~ 但是我们通常把`else if`连写在一起,来增加可读性。这里的`else`略掉了`{}`是没有问题的,因为它只包含一个`if`语句。注意最后一个单独的`else`不要略掉`{}`。 *请注意*,`if...else...`语句的执行特点是二选一,在多个`if...else...`语句中,如果某个条件成立,则后续就不再继续判断了。 试解释为什么下面的代码显示的是`teenager`: ~~~ 'use strict'; var age = 20; if (age >= 6) { alert('teenager'); } else if (age >= 18) { alert('adult'); } else { alert('kid'); } ~~~ 由于`age`的值为`20`,它实际上同时满足条件`age &gt;= 6`和`age &gt;= 18`,这说明条件判断的顺序非常重要。请修复后让其显示`adult`。 如果`if`的条件判断语句结果不是`true`或`false`怎么办?例如: ~~~ var s = '123'; if (s.length) { // 条件计算结果为3 // } ~~~ > JavaScript把`null`、`undefined`、`0`、`NaN`和空字符串`''`视为`false`,其他值一概视为`true`,因此上述代码条件判断的结果是`true`。 ## 案例分析 1. 求两个数的最大数 ~~~js var num1 = 2; var num2 = 5; if(num1>num2){ console.log('较大数是:' + num1); } else{ console.log('较大数是:' + num2); } ~~~ 1. 判断一个数是奇数还是偶数 ~~~js var num = 10; if(num%2 === 0) { console.log('偶数'); } else{ console.log('奇数'); } ~~~ 1. 分数转换,把百分制转换成ABCDE A(90-100) B(80-90) C(70-80) D(60-70) E(<60) ~~~js var score = 80; if(score >= 90) { console.log('A'); } else if(score >= 80){//隐藏条件 后边的值都是<90 console.log('B'); } else if(score >= 70){ console.log('C'); } else if(score >= 60){ console.log('D'); } else { console.log('E'); } ~~~ # 三元运算符 > 分支结构的另类写法 > 带有 三个 操作数的运算符 > 表达式1? 表达式2 : 表达式3; > 表达式1: 布尔类型的表达式,它总会返回一个布尔类型的值 > 当表达式1成立 ,则返回表达式2的值,当表达式1不成立,则返回表达式3的值; > 是对 if else语法的一种简化 ~~~js var num1 = 3; var num2 = 6; // 表达式1 ? 表达式2 : 表达式3 console.log(num1>num2?num1:num2); var age = 17; console.log(age>=18 ? '成年' : '未成年'); ~~~ # switch语句 > 也常用语条件判断,用于多个分支。 > 只能做 值相等判断,而if可以做某个范围判断,在switch里面,使用的是严格模式,注意类型要一致 case满足条件的时候,如果没有break,会一直往下穿透,所以break不能忘。 ~~~js switch(expression){ case 常量1: 语句; break; case 常量2: 语句; break; case 常量3: 语句; break; ... case 常量n: 语句; break; default: 语句; } ~~~ ## 实例分析 getDay() 方法返回 0 至 6 之间的周名数字(weekday number)。 (Sunday=0, Monday=1, Tuesday=2 ..) 本例使用周名数字来计算周的名称: ~~~ switch (new Date().getDay()) { case 0: day = "星期天"; break; case 1: day = "星期一"; break; case 2: day = "星期二"; break; case 3: day = "星期三"; break; case 4: day = "星期四"; break; case 5: day = "星期五"; break; case 6: day = "星期六"; } ~~~ 结果将是: ~~~ 今天是星期一 ~~~ > 在实际的应用中,你还可以更加的简单,想想怎么操作更简单? # 练习 小明身高1.75,体重80.5kg。请根据BMI公式(体重除以身高的平方)帮小明计算他的BMI指数,并根据BMI指数: * 低于18.5:过轻 * 18.5-25:正常 * 25-28:过重 * 28-32:肥胖 * 高于32:严重肥胖 用`if...else...`判断并显示结果: ~~~ 'use strict'; var height = parseFloat(prompt('请输入身高(m):')); var weight = parseFloat(prompt('请输入体重(kg):')); var bmi = ???; if ... ~~~