JavaScript程序的三大结构---顺序结构、分支结构与循环结构

最新推荐文章于 2023-07-01 17:46:52 发布

狂飙的肥兔

最新推荐文章于 2023-07-01 17:46:52 发布

阅读量1k

点赞数 5

分类专栏：学习笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43417844/article/details/121641882

版权

学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

程序的三大结构

程序的三大结构是顺序结构、循环结构、选择结构(分支结构)

顺序结构

JavaScript程序中，代码的执行顺序是从上到下的，代码会按照它们出现位置的先后顺序来执行操作，这种就是顺序结构。

var a = '泡泡哥好牛啊';
var b = '泡泡哥yyds';
a = '海王泡泡哥';
c = '泡泡哥要上天了'
console.log(a, b, c);

/*
	程序按照从上到下的顺序执行，所以最后会依次输出：
	海王泡泡哥 泡泡哥yyds 泡泡哥要上天了
*/

分支结构

js代码的执行顺序是从上到下的

而逻辑分支则是根据我们设定好的条件来决定要不要执行某些代码。

if 条件分支结构（重点）

if 语句

语法： if (条件) { 要执行的代码 }

使用 if 语句，通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行

// 条件为 true 的时候会执行 {} 里面的代码
if (true) {
  alert('因为条件是true，所以我会执行');
}

// 条件为 false 的时候不会执行 {} 里面的代码
if (false) {
	alert('因为条件是 false，所以我不会执行');    
}

if else 语句

语法： if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }

通过 if 的条件来决定执行哪一个 {} 里面的代码，并且两个 {} 内的代码一定有一个会执行

// 条件为true的时候，会执行代码：alert('true我会执行')
if (true) {
  alert('true我会执行')
} else {
  alert('true我不会执行')
}

// 条件为false的时候，会执行代码：alert('false我会执行')
if (false) {
  alert('false我不会执行')
} else {
  alert('false我会执行')
}

if else if … 语句

语法：if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }
可以通过 if 和 else if 来设置多个条件进行判断，程序会从头开始，依次判断条件：
- 如果第一个条件为 true 了，那么就会执行后面{} 里面的内容
- 如果第一个条件为 false，那么就会判断第二个条件，若第二个条件为 true ，执行；否则，判断第三个条件，依次类推
多个 {} ，只会有一个会被执行，一旦有一个条件为 true 了，后面的就不会在判断了

如果所有的表达式结果都是 false ，那么就没有执行内容

// 第一个条件为true，第二个条件为false，所以最终会打印 “我是代码段1”
if (true) {
  	alert('我是代码段1')
} else if (false) {
	alert('我是代码段2')           
}

// 第一个条件为true，第二个条件为true，最终会打印 “我是代码段1”
// 因为只要前面有一个条件满足了，那么就不会继续往下判断了
if (true) {
  	alert('我是代码段1')
} else if (true) {
  	alert('我是代码段2')
}

// 第一个条件为false，第二个条件为true，最终会打印 “我是代码段2”
// 只有前一个条件为 false 的时候才会继续向下判断
if (false) {
  	alert('我是代码段1')
} else if (true) {
  	alert('我是代码段2')
}

// 第一个条件为false，第二个条件为false，最终什么也不会发生
// 因为当所有条件都为false的时候，两个 {} 里面的代码都不会执行
if (false) {
  	alert('我是代码段1')
} else if (false) {
  	alert('我是代码段2')
}

if else if … else 语句

和之前的 if else if ... 语句基本一致，只不过是在所有条件都不满足的时候，执行最后的else 后面 {}里的代码。

// 第一个条件为 false，第二个条件为 false，最终会打印 “我是代码段3”
// 当前面所有的条件都不满足的时候，会执行else后面的 {} 里面的代码
// 若是前面有一个条件满足了，那么后面的就都不会执行了
if (false) {
  	alert('我是代码段1')
} else if (false) {
  	alert('我是代码段2')
} else {
  	alert('我是代码段3')
}

switch 条件分支结构（重点）

switch语句

也是条件判断语句的一种，是对于某一个变量的判断

语法：

switch (要判断的变量) {
  case 情况1:
    情况1要执行的代码
    break
  case 情况2:
    情况2要执行的代码
    break
  case 情况3:
    情况3要执行的代码
    break
  default:
    上述情况都不满足的时候执行的代码
}

判断某一个变量等于某一个值的时候，可以使用switch语句

注意点：
1、switch只能进行全等判断（===）
2、switch全等哪个程序，就从对应的程序开始执行至最后一行程序代码，除非遇到break这个终止关键词
3、理论上每一个case都要匹配一个break终止关键词，
   break的作用是跳出switch代码块，终止switch代码块后面代码的执行。
4、当所有的全等判断执行结果都是false时，触发执行default中的程序

案例

var week = Number(window.prompt('请输入1~7的数字'));
switch (week) {
  case 1:
    alert('星期一')
    break
  case 2:
    alert('星期二')
    break
  case 3:
    alert('星期三')
    break
  case 4:
    alert('星期四')
    break
  case 5:
    alert('星期五')
    break
  case 6:
    alert('星期六')
    break
  case 7:
    alert('星期日')
    break
  default:
    alert('请输入一个 1 ～ 7 之间的数字')
}
/*
	如果用户输入1，会弹窗提示：星期一，
	输入2，弹窗提示：星期二...输入7，弹窗提示：星期日，
	若是输入其他的内容，则会弹窗提示：请输入一个 1 ～ 7 之间的数字。
*/

switch的穿透

1、在说switch的穿透之前，首先需要说一下终止关键词break
   break语句用于退出switch语句或循环语句(for, for...in, while, do...while)。
   当break语句用于switch语句中时，会跳出switch代码块，终止执行代码。
   当break语句用于循环语句时，会终止执行循环，并执行循环后代码(如果有的话)。
   
2、什么是switch的穿透？
   在switch语句中，理论上每一个case都要匹配一个break终止关键词。
   若是不加这个break终止关键词，switch语句会默认从定位的程序开始执行至最后一行代码，
   这样的执行机制称为switch的穿透。 
 
3、switch穿透的作用
   利用switch的穿透可以简化代码。多种情况执行相同的程序，可以使用switch的穿透优化程序。

// 案例：输入月份，输出这个月有多少天 
/* 
	1 3 5 7 8 10 12月   有31天
    4 6 9 11月 		   有30天
    2月 				   平年28天、闰年29天
*/
var month = Number( window.prompt('请您输入月份1-12') );
switch( month ){
	// 执行相同程序的情况定义在一起
	// 利用switch的穿透，触发执行相同的程序
	case 1:
    case 3:
    case 5:
  	case 7:
	case 8:
    case 10:
    case 12:
		document.write(`您输入的是${month}月,这个月有31天`);
        break;
	case 4:
	case 6:
	case 9:
	case 11:
         document.write(`您输入的是${month}月,这个月有30天`);
         break;
	case 2:
         document.write(`您输入的是${month}月,这个月平年有28天、闰年有29天`);
         break;
	default:
         document.write(`您输入的是${month}月,地球上没有这个月份`);
         break;
}

三元运算（扩展）

三元运算，就是用 两个符号 组成一个语句
三元运算只是对 if else 语句的一个简写形式

语法： 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行

var age = 18;
age >= 18 ? alert('已经成年') : alert('没有成年');

循环结构（重点）

循环结构，就是根据某些给出的条件，重复的执行同一段代码，除非触发终止条件才会停止循环。

while 循环

while，中文叫当…时，其实就是当条件满足时就执行代码，一旦不满足就不执行了
语法 while (条件) { 满足条件就执行 }
while 循环必须要具备的，固定的内容组成
1. 循环变量的初始化
  
  定义一个循环变量并且赋值初始值，通过循环变量的数值控制循环的次数
  整个循环中步骤1只会触发执行1次
2. 判断进入循环的条件
  
  条件判断的结果是 true，进入循环执行程序
  条件判断的结果是 false，终止循环，执行循环之后的程序
3. 循环体
  
  每次循环都要执行的程序代码
4. 步长
  
  每次循环，循环变量改变的数值
  可以根据项目需求设定

因为满足条件就执行，所以我们写的时候一定要设定一个边界值，同时要设定步长，不然就会一直循环下去了

// 1. 初始化条件
var num = 0;
// 2. 条件判断
while (num < 10) {
  // 3. 要执行的代码
  console.log('当前的 num 的值是 ' + num);
  // 4. 自身改变
  num = num + 1;
}
// 循环执行结束，才会执行之后的程序
console.log( '我是循环之后的程序' );

do while 循环

是一个和 while 循环类似的循环，一般用不到。

与while循环的区别：

while循环:
	会先进行条件的判断，满足就执行，不满足直接就不执行了。

do while循环:
	不管条件满足不满足，先执行一回循环体，然后再开始进行条件判断。
	条件满足，继续执行循环；
	条件不满足，执行循环之后的程序。

语法： do { 要执行的代码 } while (条件)

/*
	下面这个代码，条件一开始就不满足，但是依旧会执行一次do后面{}内部的代码，最后只会输出一次666
 */
var num = 10;
do {
  console.log('666');
  num = num + 1;
} while (num < 10);
/* 
	下面这个代码，会先执行一次do后面{}内部的代码，
	然后进行条件判断，发现条件满足，继续执行循环，直到num=20时终止循环，最后会输出10次666
 */
var num = 10;
do {
  console.log('666');
  num = num + 1;
} while (num < 20);

for 循环

for 循环是和 while 、 do while 循环都不太一样的一种循环结构，但是道理是和其他两种循环是一样的，都是循环执行代码。

语法： for (var i = 0; i < 10; i++) { 要执行的代码 }

// 把初始化，条件判断，自身改变，写在了一起
for (var i = 1; i <= 10; i++) {
  // 这里写的是要执行的代码
  console.log(i);
}

// 控制台会依次输出 1 ~ 10

这个只是看起来不太舒服，但是用起来比较好用

/*
案例：输出 123-456 的所有奇数
	方法1:
       循环从123开始到456结束，生成所有的整数数值，步长值是1。
       添加判断：偶数不输出，奇数输出。
	方法2:
       利用奇数数列的特点： 
       相邻的两个数值相差2，循环从123-456的第一个奇数123开始，到456结束，每次循环步长值是2。*/

//	方法一
// 1、使用while语句
var i = 123 ;
while( i <= 456 ){
// 不能被2整除,也就是被2除余数不是0的是奇数
	if( i % 2 !== 0 ){
		console.log(i);
    }
    i++;
}
// 2、使用for循环
for( var i = 123 ; i <= 456 ; i++){
	if( i % 2 !== 0 ){
        console.log(i);
    }
}

//	方法2 
// 1、使用while循环
var i = 123 ;
while( i <= 456 ){
    console.log(i);
    // 步长值 变成 2
    i += 2 ;
}
// 2、使用for循环
for( var i = 123 ; i <= 456 ; i +=2 ){
    console.log(i);
}

补充内容

1、断点

是浏览器提供的一个功能，可以让JavaScript程序一步一步的执行，
可以看到JavaScript程序具体的执行过程、执行步骤、变量储存的数值。

断点使用步骤：
在这里插入图片描述

2、break：终止循环

在循环没有进行完毕的时，若是我设置的条件满足了，就可以使用break提前终止循环
比如：我要吃五个包子，吃到三个的时候，不能在吃了，我就停止吃包子这个事情

要终止循环，可以直接使用 break 关键字

for (var i = 1; i <= 5; i++) {
  // 每循环一次，吃一个包子
  console.log('我吃了一个包子')
  // 当 i 的值为 3 的时候，条件为 true，执行 {} 里面的代码终止循环
  if (i === 3) {
    break;
   // 循环不会继续向下执行了，也就没有 4 和 5 了，最终只会输出3次：我吃了一个包子
  }
}

3、continue：结束本次循环

在循环中，把本次循环跳过去，继续执行后续的循环
比如：吃五个包子，到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个

跳过本次循环，可以使用 continue 关键字

for (var i = 1; i <= 5; i++) {
  /* 
  	当 i 的值为 3 的时候，执行 {} 里面的代码，{} 里面有 continue，那么本次循环后面的代码就都不执行了，
  	自动算作 i 为 3 的这一次结束了，去继续执行 i = 4 的那次循环了
  */
  if (i === 3) {
    console.log('这个是第三个包子，掉地下了，我不吃了');
    continue;
    cosole.log('我不会执行了');	//=> 该语句不会执行
  }
  console.log('我吃了一个包子');
}
/*
	控制台输出结果：
	先输出两次：	     我吃了一个包子
	再输出：	      这个是第三个包子，掉地下了，我不吃了
	最后输出两次：		我吃了一个包子
*/

// while循环不支持 continue
var i = 1 ;
while( i <= 5 ){
	if(i === 3){
		continue;		//不支持
	}
	console.log( i );
	i++ ;
}

4、break、continue区别总结

1. break
	(1)跳出当前整个循环，执行当前循环下边的语句。
	(2)如果你的循环是嵌套循环，那么break只能跳出其中的距离break最近的一层循环。
	   如果你想要跳出整个循环，那么需要按照嵌套的层次，逐步使用break来跳出。[逐层判断，逐步跳出]
	(3)break在循环体内，强行结束循环的执行，也就是结束整个循环过程，
	   不在判断执行循环的条件是否成立，直接转向循环语句下面的语句。
	(4)当break出现在switch语句内时，其作用只是跳出该switch语句体。

2. continue
	(1)终止本次循环的执行，即跳过当前这次循环中continue语句后尚未执行的语句，接着进行下一次
循环条件的判断。
	(2)虽然它会终止当前的循环过程，但并不会跳出循环，而是继续往下判断循环条件执行语句.
	   只能结束循环中的一次过程，但不能终止整个循环的进行。

5、死循环

break一般是作为死循环中的终止语句使用。
有些循环若是不知道循环次数，会写成死循环。当满足条件时触发break才会终止循环的执行。
使用while语句更容易实现一个死循环

/*
案例：
	当期在银行存储100元，每年固定利息3元，多少年利息可超过50元？
	写一个死循环，每次循环次数累加1，利息累加3，当利息大于50终止循环。
 */


//方法一：while
// 定义变量存储次数
var time = 0;
// 定义变量存储利息
var money = 0 ;
// 定义一个死循环，也就是在()中定义true，循环就会一直执行。
while( true ){
	// 每次循环，循环次数累加1 
	time++;
	// 每次循环，利息累加3
	money += 3 ;
	// 利息大于50 终止循环
    if( money > 50 ){
    	break ;
     }
}
console.log( time );		//=> 17
console.log( money );		//=> 51


//方法二：for
/*
死循环定义成 for循环的语法形式注意点：
1, ()中不能只写true表达式，要定义循环变量和步长，只写true会报错。
2, 触发break，最终的步长执行也会被终止(即time++会被终止)。
所以在用循环变量记录循环次数时，初始值就要多1，即：for循环里面time变量的初始值设置为1
*/
var money = 0; 
for( var time = 1 ; true ; time++ ){
	money += 3; 
	if( money >= 50 ){
       break ;
    }
}
console.log( time );		//=> 17
console.log( money );		//=> 51

6、循环嵌套

有时候在循环中，循环体程序也会包含另一个循环程序，这就是循环的嵌套。
for循环嵌套，正常情况下最多用3层，一般不会用超过3层的for循环。
注意点：
- 外层循环变量和内层循环变量的名称不能相同。
- 外层循环每执行一次，内层循环就执行所有。
- 在外层循环执行一次的过程中，外层循环变量数值保持不变，内层循环变量数值一直改变。
- 内层循环变量的设定往往和外层循环变量相关(见：九九乘法表)。

// 外层循环,是1-5,共循环5次 
for( var j = 1 ; j <= 5 ; j++ ){
	// 内层循环，也就是外层循环每执行一次，内层循环就会执行完整的5次循环
	for(var i = 1 ; i <= 5 ; i++){
		console.log( i , j );
	}
}

/*
三角形的输出
	*               第一行, 输出 1 组 星号+空格
    * *             第二行, 输出 2 组 星号+空格
    * * *           第三行, 输出 3 组 星号+空格
   	* * * *         第四行, 输出 4 组 星号+空格
    * * * * *       第五行, 输出 5 组 星号+空格
    * * * * * *     第六行, 输出 6 组 星号+空格
 思路:
 	一行内 星号+空格 的数量等于行数。
    1.完成一行内容的输出---用内层循环
      例如：第六行共6组星号+空格，最后在执行一次换行。
	2.完成行数的输出---用外层循环
      当前有6行内容，需要循环执行6次
	3.将内层循环程序定义在外层循环中
	4.找外层循环变量和内层循环变量之间的的关系。
 */
/*
	外层第一次循环 j 是 1,  内层会循环 1 次
	外层第二次循环 j 是 2,  内层会循环 2 次
	外层第一次循环 j 是 3,  内层会循环 3 次
	外层第一次循环 j 是 4,  内层会循环 4 次
	外层第一次循环 j 是 5,  内层会循环 5 次
	外层第一次循环 j 是 6,  内层会循环 6 次
 */
// 外层循环，循环次数等于行数
for( var j = 1 ; j <= 6 ; j++ ){
	// 内层循环，循环次数等于当前行数
    for( var i = 1 ; i <= j ; i++ ){
        document.write('* ');
    }
    // 一行内容结束，输出换行
    document.write('<br>');
}

/*
99乘法表
步骤：
	1.输出一个9行的 三角形
	2.将星号替换为 1 * 1 = 1 这样的固定公式
    3.通过观察其中的一行内容发现：
      第一个数值在不断改变，所以它是内层循环变量
      第二个数值不变，所以它是外层循环变量
      每一行的内层循环变量i的最大值其实就是外层循环变量j
*/

// 1.输出一个9行的三角形
// for( var j = 1 ; j <= 9 ; j++ ){
//     for( var i = 1 ; i <= j ; i++ ){
//         document.write( '* ' );
//     }
//     document.write('<br>');
// } 

// 2.将星号替换为 1 * 1 = 1 这样的固定公式
//	for( var j = 1 ; j <= 9 ; j++ ){
//     for( var i = 1 ; i <= j ; i++ ){
//          document.write( '1 * 1 = 1 ' );
//     }
//     document.write('<br>');
//	} 

// 第一个数值是内层循环变量，用i表示；第二个数值是外层循环变量，用j表示。
     for( var j = 1 ; j <= 9 ; j++ ){
        for( var i = 1 ; i <= j ; i++ ){
            document.write( `${i} * ${j} = ${i*j} `);
        }
        document.write('<br>');
   	 }

附：99乘法表参考图
在这里插入图片描述

狂飙的肥兔

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
JavaScript程序的三大结构---顺序结构、分支结构与循环结构

本文主要介绍js里的分支结构与循环结构，包括if语句、if else语句、switch语句、while循环、do while循环、for循环、死循环、断点、循环嵌套等等内容
复制链接

扫一扫