16 JS流程控制——选择结构

JavaScript三大流程控制结构：顺序结构、选择结构、循环结构。
自上而下执行代码的顺序就是顺序结构。
下面来看一下 JavaScript中的选择结构。

1、概念

选择结构语句需要根据给出的条件进行判断来决定执行对应的代码。

2、if单分支语句

if条件判断语句也被称为单分支语句，当满足某种条件时，就进行某种处理。

3、if…else双分支语句

if…else语句也称为双分支语句，当满足某种条件时，就进行某种处理，否则进行另一种处理。

页面弹出框输入半径r，判断r是否是正确的数字，如果是计算周长，面积。如果r输入错误，则校验不通过，给出提示。页面中展示r、周长、面积。

图1 输入圆的半径

图 展示圆的周长和面积

测试程序中有没有设置变量

//TEST 分支条件是否为undefined
//console.log(id);
if (typeof id != 'undefined') {
    console.log(`id是${id}`)
} else {
    console.log('没有设置id')
}

4、if…else if…else多分支语句

if…else if…else语句也称为多分支语句，可针对不同情况进行不同的处理。

“if…else if…else”语句在使用时，“else if”中间要有空格，否则程序会报语法错误。

定义一个变量表示“分数” 并给其赋值，在页面中是根据分数高低不同显示等级：优秀（>=90），良好（>=80），中等（>=70），及格（>=60），不及格（其他情况）。

5、switch多分支语句

switch语句也是多分支语句，功能与if系列条件语句相同，不同的是它只能针对某个表达式的值作出判断，从而决定执行哪一段代码。

特点：代码更加清晰简洁、便于阅读。

6、真假判断

• 真：除了假都是真
• 假： false 数字0 空字符串 null undefined NaN

7、三目运算符

id = '100'; //=== 值和类型都相同
console.log(id === 100 ? 'Correct' : 'Incorrect'); //Incorrect