【JS-3】——JavaScript流程控制语句

最新推荐文章于 2024-01-24 23:33:58 发布

阿牛大牛中

最新推荐文章于 2024-01-24 23:33:58 发布

阅读量263

点赞数

分类专栏： JavaScirpt

本文链接：https://blog.csdn.net/weixin_46351593/article/details/105857227

版权

JavaScirpt 专栏收录该内容

35 篇文章 8 订阅

订阅专栏

我们来说一下JavaScript的语句。

文章目录

- 流程控制语句
之前的

我们的程序是由一条一条语句构成的，语句是按照 自上向下的顺序一条一条执行的。

在JS中可以使用{}来为语句进行分组，同一个{}中的语句我们称为一组语句，他们要么都执行，要么都不执行，一个{}中的语句我们也称为一个代码块。
在代码块的后面就不用再编写分号了。
JS中的代码块，只具有分组的作用，没有其他的用途。代码块内的内容，在外面是完全可见的。

流程控制语句

在JS中程序时从上到下一行一行执行的，但如果只是简单的顺序执行，不够智能。

通过流程控制语句可以控制程序执行流程，使程序根据一定的条件进行执行。
语句的分类：
1. 条件判断语句
2. 条件分支语句
3. 循环语句

条件判断语句

使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则不执行。

语法一：

if (condition){
      当条件为 true 时执行的代码
}

if语句在执行时，会先对condition进行求值判断，如果condition的值为true则执行if语句，如果为false则不执行。

语法二：

if (condition){
    当条件为 true 时执行的代码
}else{
    当条件不为 true 时执行的代码
}

else语句尽在if或else/if语句的条件表达式为false时才执行。如果condition为true执行if中的语句，condition为false则执行else中的语句。

语法三：

if (condition1){
    当条件 1 为 true 时执行的代码
}else if (condition2){
    当条件 2 为 true 时执行的代码
}else{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

该语句执行时，会从还是那个倒下一次对condition进行判断，如果为true则执行当前语句，如果为false则继续向下判断。如果所有的条件都不满足，则执行最后的else。

实例：

<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time<10){
document.write("<b>早上好</b>");
}else if (time>=10 && time<20){
document.write("<b>今天好</b>");
}else{
document.write("<b>晚上好!</b>");
}
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UsdPLjPC-1588215852798)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-3】/1.jpg)]

做一个练习：输入小明成绩，如果小明的期末考试成绩等于100分，奖励一辆BMW，如果大于等于80，奖励一部iphone15s，如果大于等于60，奖励一部参考书，否则一顿胖揍！

因为要输入小明的成绩所以需要prompt();函数。

prompt()可以弹出一个提示框，该提示框中会带有一个文本框，用户可以在文本框中输入一段内容，该函数需要一个字符串作为参考，该字符串将会最为提示框的提示文字，用户输入的内容将会作为函数的返回值（String类型）返回，可以定义一个变量来接收该内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var score = prompt("请输入小明的成绩：");			
			if(score==100){
				alert("送你一辆宝马");
			}else if(score >= 80){
				alert("送你一部iphone15s");
			}else if(score >= 60){
				alert("给你本书看看");
			}else{
				alert("给你来顿胖揍！！");
			}
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

但是我们说上面的代码逻辑不够严谨，如果小明的成绩输入为“abc”或“999”或“-10”这些不合法的，应该拉出去枪毙才对，所以我们完善一下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title></title>
		<script type="text/javascript">
			var score = prompt("请输入小明的成绩(0-100)：");
			//判断是否合法
			if(score < 0 || score >100 || isNaN(score)){
				alert("拉出去毙了");
			}else{
				//判断给什么奖励
				if(score==100){
				alert("送你一辆宝马");
				}else if(score >= 80){
					alert("送你一部iphone15s");
				}else if(score >= 60){
					alert("给你本书看看");
				}else{
					alert("给你来顿胖揍！！");
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

条件分支语句

条件分支语句也叫switch语句。

语法：

switch(n){
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

工作原理：

首先设置条件表达式 n（通常是一个变量）。
随后表达式的值会与结构中的每个 case 的值依次进行全等比较。
如果存在匹配，则从当前case处开始执行代码。
请使用 break 来阻止代码自动地向下一个 case 运行。

实例：

显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>点击下面的按钮来显示今天是周几：</p>
		<button onclick="myFunction()">点击这里</button>
		<p id="demo"></p>
		<script>
		function myFunction(){
			var x;
			var d=new Date().getDay();
			switch (d){
		  		case 0:
          	x="今天是星期日";
		    		break;
		 			case 1:
          	x="今天是星期一";
		        break;
		  		case 2:
          	x="今天是星期二";
		        break;
		      case 3:
         	  x="今天是星期三";
		   	 		break;
		  		case 4:
          	x="今天是星期四";
		    		break;
		  		case 5:
          	x="今天是星期五";
		        break;
		  		case 6:
          	x="今天是星期六";
		    		break;
		 	}
			document.getElementById("demo").innerHTML=x;
		}
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ACl20mtx-1588215852814)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-3】/6.gif)]

default关键字：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>点击下面的按钮来显示今天是周几：</p>
		<button onclick="myFunction()">点击这里</button>
		<p id="demo"></p>
		<script>
		function myFunction(){
			var x;
			var d=new Date().getDay();
			switch (d){
        case 6:
        x="今天是星期六";
        break;
        case 0:
        x="今天是星期日";
        break;
        default:
        x="期待周末";
		 		}
			document.getElementById("demo").innerHTML=x;
		}
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gxyanB9u-1588215852816)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-3】/7.gif)]

如果switch中所有的比较结果都是false，则会指定default后的语句。

switch语句与if语句可以实现witch的功能，switch专门用来设计多分支条件结构，与else/if相比，结构更简洁，执行效率更高。

循环语句

通过循环语句可以反复执行语段代码多次。

while循环，while 循环会在指定条件为真时循环执行代码块。

语法：

while (条件表达式){
    需要执行的代码
}

while语句在执行时，先对条件表达式进行判断，如果为true，则在执行循环体，循环执行完毕后，继续对表达式进行判断，以此类推，如果值为false，则会终止循环。

do/while 循环，do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法：

do{
    需要执行的代码
}while (条件);

for循环

语法：

for (语句 1; 语句 2; 语句 3){
    被执行的代码块
}

语句 1 （初始化表达式）：（代码块）开始前执行。通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。语句 1 是可选的，也就是说不使用语句 1 也可以。您可以在语句 1 中初始化任意（或者多个）值。

语句 2 （条件表达式）：定义运行循环（代码块）的条件。通常语句 2 用于评估初始变量的条件。语句 2 同样是可选的。如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

语句 3（更新表达式）：在循环（代码块）已被执行之后执行。通常语句 3 会增加初始变量的值。语句 3 也是可选的。语句 3 有多种用法。增量可以是负数 (i–)，或者更大 (i=i+15)。语句 3 也可以省略（比如当循环内部有相应的代码时）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>点击按钮循环代码5次。</p>
		<button onclick="myFunction()">点击这里</button>
		<p id="demo"></p>
		<script>
			function myFunction(){
				var x="";
				for (var i=0;i<5;i++){
				x=x + "该数字为 " + i + "<br>";
				}
			document.getElementById("demo").innerHTML=x;
			}
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GihlrGWd-1588215852818)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-3】/8.gif)]

break和continue

lable语句：可以为循环语句传建一个lable，来识别当前循环。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wisxy8TD-1588215852820)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-3】/9.jpg)]

break语句： break关键字可以用来退出switch或循环语句。break关键字会立即终止离它最近的循环语句。

continue语句：contimue语句用在循环机构中，用于跳过本次循环中剩余的代码，并在表达的值为真时，继续执行下一次循环。

之前的

【JS-1】—— JavaScript基础与基本语法
 【JS-2】—— JavaScript运算符与表达式

阿牛大牛中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JS-3】——JavaScript流程控制语句

我们来说一下JavaScript的语句。文章目录流程控制语句条件判断语句条件分支语句循环语句之前的我们的程序是由一条一条语句构成的，语句是按照自上向下的顺序一条一条执行的。在JS中可以使用{}来为语句进行分组，同一个{}中的语句我们称为一组语句，他们要么都执行，要么都不执行，一个{}中的语句我们也称为一个代码块。在代码块的后面就不用再编写分号了。JS中的代码块，只具有分组的作用，没有其...
复制链接

扫一扫