[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 < 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 >= 6`和`age >= 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 ...
~~~
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- 移动客户端开发
- uni-app基础
- 快速入门程序
- 单页程序
- 底部Tab导航
- Vue语法基础
- 模版语法
- 计算属性与侦听器
- Class与Style绑定
- 样式与布局
- Box模型
- Flex布局
- 内置指令
- 基本指令
- v-model与表单
- 条件渲染指令
- 列表渲染指令v-for
- 事件与自定义属性
- 生命周期
- 项目实践
- 学生实验
- 贝店商品列表
- 加载更多数据
- 详情页面
- 自定义组件
- 内置组件
- 表单组件
- 技术专题
- 状态管理vuex
- Flyio
- Mockjs
- SCSS
- 条件编译
- 常用功能实现
- 上拉加载更多数据
- 数据加载综合案例
- Teaset UI组件库
- Teaset设计
- Teaset使用基础
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代码模版
- 项目实践
- 标签组件
- 失物招领客户端原型
- 发布页面
- 检索页面
- 详情页面
- 服务端开发技术
- 服务端开发环境配置
- Koajs快速入门
- 快速入门
- 常用Koa中间件介绍
- 文件上传
- RestfulApi
- 一个复杂的RESTful例子
- 使用Mockjs生成模拟数据
- Thinkjs快速入门
- MVC模式
- Thinkjs介绍
- 快速入门
- RESTful服务
- RBAC案例
- 关联模型
- 应用开发框架
- 服务端开发
- PC端管理界面开发
- 移动端开发
- 项目实践
- 失物招领项目
- 移动客户端UI设计
- 服务端设计
- 数据库设计
- Event(事件)
- 客户端设计
- 事件列表页面
- 发布页面
- 事件详情页面
- API设计
- image
- event
- 微信公众号开发
- ui设计规范