js选择语句

文章目录

  • [1. if 分支语句](#1. if 分支语句)
    • [1.1. 示例代码](#1.1. 示例代码)
    • [1.2. 运行结果](#1.2. 运行结果)
  • [2. if 双分支语句](#2. if 双分支语句)
  • [3. if 多分支语句](#3. if 多分支语句)
  • [4. switch 语句(了解)](#4. switch 语句(了解))
    • [4.1. 注意](#4.1. 注意)
    • [4.2. case 穿透现象](#4.2. case 穿透现象)
    • [4.3. case 穿透产生的原因](#4.3. case 穿透产生的原因)
  • [5. switch 语句与选择语句区别别](#5. switch 语句与选择语句区别别)
    • [5.1. 语法上的区别](#5.1. 语法上的区别)
    • [5.2. 应用场景上的区别](#5.2. 应用场景上的区别)
  • [6. 三元表达式](#6. 三元表达式)
    • [6.1. 语法法](#6.1. 语法法)
    • [6.2. 示例代码](#6.2. 示例代码)
  • [7. 练习 1](#7. 练习 1)
    • [7.1. 题目](#7.1. 题目)
    • [7.2. 示例代码](#7.2. 示例代码)
    • [7.3. 运行结果](#7.3. 运行结果)
  • [8. 练习 2](#8. 练习 2)
    • [8.1. 题目](#8.1. 题目)
    • [8.2. 示例代码](#8.2. 示例代码)
    • [8.3. 运行结果](#8.3. 运行结果)
  • [9. 练习 3](#9. 练习 3)
    • [9.1. 题目](#9.1. 题目)
      • [9.1.1. 示例代码](#9.1.1. 示例代码)
  • [10. 练习 4](#10. 练习 4)
    • [10.1. 题目](#10.1. 题目)
    • [10.2. 代码实现 1](#10.2. 代码实现 1)
    • [10.3. 代码实现 2](#10.3. 代码实现 2)
    • [10.4. 运行结果](#10.4. 运行结果)

1. if 分支语句

语法:

js 复制代码
if (条件表达式) {
  // 满足条件要执行的语句
}

if 中的内容如果为true ,就执行大括号的代码块,如果为false 执行else代码块。

1.1. 示例代码

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js第二天</title>
  </head>
  <body>
    <script>
      // if分支语句
      const condition = 6 > 4;
      if (condition) {
        // 代码块1
        alert("yes");
      } else {
        // 代码块2
        alert("no");
      }
    </script>
  </body>
</html>

1.2. 运行结果

2. if 双分支语句

如果有两个条件的时候,可以使用 if else 双分支语句。

js 复制代码
if (条件表达式) {
  // 满足条件要执行的语句
} else {
  // 不满足条件要执行的语句
}

3. if 多分支语句

使用场景: 适合于有多个条件的时候。

语法:

js 复制代码
         if(条件表达式1){
         	语句体1
         }else if(条件表达式2){
         	语句体2
         }else if(条件表达式3){
         	语句体3
         }else if(条件表达式4){
         	语句体4
         }
         ...
         else{
         	语句体2
         }

从上往下,依次判断每一个条件,如果满足,就会执行对应的语句体,剩下的即使满足也不会执行。

4. switch 语句(了解)

switch case 传入一个变量,判断这个变量,是否符合case 中的条件,符合条件,就执行下面的代码块,每个代码块用break。如果都不满足,就执行 default 中的语句。

语法:

js 复制代码
switch语句用来定义多分支条件语句,语法如下:
	switch(表达式){
    case 值1:
      执行体1;
      break;

    case 值2:
      执行体2;
      break;
    ...
    default:
    	默认执行体;
      break; //default语句中break可有可无。
  }

4.1. 注意

  1. switch case一般需要配合break 关键字使用 没有break 会造成case穿透。
  2. 当前结果只有固定几个取值,可以使用 switch。
  3. if 多分支语句开发要比 switch 更重要,使用也更多。

4.2. case 穿透现象

case 穿透会从满足条件的那个语句开始,依次执行,即使后面的 case 不满足条件,也会执行,直到出现 break 才会跳出 switch 语句。

4.3. case 穿透产生的原因

如果忘记加 break,就会产生 case 的穿透(break 是可以用于结束 switch 语句)。

5. switch 语句与选择语句区别别

5.1. 语法上的区别

  1. ifif-else语句一次只能判断一个条件,而if-elseifswitch一次可以判断多个条件。

  2. if-elseifswitch的结构非常类似,所有的switch语句都可以使用if-elseif改写。

  3. 所有的if-elseif不一定能用switch改写。

5.2. 应用场景上的区别

if 语句主要用于范围的判断 ,switch 主要用于等值判断

如果结果确定有几个值,可以考虑使用 switch。

6. 三元表达式

6.1. 语法法

js 复制代码
条件 ? 表达式1 : 表达式2
// 执行过程:
// 1. 如果条件为真,则执行表达式1
// 2. 如果条件为假,则执行表达式2

6.2. 示例代码

js 复制代码
// 补0
// 1. 用户输入
let num = prompt("请您输入一个数字:");
// 2. 判断输出- 小于10才补0
// num = num < 10 ? 0 + num : num
num = num >= 10 ? num : 0 + num;
alert(num);

7. 练习 1

7.1. 题目

  1. 输入你用的手机

  2. 如果输入的是苹果,alert("土豪")

  3. 如果是华为,alert("遥遥领先!!!")

  4. 如果是小米,alert("性价比")

7.2. 示例代码

js 复制代码
const phone = prompt("请输入你的手机牌子:");
const resName = phone.slice(0, 2);
switch (resName) {
  case "苹果":
    alert("土豪");
    break;
  case "华为":
    alert("遥遥领先!!!");
    break;
  case "小米":
    alert("性价比");
    break;
  default:
    alert("不认识你的杂牌子手机");
    break;
}

7.3. 运行结果

8. 练习 2

8.1. 题目

请输入您的工作年限:

  1. 如果你的工作年限小于 1 年,你的年假是 5 天

  2. 如果你的工作年限小于 3 年,你的年假是 7 天

  3. 如果你的工作年限大于等于 3 年,你的年假是 15 天

8.2. 示例代码

javascript 复制代码
let workYears = prompt("请输入您的工作年限:");

// 你的年假,初始化为null
let hoilday = null;
if (workYears < 0) {
  hoilday = 0;
} else if (workYears < 1) {
  hoilday = 5;
} else if (workYears < 3) {
  hoilday = 7;
} else if (workYears >= 3) {
  hoilday = 15;
}
//弹出对话框
alert("你的年假是" + hoilday);

8.3. 运行结果

9. 练习 3

9.1. 题目

老爸根据成绩奖励儿子(成绩在 0-100 之间)

  1. 考了 90-100,奖励兰博基尼,带电池
  2. 考了 80-90,奖励自行车
  3. 考了 70-80,奖励滑板
  4. 70 分以下,奖励胖揍一顿

9.1.1. 示例代码

js 复制代码
//获取儿子分数
let score = prompt("请输入儿子的分数");

//判断
//需要一开始对成绩做一个范围的限定
if (score < 0 || score > 100) {
  alert("你输入的成绩不合法,请输入0-100的整数");
} else {
  if (score >= 90) {
    alert("奖励兰博基尼,带电池");
  } else if (score >= 80) {
    alert("奖励自行车");
  } else if (score >= 70) {
    alert("奖励滑板");
  } else {
    alert("奖励胖揍一顿");
  }
}

10. 练习 4

10.1. 题目

输入一个月份,判断月份属于哪个季节: 12,1,2 冬季 3,4,5 春季 6,7,8 夏季 9,10,11 秋季。

10.2. 代码实现 1

js 复制代码
//获取用户输入的月份
let month = prompt("请输入一个月份");

//判断
switch (
  Number(month) //需要做一个强转,转成数值类型
) {
  case 12:
  case 1:
  case 2:
    alert("冬季");
    break;
  case 3:
  case 4:
  case 5:
    alert("春季");
    break;
  case 6:
  case 7:
  case 8:
    alert("夏季");
    break;
  case 9:
  case 10:
  case 11:
    alert("秋季");
    break;

  default:
    alert("你输入的不是一个月份");
    break;
}

10.3. 代码实现 2

js 复制代码
//获取用户输入的月份
let month = prompt("请输入一个月份");

//判断
if (month == 12 || month == 1 || month == 2) {
  alert("冬季");
} else if (month == 3 || month == 4 || month == 5) {
  alert("春季");
} else if (month == 6 || month == 7 || month == 8) {
  alert("夏季");
} else if (month == 9 || month == 10 || month == 11) {
  alert("秋季");
} else {
  alert("你输入的不是一个月份");
}

10.4. 运行结果

相关推荐
sinat_3842410932 分钟前
使用 npm 安装 Electron 作为开发依赖
服务器
沉默璇年1 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder1 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727571 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
Kkooe2 小时前
GitLab|数据迁移
运维·服务器·git
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客2 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记2 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js