关于Javascrip的循环结构

最新推荐文章于 2023-08-25 09:19:34 发布

原创最新推荐文章于 2023-08-25 09:19:34 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

本文详细介绍了编程中的循环结构，包括while、do-while和for循环的使用方式，并通过实例展示了它们在不同场景下的应用。同时，讲解了break和continue关键字在循环控制中的作用，如何根据条件提前终止或跳过循环中的部分执行。此外，还提到了双重循环的概念，以九九乘法表为例展示了如何实现。

一.循环结构

循环结构，就是根据某些给出的条件，重复的执行同一段代码
循环必须要有某些固定的内容组成
1. 初始化
2. 条件判断
3. 要执行的代码
4. 自身改变

二.WHILE 循环

while，中文叫当…时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了
语法 while (条件) { 满足条件就执行 }
因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了
此语句是先判断条件，在确定是否执行语句或者代码块

注意：在循环中一定要有改变条件的语句，否则就会成为死循环

// 1. 初始化条件
var num = 0;
// 2. 条件判断
while (num < 10) {
  // 3. 要执行的代码
  console.log('当前的 num 的值是 ' + num)
  // 4. 自身改变
  num = num + 1
}

eg：
下面展示一些 内联代码片。

//while循环的部分案例


        console.log('循环开始>>>>');
        var num = 5
        while( num > 0 ){ // num: 5,4,3,2,1,0
            console.log('num :',num)  // 5,4,3 ,2,1
            --num  // num:4,3, 2,1,0
        }
        console.log('循环结束>>>>');




 正序输出 1, 2, 3 ,4 ,5
 
            分析: 重复执行 console.log(num) , 每次执行之后让 num 值 增加
                 var num = 1
                 while(num <= 5){
                     console.log(num)
                     num++
                 }

        // console.log('1')
        // console.log('2')
        // console.log('3')
        // console.log('4')
        // console.log('5')

        var num = 1
        while (num <= 5) { // num:1,2,3,4,5,6
            console.log(num) //1,2,3,4,5
            num++ //num:2,3,4,5,6
        }

三.DO WHILE 循环

是一个和 while 循环类似的循环
while 会先进行条件判断，满足就执行，不满足直接就不执行了
但是 do while 循环是，先不管条件，先执行一回，然后在开始进行条件判断

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

// 下面这个代码，条件一开始就不满足，但是依旧会执行一次 do 后面 {} 内部的代码
var num = 10
do {
  console.log('我执行了一次')
  num = num + 1
} while (num < 10)

下面展示一些 内联代码片。

// 以下是do-while语句的案例

          倒序输出 5，4，3，2，1 

        var num = 5  // 初始化值
        do{
            console.log(num) // 5,4,3,2,1
            num--  // num: 4,3,2,1,0
        }while(num > 0)

四.FOR 循环

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

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

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

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

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

下面展示一些 内联代码片。

// 正顺序输出循环用for语句

  正序输出 1, 2, 3, 4, 5
          分析: 
             var num = 1  //初始值
             console.log(num)  //循环体执行代码
             num++  改变条件语句

             num<=>5 条件
        */


        // for(var num = 1; num <= 5; num++){
        //     console.log(num)
        // }


        for(var i = 10; i > 0; i--){ //4,3,2,1,0
            console.log(i) // 5,4,3,2,1
        }

五.BREAK 终止循环

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

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

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

六.CONTINUE 结束本次循环

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

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

for (var i = 1; i <= 5; i++) {
  // 当 i 的值为 3 的时候，执行 {} 里面的代码
  // {} 里面有 continue，那么本次循环后面的代码就都不执行了
  // 自动算作 i 为 3 的这一次结束了，去继续执行 i = 4 的那次循环了
  if (i === 3) {
    console.log('这个是第三个包子，掉地下了，我不吃了')
    continue
  }
  console.log('我吃了一个包子')
}

七.双重for循环

for循环可以重复执行一个操作，当然也可以重复执行另一个循环，即for循环里面嵌套for循环，即双重for循环

循环的嵌套：外层循环循环一次，内层就要循环完

实例九九乘法表：

  <script>
        
            1x1=1 
            2x1=2 2x2=4 
            3x1=3 3x2=6 3x3=9 
            4x1=4 4x2=8 4x3=12 4x4=16 
            5x1=5 5x2=10 5x3=15 5x4=20 5x5=25 
            6x1=6 6x2=12 6x3=18 6x4=24 6x5=30 6x6=36 
            7x1=7 7x2=14 7x3=21 7x4=28 7x5=35 7x6=42 7x7=49 
            8x1=8 8x2=16 8x3=24 8x4=32 8x5=40 8x6=48 8x7=56 8x8=64 
            9x1=9 9x2=18 9x3=27 9x4=36 9x5=45 9x6=54 9x7=63 9x8=72 9x9=81 
        
       
      
      
        var i, j, str;
        for (i = 1; i <= 9; i++) { //第一层for循环控制行数
            str = "";
            for (j = 1; j <= i; j++) { //第二层for循环控制列数
                str += i + "x" + j + "=" + (i * j) + " "
                document.write(i+'x'+j + '=' + i*j +' ')
            }
            document.write('<br/>')
            console.log(str);
        }
    </script>

eg：

下面展示一些 内联代码片。

//利用双重for循环打印一个三角形


        for (var i = 1; i <= 5; i++) {
            //打印空格  k: 4 
            for(var k = 1; k<=5-i; k++){
                document.write('&nbsp;')
            }
            //打印星号
            for (var j = 1; j <= 2*i-1; j++) {
                document.write('*')
            }
            document.write('<br>')

        }