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. 运行结果

相关推荐
似水流年QC7 分钟前
前端国际化实战指南:i18n 工程化最佳实践总结
前端
GISer_Jing8 分钟前
企业级前端脚手架:原理与实战指南
前端·前端框架
非凡ghost13 分钟前
Floorp Browser(基于Firefox火狐浏览器)
前端·windows·学习·firefox·软件需求
hpz122315 分钟前
XHR和Fetch功能对比表格
前端·网络请求
我是小邵21 分钟前
【踩坑实录】一次 H5 页面在 PC 端的滚动条与轮播图修复全过程(Vue + Vant)
前端·javascript·vue.js
M1582276905522 分钟前
串口设备联网利器!SG-TCP232-110 单通道串口服务器,让老旧设备秒变智能终端
运维·服务器·单片机
semantist@语校23 分钟前
第五十八篇|从城市节律到制度密度:近畿日本语学院的数据建模与关西语校结构工程
大数据·服务器·数据库·人工智能·百度·ai·知识图谱
苹果电脑的鑫鑫26 分钟前
Css画圆弧的方法
前端·css
2501_9462309831 分钟前
Cordova&OpenHarmony外观主题设置
android·javascript
军军君0133 分钟前
Three.js基础功能学习一:环境资源及基础知识
开发语言·javascript·学习·3d·前端框架·threejs·三维