Java Script系列文章目录

【Java Script基础与提升】——数据类型模块_张小鱼༒的博客-CSDN博客

【Java Script基础与提升】——运算符_张小鱼༒的博客-CSDN博客

文章目录

Java Script系列文章目录

前言

一、Java Script流程控制概述

二、三种流程控制

1.顺序结构

2.分支结构

总结

前言

随着人工智能的不断发展，Java Script这门技术也越来越重要，很多人都开启了Java Script学习，本文就介绍了Java Script当中流程控制部分的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Java Script流程控制概述

流程控制是控制我们的代码按照什么结构顺序来执行的，它有三种主要结构：顺序结构、分支结构和循环结构。

二、三种流程控制

1.顺序结构

程序按照代码的先后顺序，依次执行

2.分支结构

A、if语句

if语句判断年龄的案例

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//流程控制分支//if 语句判断年龄var age=prompt('请输入你的年龄：');if(age>=18){alert('我想带你去网吧');}</script>
</head>
<body></body>
</html>

B、if-else语句

注意这个里面只执行if或者else里面的语句

案例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//流程控制分支//if 语句判断年龄var age=prompt('请输入你的年龄：');if(age>=18){alert('我想带你去网吧');}else{alert('我不能带你去网吧');}</script>
</head>
<body></body>
</html>

案例2：判断闰年与否

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//流程控制分支//if 语句判断年龄//判断闰年与否var year=prompt('请输入年份：');if(year%4==0&&year%100!=0 || year %400==0){alert('你输入的年份为闰年');}else{alert('你输入的为平年');}</script>
</head>
<body></body>
</html>

C、if-else if多分支语句：

注意：

多分支还是多选一，最后只有一个执行。

else if 理论上可以任意多个，并且中间有空格。

判读成绩等级的案例

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//流程控制分支//判断成绩等级的案例var grade=prompt('请输入你的成绩：');if(grade>=90){alert('你的成绩等级为：A');}else if(grade>=80){alert('你的成绩等级为：B');}else if(grade>=70){alert('你的成绩等级为：C');}else if(grade>=60){alert('你的成绩等级为：D');}else{alert('你的成绩等级为：E');}</script>
</head>
<body></body>
</html>

D、三元表达式：

能做一些简单的条件选择，有三元运算符组成的式子为三元表达式。

条件表达式？表达式1：表达式2

如果条件表达式为真，则输出表达式1，否则输出表达式2

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//流程控制分支//三元表达式var num=10;var result=num>5?'是的':'不是的';console.log(result);</script>
</head>
<body></body>
</html>

数字补0案例：

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//流程控制分支//数字补0案例var time=prompt('请输入一个0~59之间的数字：');var result=time<10 ? '0'+time : time;alert(result);</script>
</head>
<body></body>
</html>

E、分支流程控制switch语句

针对于变量设置一系列的特定值的选项

语法结构：

switch(表达式){

case value1：执行语句1；break；

case value1：执行语句2；break；

case value1：执行语句3；break；

......

default:执行最后的语句；

}

执行原理：

利用表达式的值与case里面的value值做匹配，能匹配到执行里面的语句，未匹配的时候，执行最后default的语句。

开发时，里面常为变量；匹配时里面的数据类型必须相等；case里面如果没有break，会继续执行下一个case语句。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//流程控制分支//switch语句var num=3;switch(num){case 1:console.log(1);break;case 3:console.log(3);break;}</script>
</head>
<body></body>
</html>

查询水果价格的案例

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//流程控制分支//查询水果案例var fruit=prompt('请输入你要查询的水果');switch(fruit){case '苹果':alert('苹果的价格为3.5/斤');break;case '香蕉':alert('香蕉的价格为2.5/斤');break;case '榴莲':alert('榴莲的价格为35/斤');break;default:alert('没有此水果');}</script>
</head>
<body></body>
</html>