每天3小时学前端之JS-第9天-条件语句-if语句流程控制1 流程控制分类顺序执行(顺序结构) 条件执行(分支结构)

此系列体验视频教程

流程控制1

流程控制分类

顺序执行(顺序结构)

flowchart TD
A[吃饭] --> B[敲代码]; 
B[敲代码] -->C[听歌]; 
C[听歌] -->D[睡觉];

条件执行(分支结构)

flowchart TD
A[今天天气] --> B{怎么样?}; 
B -->|晴朗| C[去打球]; 
B -->|下雨天| D[在家敲代码];

循环执行(循环结构)

flowchart TD
A[吃饭] --> B[敲代码]; 
B[敲代码] --> B[敲代码]; 
B[敲代码] --> B[敲代码]; 
B[敲代码] --> B[敲代码]; 
B[敲代码] --> B[敲代码]; 
B[敲代码] --> C[睡觉];

条件语句

if

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。

if (布尔值) {
  语句;
}

避免赋值运算符

注意，if后面的表达式之中，不要混淆赋值表达式（=）、全等运算符（===）和相等运算符（==）。因为赋值表达式不具有比较作用。

var x = 1;
var y = 2;
if (x = y) {
  console.log(x);
}
// "2"
// 程序正常执行，不会报错，错误不易被发现

为了避免以上这种情况，有些开发者习惯将常量写在运算符的左边，这样的话，一旦不小心将相等运算符写成赋值运算符，就会报错，因为常量不能被赋值。

if (x = 2) { // 不报错
if (2 = x) { // 报错

else

// if和else只能执行一个分支
/* if (!true) {
  console.log('满足条件');
} else {
  console.log('不满足条件');
}
console.log('下面的代码'); // 都会执行 */

/* var age = 21
if ( age >= 18) {
  console.log('成年了！');
} else {
  console.log('未成年！');
} */

var day = 5
if ( day == 6 || day == 7 ) {
  console.log('休息日');
} else {
  console.log('工作日');
}

else if

/* var age = -1
if ( age >= 18) {
  console.log('成年了');
} else if ( age < 18 && age >= 0) {
  console.log('未成年');
} else {
  console.log('不合法的年龄');
} */

var day = -9
if ( day == 6 || day == 7 ) {
  console.log('休息日');
} else if (day == 1 || day == 2 || day == 3 || day == 4 || day == 5 ) {
  console.log('工作日');
} else {
  console.log('不合法的日期');
}

if与三元运算符

var result;
var weather = 'sun'
/* if (weather == 'sun') {
  result = '可以出去玩！'
} else {
  result = '不可以出去玩'
} */
weather == 'rain' ? result = '可以出去玩！' : result = '不可以出去玩'
console.log(result);

条件语句的嵌套

var num = 9
if ( num % 2 == 0) {
  if ( num % 3 == 0) {
    console.log('既能被2整除，又能被3整除');
  } else {
    console.log('能被2整除，却不能被3整除');
  }
} else {
  if ( num % 3 == 0) {
    console.log('不能被2整除,却能被3整除');
  } else {
    console.log('不能被2整除,也不能被3整除');
  }
}

练习

分数评级通过提示框输入分数按分值分别打印：
等于100：打印完美
大于等于90，小于100：打印优秀
大于等于80，小于90：打印良好
大于等于70，小于80：打印一般
大于等于60，小于70：打印及格
大于等于0，小于60：打印不及格

容错机制：

大于100：打印分数不能大于100
小于0：分数不能为负数
无法转换为合法数字的要给予提示：无法转换为数字

var score = prompt('请输入分数！') // 输入的数据会被转换成字符串
score = Number(score)
if ( score == 100 ) {
  console.log('完美！');
} else if ( score >= 90 && score < 100) {
  console.log('优秀！');
} else if ( score >= 80 && score < 90) {
  console.log('良好！');
} else if ( score >= 70 && score < 80) {
  console.log('一般！');
} else if ( score >= 60 && score < 70) {
  console.log('及格！');
} else if ( score < 60 && score >= 0) {
  console.log('不及格！');
} else {
  if ( score > 100) {
    console.log('分数不能大于100');
  } else if ( score < 0) {
    console.log('分数不能为负数');
  } else {
    // 如果score不是数字则执行以下代码
    console.log('非数字');
  }
}