JavaScript的流程语句

最新推荐文章于 2022-08-22 22:23:49 发布
最新推荐文章于 2022-08-22 22:23:49 发布
阅读量259 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： JavaScript流程语句
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43551373/article/details/84570289
版权

算术运算符小补充:

1.自增运算符:++

“++”是自增运算符，它指的是在原来值的基础上加1，i++表示“i=i+1”。该运算符有2种情况：（1）i++ :“i++”指的是在使用i之后，使i的值加1。

（2）++i :“++i”指的是在使用i之前，先使i的值加1。

案例 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			
			var a=2;
			var sum=0;
			a++: 表示的是a=a+1  先赋值后运算
			++a: 表示的是a=a+1  先运算后赋值
//			sum=a++ + ++a  结果为:  sum=?  a=?
//			a-->3 --->4
//			sum=2 + 4=6
			
			sum=++a + a++ + a++  + ++a
//			a=6-->7
//			sum=16-->16
//			a=3-->4-->5-->6
//			sum=3 + 3 + 4 + 6=16 

			var a1=2,b1=3;
			sum=a1++ - ++b1 + b1++ - ++a1;
//			a1=3-->4
//			b1=4-->5
//			sum=2 - 4 +  4 - 4 = -2 
		
		</script>
	</head>
	<body>
		
	</body>
</html>

2.自减运算符:--

“--”是自减运算符，它指的是在原来值的基础上减1，i-- 表示“i=i-1”。该运算符同样有2种情况：（1）i-- :“i--”指的是在使用i之后，使i的值减1。

（2）--i:“--i”指的是在使用i之前，先使i的值减1。

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">		
//			自减分为两种情况:
//			a-- : 表示先赋值后运算
//			--a : 表示先运算后赋值
			//sum=a++ + --b - --a  + a-- + b-- + ++b;
//			a=? 
//			b=? 
//			sum=? 
//			a=3 -->2 -->1
//			b=2 -->1-->2
//			sum=2 + 2 - 2 + 2 +  2 + 2=8

			alert(sum);
//			alert(a);
//			alert(b);
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

一.JavaScript流程语句
JavaScript对程序流程的控制跟其他编程语言是一样的，主要有3种：
（1）顺序结构
（2）选择结构
（3）循环结构
1. 顺序结构
顺序结构是JavaScript中最基本的结构，说白了就是按照从上到下、从左到右的顺序执行。

   

2. 选择结构
选择结构是按照给定的逻辑条件来决定执行的顺序，有单向选择、双向选择和多向选择之分，但是程序在执行过程中都只是执行其中的一条分支。

上图中的左边是“单向选择结构”，右边是“双向选择结构”

对于选择结构，我们至少要掌握一下几种方法，
（1）if语句;
（2）if……else语句;
（3）if……else if……语句;
（4）if语句的嵌套;
（5）switch语句;

(1) 单向选择语句结构

if(条件){语句体}

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
//			单向选择语句结构:
//			if(条件){语句体}
			if(true){  //判断条件为真,执行花括号中语句
//				alert('条件为真');
			}
//			if(false){  //条件为假时,执行if之后的程序
//				alert('条件为假');
//			}
//			document.write('条件为假时,执行if之后的程序');
			
//			第二种写法: 前提条件,语句体重是单一的.
//			if(3>0)
//			document.write('条件为真');
//			document.write('条件为假');
//			注: 根据语法规则 添加花括号是必须的

//			if(0>3){ 
//				document.write('条件为真');
//			}
//			document.write('条件为假');
			
//			var a=3,b=5;
//			if(a<10 && b>6){
//				document.write('条件为真');
//			}
//			
//			if(a<10 || b>6){  //一真 一假  为真
//				document.write('条件为真');
//			}
			
			
		</script>
	</head>
	<body>
	</body>
</html>

(2)双向选择语句结构

if(条件){执行体}else{执行体}

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
//			if(true){
//				document.write('tiaojian为真');
//			}else{
//				document.write('条件为假');
//			}

			var num1=5,num2=4;
			if(num1*num2>20){
				document.write('条件成立');
			}else{
				document.write('条件不成立');
			}
			var a=4; var b=2;
			if(a!=b){  //条件结果为true
				document.write('a不等于b');
			}else{
				document.write('等于');
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

(3)多向选择语句结构
            if(条件1){
                语句1
            }else if(条件2){
                语句2
            }else if(条件3){
                语句3

            }else{           

               当以上条件都不满足时,则执行的语句体
           }

注:if..else if    如果前一个条件为真时,后面的将不会再执行

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
//			var strCore=prompt('请输入成绩:',0);
			alert(typeof strCore);
//			if(strCore>60 && strCore<=80){
//				document.write('及格');
//			}else if(strCore>80 && strCore<=90){
//				document.write('还不错哦');
//			}else if(strCore>90 && strCore<=100){
//				document.write('你棒棒滴');
//			}else{
//				document.write('你考的成绩不在范围内');
//			}
			
			//根据用户输入的成绩的等级A,B,C,D来查询成绩等级所属的范围
			var mess=prompt('请输入成绩等级','A');
			if(mess=='A'){  //判断两个值是否相等
				document.write('90-100之间');
			}else if(mess=='B'){
				document.write('60-90之间');
			}else{
				document.write('没有你输入的等级');
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

(4)选择语句嵌套

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript">
           var maths=29; var chinese=99;
           if(maths>60){  //条件不成立,不会执行语句体
//				if(chinese<100){
//					document.write('还可以');
//				}
//			}
           if(maths<60){
           	 if(chinese>100){
           	 	document.write('条件为真');
           	 }
           	 document.write('条件为假');
           }
          if(maths<60){
          	 if(chinese<100){
           	 	document.write('条件为真');
           	 }
          	document.write('条件为假')
          }
        	
		</script>
		</script>
	</head>
	<body>
	</body>
</html>

 

案例:24小时制,但是在中午14点的时候,告诉用户是下午一点.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var time=new Date();
			var hours=time.getHours();
//			alert(time);
            if(hours>6 && hours<=12){
            	document.write('您好,现在是'+hours+'点了');
            }else if(hours>12 && hours<18){
            	document.write('您好,'+(hours-12)+'点了');
            }else if(hours>=18 && hours<24){
            	document.write('您好,现在是'+(hours-12)+'点了');
            }		
		</script>
		</script>
	</head>
	<body>
	</body>
</html>

(5)switch语句结构

switch(值){
                case:
                break;    //当条件满足时,添加break退出整个选择语句,不会在执行之后的程序
                default:    // 当以上条件都不满足时,执行的语句体;可有可无,但是写它是规范.
                break;
            }

案例1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
    		var num1=0;
			switch (num1){
				case 60:
					document.write('成绩为60分');
    				break;  
				case 70:
					document.write('成绩为70分');
					break;
				case 80:
					document.write('成绩为80分');
    				break;
				default:   
					document.write('成绩不在范围内');
					break;
			}		
		</script>
	</head>
	<body>
	</body>
</html>

案例2:

            var num1=73;
			switch (num1>0){
				case num1>60 && num1<=70:
					document.write('成绩优异');
					break; 
				case num1>70 && num1<=80:
					document.write('成绩良好');
					break;
				case 80:
					document.write('成绩为80分');
					break;
				default:  
					document.write('成绩不在范围内');
					break;
			}

3.循环结构
循环结构即根据代码的逻辑条件来判断是否重复执行某一段程序。若逻辑条件为true，则进入循环重复执行；若逻辑条件为false，则退出循环。

循环结构语句主要包括3种：
（1）while语句；
（2）do……while语句；
（3）for语句；

a. while语句
while语句是条件判断语句，也是循环语句。

while (逻辑条件){   //小括号中写逻辑条件,这个条件作为最终退出循环的条件
             循环体
         }

案例1:输出5~10之间的数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">			
			var num1=5;		
			while(num1<10){  //判断条件为真, 开始执行循环体
				num1++;  //num1=num1+1
				if(num1==10){
					break;  
				}
				document.write(num1);
			}
		</script>
		</script>
	</head>
	<body>
	</body>
</html>

案例2:输出1-100之间的偶数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript">
			var num2=0;
			while (num2<=100){
				num2++;
//				第一种方式输出1-100之间的偶数
//				num2+=2;
//				document.write(num2+'<br />');
//				第二种方式输出1-100之间的偶数
				if(num2%2==0){
					document.write(num2+'<br />');
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

使用while语句要注意以下几点：
（1）应该使用大括号“{}”包含多条语句，即使是一条语句也最好使用大括号；
（2）在循环体中应该包含使得循环可以退出的语句，比如上面的“num++”。对于循环体，要是没有条件，循环就会无休止地运作下去，变成一个“死循环”，从而可能导致浏览器崩溃；

b. do…while语句
“do…while语句”跟while语句是非常类似的，唯一的区别在于：while语句先判断是否符合条件，然后再执行循环体语句；do…while语句先执行循环体语句一次，然后再判断是否符合条件

结构:do{
              循环体
           }while(最终退出循环的条件)
            
        注;  对于do....while循环,首先程序执行的是循环体中代码块,其次才判断 while的条件,do...while: 条件不成立时,都会执行一次循环体,

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var num1=5;
			do{
				num1++;
				if(num1==10){
					break;
				}
				document.write(num1);
			}while(num1>10) 
		</script>
	</head>
	<body>
	</body>
</html>

 

 

 

森屿海岛
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中的流程语句详解
weixin_47703646的博客
07-09 501
流程语句概述 其大致内容包括如下： 流程控制语句在JS中是至关重要的。JS中的流程控制语句包括if条件判断语句、for循环语句、while循环语句、do……while循环语句、break语句、continue语句和switch语句等语句。 一、if语句 if语句是用来判定所给定的条件是否满足， 根据判定的结果（真或假）决定执行给出 的两种操作之一。 var a=5; //声明变量a，并赋值为5. var b; //声明变量b。 if(a==b){...
JavaScript流程语句
weixin_47257428的博客
04-23 119
知识点罗列： ①条件语句： If条件语句主要用于告知程序当某个条件成立时，须执行满足该条件的相关语句。If条件语句可以简单分为if条件语句。If…else 语句if…else if多分支语句。 1.if…else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码 语法： if(条件){ 条件成立时执行的代码 } else{ 条件不成立时执行的代码 } 2. 多重判断（if…els...
JavaScript流程控制语句
奔腾游子
05-13 644
JavaScript流程控制语句 4.1、语句的定义 ​ 在ECMAScript 中，所有的代码都是由语句来构成的。一行代码就是一条简单语句。形式上可以是单行语句，或者由一对大括号“｛｝”括起来的复合语句，复合语句包含若干条简单语句，它可以作为一个单行语句处理。复合语句也称为语句块。 ​ 单行语句:一行代码简单语句 ​ 复合语句:由一对大括号“｛｝”括起来的若干条简单语句,也叫语句块 4.2、流程控制语句分类 ​ 任何复杂的程序逻辑都可以通过”顺序”、”条件(分支)
js之Javascript的流程语句
qq_41547728的博客
12-01 128
顺序结构 选择结构 循环结构
【详解JavaScript系列】JavaScript之流程语句
weixin_30911451的博客
10-12 84
一 开篇概述 本讲主要讲解JavaScript流程语句，其大致内容包括如下： 其中，常用的if,while,do..while,for在本片文章就不论述，重点论述for..in..,label,break和continue,whth，switch等语句 二 内容区 （一）常用语句 由于如下语句比较通用，本篇文章就不再论述 1.条件语句 if 2.循环语句 while,...
javascript流程语句
06-17
javascript流程语句所有精华 集于一图 一目了然 形象易懂 十分中肯 绝对干货！
JavaScript流程语句--基础版
03-22
JavaScript基础DOM操作 思维导图; 可以用MindManager 、XMind 、百度脑图打开；在这个的基础上面添加自己的理解，整理成自己的个人知识体系
JavaScript流程控制语句（ppt）
05-31
JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句...
javascript流程控制语句集合
10-19
JavaScript中的流程控制语句是编写复杂逻辑和控制程序执行顺序的关键元素。在这篇文章中，我们将深入探讨其中的几种主要语句：if条件判断语句、if...else语句、if...else if语句、if语句的嵌套使用、switch语句、do....
03JavaScript流程控制语句.docx
04-22
以下是对JavaScript流程控制语句的详细说明： 1. 顺序结构：这是最基础的代码执行方式，代码按照编写时的顺序逐行执行，没有特殊的控制结构。例如： ```javascript console.log("Hello"); // 输出 "Hello" console....
javaweb程序教学任务设计教程ppt
11-12
javaweb程序教学任务设计教程ppt第1章网页开发基础 习题 一、填空题 1.在CSS中，用于设置行间距的属性是【 】。 2.在CSS中，用于定义字体风格，如设置斜体、倾斜或正常字体的属性是【 】。 3.内嵌式是将CSS代码集中写在HTML文档的【 】标记中，并且用【 】标记定义。 4.<input />标记有多个属性，其中【 】属性为其最基本的属性，用于指定不同的控件类型。 5.【 】是一个表示和处理文档的应用程序接口（API），可用于动态访问、更新文档的内容、结构和样式。 二、判断题 1.在JavaScript中，运算符i++表示在使用i之前，使i的值加1；而++i表示在使用i之后，使i的值加1。（ ） 2.font-variant属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。（ ） 3.CSS基础选择器只有三种，分别是标记选择器、类选择器、id选择器。（ ） 4.JavaScript不需要区分字母大小写。（ ） 5.在DOM文档的树形结构中，每个节点有且只有一个子节点。（ ） 三、选择题 1.下列选项中，JavaScript运算符的优先级最高的是（
javascript中a++和++a区别
程序员超超的博客
08-22 1112
1. 后缀自增法(a++): 先进行表达式运算，再进行自增运算。 2. 前缀自增法(++a): 先进行自增运算，再进行表达式运算。
JavaScript基础 ----- a++ 和 ++a 的区别
Lazy_Life的博客
07-27 6247
1.a++ 和 ++a 的区别： （1）a++ ：存储新值，用旧值（上一个值）来计算，也就是输出旧值； （2）++a ：存储新值，用新值（当前的值）来计算，也就是输出新值； 2.实例： （1） var a = 0; console.log(a++) //输出0 // 1 存储新值 // 0 用旧值计算（输出） （...
js 中a++ ,和++a的区别以及理解使用
qq_36605711的博客
03-25 8449
1.先说一下 原理吧 ,a++是表示先把值赋给其他为数字类型的变量，自己在+1。而++a 是自己先+1， 再把值赋给数字类型的变量；其实原理还是运算符的优先级不同 2 举个列子说明一下比如一以下代码。 var a=1; var b=a++;//此时输出结果b为1，a为2 3。对以上的代码我是这样理解的 可以写成 var b; b=a++//因为等于的运算符优先级大于a++这种形式...
JavaScript中a++和a--的区别和注意点
thissamba的博客
01-11 1475
JavaScript，自增
JavaScript a++和++a的区别
找个地方记录踩坑
11-08 1282
a++ 是a在调用时还是原值，a调用之后才把a的值加上1 ++a 是a在调用之前就先加上1，调用a时其值是a+1 a++ ++a
B/S系统期末复习宝典——选择填空判断部分（一)
＃两个西柚
01-09 4501
第1章 网页开发基础 习题 一、 填空题 在CSS中，用于设置行间距的属性是【 】。 在CSS中，用于定义字体风格，如设置斜体、倾斜或正常字体的属性是【 】。 内嵌式是将CSS代码集中写在HTML文档的【 】标记中，并且用【 】标记定义。 <input />标记有多个属性，其中【 】属性为其最基本的属性，用于指定不同的控件类型。 【 】是一个表示和处理文档的应用程序接口（API），可用于动态访问、更新文档的内容、结构和样式。 二、 判
JS中运算符i++与++i的详细分析
进无止进
12-01 9313
新手朋友容易混淆的概念，特提出自己的想法思路，仅供参考，错误之处，还望指出。
i++和++i区别不止：i++表示先赋值后加1，++i表示先加1再赋值 这些哦
qq_30791759的博客
06-17 4794
package com.test; public class AutoIncrement { public static void main(String[] args) { int c = 0; for(int i=0;i&lt;10;i++){ c = c++; } System.out.prin...
深入解析JavaScript流程控制语句及其应用实例
在深入学习JavaScript编程的过程中，理解并掌握流程控制语句是至关重要的。本文主要介绍了三种基本的流程控制语句：if语句、if...else语句以及if...else嵌套语句。 1. **if语句**：这是JavaScript中最基础的条件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值