JavaScript 04 流程控制(循环)

目录

流程控制(循环)思维导图

1 - 流程控制

1.1 流程控制概念

1.2 顺序流程控制

1.3 分支流程控制

1.4 三元表达式

1.5 switch分支流程控制

附上流程控制思维导图:

2 - 循环

1.1 for循环

1.2 双重for循环

1.3 while循环

1.4 do-while循环

1.5 continue、break

附上循环结构思维导图:

2 - 代码规范

2.1 标识符命名规范

2.2 操作符规范

2.3 单行注释规范

2.4 其他规范

附上循环练习题(有兴趣的可以做一下):


流程控制(循环)思维导图

JavaScript 04 流程控制(循环)_第1张图片

1 - 流程控制

1.1 流程控制概念

 在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
 ​
 简单理解:**流程控制就是来控制代码按照一定结构顺序来执行**
 ​
 流程控制主要有三种结构,分别是**顺序结构**、**分支结构**和**循环结构**,代表三种代码执行的顺序。

         JavaScript 04 流程控制(循环)_第2张图片        

1.2 顺序流程控制

        顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的。                

                                JavaScript 04 流程控制(循环)_第3张图片

1.3 分支流程控制

  • 分支结构

    由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果

                             JavaScript 04 流程控制(循环)_第4张图片     

 JS 语言提供了两种分支结构语句:if 语句、switch 语句

  • if 语句   
    • 语法结构

      // 条件成立执行代码,否则什么也不做
      if (条件表达式) {
          // 条件成立执行的代码语句

      }

      语句可以理解为一个行为,循环语句和分支语句就是典型的语句。一个程序由很多个语句组成,一般情况下,会分割成一个一个的语句。

                             

                        

    • 执行流程

                             JavaScript 04 流程控制(循环)_第5张图片

  • if else语句(双分支语句)
    • ·语法结构

       // 条件成立  执行 if 里面代码,否则执行else 里面的代码
      if (条件表达式) {
          // [如果] 条件成立执行的代码
      } else {
          // [否则] 执行的代码
      }

    • 执行流程

                                JavaScript 04 流程控制(循环)_第6张图片

  • if else if 语句(多分支语句)
  • 语法结构

    // 适合于检查多重条件。
    if (条件表达式1) {
        语句1;
    } else if (条件表达式2)  {
        语句2;
    } else if (条件表达式3)  {
       语句3;
     ....
    } else {
        // 上述条件都不成立执行此处代码
    }
     

  • 执行逻辑

                      JavaScript 04 流程控制(循环)_第7张图片

1.4 三元表达式

  • 语法结构

     表达式1 ? 表达式2 : 表达式3;
  • 执行思路

    • 如果表达式1为 true ,则返回表达式2的值,如果表达式1为 false,则返回表达式3的值

    • 简单理解: 就类似于 if else (双分支) 的简写

1.5 switch分支流程控制

  • 语法结构

     switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用 switch。
     switch( 表达式 ){ 
         case value1:
             // 表达式 等于 value1 时要执行的代码
             break;
         case value2:
             // 表达式 等于 value2 时要执行的代码
             break;
         default:
             // 表达式 不等于任何一个 value 时要执行的代码
     }
    • switch :开关 转换 , case :小例子 选项

    • 关键字 switch 后面括号内可以是表达式或值, 通常是一个变量

    • 关键字 case , 后跟一个选项的表达式或值,后面跟一个冒号

    • switch 表达式的值会与结构中的 case 的值做比较

    • 如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码执行结束

    • 如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码

      注意: 执行case 里面的语句时,如果没有break,则继续执行下一个case里面的语句。

  • switch 语句和 if else if 语句的区别

    • 一般情况下,它们两个语句可以相互替换

    • switch...case 语句通常处理 case为比较确定值的情况, 而 if…else…语句更加灵活,常用于范围判断(大于、等于某个范围)

    • switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而if…else 语句有几种条件,就得判断多少次。

    • 当分支比较少时,if… else语句的执行效率比 switch语句高。

    • 当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。

附上流程控制思维导图:

        JavaScript 04 流程控制(循环)_第8张图片

2 - 循环

1.1 for循环

  • 语法结构

     for(初始化变量; 条件表达式; 操作表达式 ){
         //循环体
     }
    名称 作用
    初始化变量 通常被用于初始化一个计数器,该表达式可以使用 var 关键字声明新的变量,这个变量帮我们来记录次数。
    条件表达式 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环,否则退出循环。
    操作表达式 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环,否则退出循环。

    执行过程:

    1. 初始化变量,初始化操作在整个 for 循环只会执行一次。

  • 执行条件表达式,如果为true,则执行循环体语句,否则退出循环,循环结束。

  1. 执行操作表达式,此时第一轮结束。

  2. 第二轮开始,直接去执行条件表达式(不再初始化变量),如果为 true ,则去执行循环体语句,否则退出循环。

  3. 继续执行操作表达式,第二轮结束。

  4. 后续跟第二轮一致,直至条件表达式为假,结束整个 for 循环。

断点调试:

     断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。断点调试可以帮助观察程序的运行过程
 断点调试的流程:
 1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
 2、Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。
 3、摁下F11,程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
  • for 循环重复相同的代码

    比如输出10句“媳妇我错了”

     //  基本写法
     for(var i = 1; i <= 10; i++){
         console.log('媳妇我错了~');
     }
     // 用户输入次数
     var num = prompt('请输入次数:');
     for ( var i = 1 ; i <= num; i++) {
         console.log('媳妇我错了~');
     } 

  • for 循环重复不相同的代码

    例如,求输出1到100岁:

     //  基本写法
     for (var i = 1; i <= 100; i++) {
           console.log('这个人今年' + i + '岁了');
     }

    例如,求输出1到100岁,并提示出生、死亡

     // for 里面是可以添加其他语句的 
     for (var i = 1; i <= 100; i++) {
      if (i == 1) {
         console.log('这个人今年1岁了, 它出生了');
      } else if (i == 100) {
         console.log('这个人今年100岁了,它死了');
       } else {
            console.log('这个人今年' + i + '岁了');
       }
     }

    for循环因为有了计数器的存在,还可以重复的执行某些操作,比如做一些算术运算。

1.2 双重for循环

  • 双重 for 循环概述

    循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环语句中,可以再嵌套一个for 循环,这样的 for 循环语句我们称之为双重for循环。

  • 双重 for 循环语法

     for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
         for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
            需执行的代码;
        }
     }
    • 内层循环可以看做外层循环的循环体语句

    • 内层循环执行的顺序也要遵循 for 循环的执行顺序

    • 外层循环执行一次,内层循环要执行全部次数

  • 打印五行五列星星

     var star = '';
     for (var j = 1; j <= 3; j++) {
         for (var i = 1; i <= 3; i++) {
           star += '☆'
         }
         // 每次满 5个星星 就 加一次换行
         star += '\n'
     }
     console.log(star);

    核心逻辑:

    1.内层循环负责一行打印五个星星

    2.外层循环负责打印五行

  • for 循环小结

    • for 循环可以重复执行某些相同代码

    • for 循环可以重复执行些许不同的代码,因为我们有计数器

    • for 循环可以重复执行某些操作,比如算术运算符加法操作

    • 随着需求增加,双重for循环可以做更多、更好看的效果

    • 双重 for 循环,外层循环一次,内层 for 循环全部执行

    • for 循环是循环条件和数字直接相关的循环

1.3 while循环

while语句的语法结构如下:

 while (条件表达式) {
     // 循环体代码 
 }

执行思路:

  • 1 先执行条件表达式,如果结果为 true,则执行循环体代码;如果为 false,则退出循环,执行后面代码

  • 2 执行循环体代码

  • 3 循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true,则会继续执行循环体,直到循环条件为 false 时,整个循环过程才会结束

注意:

  • 使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环

1.4 do-while循环

do... while 语句的语法结构如下:

 do {
     // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
 } while(条件表达式);

执行思路

  • 1 先执行一次循环体代码

  • 2 再执行条件表达式,如果结果为 true,则继续执行循环体代码,如果为 false,则退出循环,继续执行后面代码

    注意:先再执行循环体,再判断,do…while循环语句至少会执行一次循环体代码

1.5 continue、break

continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)。

例如,吃5个包子,第3个有虫子,就扔掉第3个,继续吃第4个第5个包子,其代码实现如下:

  for (var i = 1; i <= 5; i++) {
      if (i == 3) {
          console.log('这个包子有虫子,扔掉');
          continue; // 跳出本次循环,跳出的是第3次循环 
       }
       console.log('我正在吃第' + i + '个包子呢');
  }

运行结果:

   JavaScript 04 流程控制(循环)_第9张图片

break 关键字用于立即跳出整个循环(循环结束)。

例如,吃5个包子,吃到第3个发现里面有半个虫子,其余的不吃了,其代码实现如下:

 for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break; // 直接退出整个for 循环,跳到整个for下面的语句
    }
    console.log('我正在吃第' + i + '个包子呢');
  }

运行结果:

        JavaScript 04 流程控制(循环)_第10张图片

附上循环结构思维导图:

JavaScript 04 流程控制(循环)_第11张图片

2 - 代码规范

2.1 标识符命名规范

  • 变量、函数的命名必须要有意义

  • 变量的名称一般用名词

  • 函数的名称一般用动词

2.2 操作符规范

 // 操作符的左右两侧各保留一个空格
 for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break; // 直接退出整个 for 循环,跳到整个for循环下面的语句
    }
    console.log('我正在吃第' + i + '个包子呢');
 }

2.3 单行注释规范

 for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break; // 单行注释前面注意有个空格
    }
    console.log('我正在吃第' + i + '个包子呢');
 }

2.4 其他规范

 关键词、操作符之间后加空格

               JavaScript 04 流程控制(循环)_第12张图片

附上循环练习题(有兴趣的可以做一下):

【程序 1】 题目:古典问题:有一对兔子,从出生后第 3 个月起每个月都生一 对兔子,
小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个 月的兔子总数为多少?

 1、1、2、3、5、8、13、21、34
//n:月份;n>=1
//n = 1 ;f(1)  = 1 ;
//n=2 ;f(2)=1;
//n>2;f(n) = f(n-1) + f(n-2);

【程序 2】 题目:判断 101-200 之间有多少个素数(质数),并输出所有素数。 
1.程序 分析:判断素数的方法:用一个数分别去除 2 到 sqrt(这个数),如果能被整除, 则表明此数不是素数,反之是素数。 

【程序 3】 题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数, 
其各位数字立方和等于该数本身。例如:153 是一个"水仙花数",
因为 153=1 的 三次方+5 的三次方+3 的三次方。 1.程序分析:利用 for 循环控制 100-999 个 数,每个数分解出个位,十位,百位。 

【程序 4】 题目:将一个正整数分解质因数。例如:输入 90,打印出 90=2*3*3* 5。 
程序分析:对 n 进行分解质因数,应先找到一个最小的质数 k,


然后按下述 步骤完成: (1)如果这个质数恰等于 n,则说明分解质因数的过程已经结束,打 印出即可。 


(2)如果 n>k,但 n 能被 k 整除,则应打印出 k 的值,并用 n 除以 k 的商,作为新的正整数你 n,重复执行第一步。 
(3)如果 n 不能被 k 整除,则用 k+ 1 作为 k 的值,重复执行第一步。 

【程序 5】 题目:利用条件运算符的嵌套来完成此题:学习成绩>=90 分的同学 用 A 表示,
 60-89 分之间的用 B 表示, 60 分以下的用 C 表示。 


【程序 6】 题目:输入两个正整数 m 和 n,求其 最大公约数  和 最小公倍数。
 1. 程序分析:利用辗除法。 

// ......

【程序 7】 题目:输入一行字符,分别统计出其中  英文字母、空格、数字和其它字符的个数。
 1.程序分析:利用 while 语句,条件为输入的字符不为 '\n '。

【程序 8】 题目:求 s=a+aa+aaa+aaaa+aa...a 的值,其中 a 是一个数字。
例 如 2+22+222+2222+22222(此时共有 5 个数相加),几个数相加有键盘控制。 
1. 程序分析:关键是计算出每一项的值。

【程序 9】 题目:一个数如果恰好等于它的因子之和,这个数就称为 "完数 "。 
例如 6=1+2+3.编程 找出 1000 以内的所有完数。 


【程序 10】 题目:一球从 100 米高度自由落下,每次落地后反跳回原高度的一 半;
          再落下,求它在 第 10 次落地时,共经过多少米?
          第 10 次反弹多高? 

【程序 11】 题目:有 1、2、3、4 个数字,能组成多少个互不相同且无重复数 字的三位数?都是多少? 4*3*2 = 24  
 1.程序分析:可填在百位、十位、个位的数字都是 1、 2、3、4。组成所有的排列后再去 掉不满足条件的排列。 

【程序 12】 题目:企业发放的奖金根据利润提成。利润(I)低于或等于 10 万元 时,奖金可提 10%;
利润高于 10 万元,低于 20 万元时,低于 10 万元的部分按 10%提成,高于 10 万元的部分,可可提成 7.5%;
20 万到 40 万之间时,高于 2 0 万元的部分, 可提成 5%; 
40 万到 60 万之间时高于 40 万元的部分, 可提成 3%; 
60 万到 100 万之间时,高于 60 万元的部分,可提成 1.5%,高于 100 万元时, 超过 100 万元的部分按 1%提成,
从键盘输入当月利润 I,求应发放奖金总数? 
1.程序分析:请利用数轴来分界,定位。注意定义时需把奖金定义成长整型。 

【程序 13】 题目:一个整数,它加上 100 后是一个完全平方数,再加上 168 又是一个完全平方数,请问该数是多少?
 1.程序分析:在 10 万以内判断,先将 该数加上 100 后再开方,再将该数加上 168 后再开方,如果开方后的结果满足 
如下条件,即是结果。请看具体分析:  穷举法。

【程序 14】 题目:输入某年某月某日,判断这一天是这一年的第几天? 
1.程 序分析:以 3 月 5 日为例,应该先把前两个月的加起来,然后再加上 5 天即本 年的第几天,特殊情况,
闰年且输入月份大于 3 时需考虑多加一天。 


【程序 15】 题目:输入三个整数 x,y,z,请把这三个数由小到大输出。 
1.程序 分析:我们想办法把最小的数放到 x 上,先将 x 与 y 进行比较,如果 x> y 则将 x 与 y 的值进行交换,然后再用 x 与 z 进行比较,如果 x> z 则将 x 与 z 的值进 行交换,这样能使 x 最小。 


【程序 16】 题目:输出 9*9 口诀。 1.程序分析:分行与列考虑,共 9 行 9 列, i 控制行,j 控制列。 


【程序 17】 题目: 猴子吃桃问题: 猴子第一天摘下若干个桃子, 当即吃了一半, 还不瘾,又多吃了一个 
第二天早上又将剩下的桃子吃掉一半,又多吃了一个。 以后每天早上都吃了前一天剩下 的一半零一个。
到第 10 天早上想再吃时,见 只剩下一个桃子了。 求第一天共摘了多少。 
10  1 
9   4     (1+1)*2 = 4  
8   10      (4+1)*2 = 10 
7   22        (10+1)*2 = 22    

假设 x 
x - x/2 - 1 = 1 ; x = (1+1)*2 = 4 

1.程序分析: 采取逆向思维的方法, 从后往前推断。 

【程序 18】 题目:两个乒乓球队进行比赛,各出三人。甲队为 a,b,c 三人,乙 队为 x,y,z 三人。已抽签决定比赛名单。有人向队员打听比赛的名单。a 说他不 和 x 比,c 说他不和 x,z 比,请编程序找出三队赛手的名单。 1.程序分析:判断 素数的方法:用一个数分别去除 2 到 sqrt(这个数),如果能被整除, 则表明此 数不是素数,反之是素数。 

【程序 19】 题目:打印出如下图案(菱形) * *** ****** ******** ****** *** * 1.程序分析:先把图形分成两部分来看待,前四行一个规律,后三行一个规律, 利用双重 for 循环,第一层控制行,第二层控制列。 

【程序 20】 题目:有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13...求出这 个数列的前 20 项之和。 1.程序分析:请抓住分子与分母的变化规律。 

【程序 21】 题目:求 1+2!+3!+...+20!的和 1.程序分析:此程序只是把累加变 成了累乘。 

【程序 22】 题目:利用递归方法求 5!。 1.程序分析:递归公式:fn=fn_1*4! 

【程序 23】 题目:有 5 个人坐在一起,问第五个人多少岁?他说比第 4 个人大 2 岁。问第 4 个人岁数,他说比第 3 个人大 2 岁。问第三个人,又说比第 2 人大 两岁。问第 2 个人,说比第一个人大两岁。最后问第一个人,他说是 10 岁。请 问第五个人多大? 1.程序分析:利用递归的方法,递归分为回推和递推两个阶 段。要想知道第五个人岁数,需知道第四人的岁数,依次类推,推到第一人(1 0 岁),再往回推。 

【程序 24】 题目: 给一个不多于 5 位的正整数, 要求: 一、 求它是几位数, 二、 逆序打印出各位数字。 

【程序 25】 题目:一个 5 位数,判断它是不是回文数。即 12321 是回文数, 个位与万位相同,十位与千位相同。

 【程序 26】 题目:请输入星期几的第一个字母来判断一下是星期几,如果第一 个字母一样,则继续 判断第二个字母。 1.程序分析:用情况语句比较好,如果 第一个字母一样,则判断用情况语句或 if 语句判断第二个字母。 

【程序 27】 题目:求 100 之内的素数

【程序 28】 题目:对 10 个数进行排序 1.程序分析:可以利用选择法,即从后 9 个比较过程中,选择一个最小的与第一个元素交换, 下次类推,即用第二个 元素与后 8 个进行比较,并进行交换。 

【程序 29】 题目:求一个 3*3 矩阵对角线元素之和 1.程序分析:利用双重 for 循环控制输入二维数组,再将 a[i][i]累加后输出。

 【程序 30】 题目:有一个已经排好序的数组。现输入一个数,要求按原来的规 律将它插入数组中。 1. 程序分析:首先判断此数是否大于最后一个数,然后再 考虑插入中间的数的情况,插入后此元素之后的数,依次后移一个位置。 

【程序 31】 题目:将一个数组逆序输出。 1.程序分析:用第一个与最后一个 交换。 

【程序 32】 题目:取一个整数 a 从右端开始的 4~7 位。 程序分析:可以这样 考虑: (1)先使 a 右移 4 位。 (2)设置一个低 4 位全为 1,其余全为 0 的数。可用 ~(~0 < <4) (3)将上面二者进行&运算。 

【程序 33】 题目: 打印出杨辉三角形 (要求打印出 10 行如下图) 1.程序分析: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 【程序 34】 题目:输入 3 个数 a,b,c,按大小顺序输出。 1.程序分析:利用指 针方法。 

【程序 35】 题目:输入数组,最大的与第一个元素交换,最小的与最后一个元 素交换,输出数组。 

【程序 36】 题目:有 n 个整数,使其前面各数顺序向后移 m 个位置,最后 m 个数变成最前面的 m 个数 

【程序 37】 题目:有 n 个人围成一圈,顺序排号。从第一个人开始报数(从 1 到 3 报数),凡报到 3 的人退出圈子,问最后留下的是原来第几号的那位。 

【程序 38】 题目:写一个函数,求一个字符串的长度,在 main 函数中输入字 符串,并输出其长度。

 【程序 39】 题目:编写一个函数,输入 n 为偶数时,调用函数求 1/2+1/4+...+ 1/n,当输入 n 为奇数时,调用函数 1/1+1/3+...+1/n(利用指针函数) 

【程序 40】 题目:字符串排序。 

【程序 41】 题目:海滩上有一堆桃子,五只猴子来分。第一只猴子把这堆桃子 凭据分为五份,多了一个,这只猴子把多的一个扔入海中,拿走了一份。第二只 猴子把剩下的桃子又平均分成五份,又多了一个,它同样把多的一个扔入海中, 拿走了一份,第三、第四、第五只猴子都是这样做的,问海滩上原来最少有多少 个桃子? 

【程序 42】 题目:809*??=800*??+9*??+1 其中??代表的两位数,8*??的结果 为两位数,9*??的结果为 3 位数。求??代表的两位数,及 809*??后的结果。 

【程序 43】 题目:求 0—7 所能组成的奇数个数。 

【程序 44】 题目:一个偶数总能表示为两个素数之和。 

【程序 45】 题目:判断一个素数能被几个 9 整除 。

【程序 46】 题目:两个字符串连接程序 

【程序 47】 题目:读取 7 个数(1—50)的整数值,每读取一个值,程序打印 出该值个数的*。 

【程序 48】 题目:某个公司采用公用电话传递数据,数据是四位的整数,在 传递过程中是加密的,加密规则如下:每位数字都加上 5,然后用和除以 10 的余 数代替该数字,再将第一位和第四位交换,第二位和第三位交换。 

【程序 49】 题目:计算字符串中子串出现的次数 

【程序 50】 题目:有五个学生,每个学生有 3 门课的成绩,从键盘输入以上数 据(包括学生号,姓名,三门课成绩),计算出平均成绩,况原有的数据和计算 出的平均分数存放在磁盘文件 "stud "中。

笔记内容来源于哔哩哔哩pink老师javascript教程,思维导图是自己整理的,

练习题答案网上可以找到   

期望看完的朋友可以点个赞,谢谢。

你可能感兴趣的:(#,Javascript,javascript,开发语言,ecmascript)