while 循环和 for 循环的区别

zheshihuahua

已于 2024-04-26 10:48:11 修改

阅读量673

点赞数 6

文章标签：大数据

于 2022-07-14 21:29:33 首次发布

本文链接：https://blog.csdn.net/zheshihuahua/article/details/125793262

版权

while 循环语法：

while(循环条件){

    要重复执行的代码（循环体）

}

执行流程

1.先判断循环条件

1.1 如果条件成立，则执行循环体代码

1.2 如果条件不成立，则结束循环语句

2.重复步骤1

循环需要具备三要素：

1.循环变量

2.循环条件（没有终止条件，循环会一直执行，造成死循环）

3.循环变量自增（用自增或者自减）

   let  i  = 1  <!--循环变量-->


   while  ( i <=  3 ) {    <!--循环条件-->
  
       document.write('我会循环三次') <br>

       i++  <!--循环变量自增-->
 

       }

循环条件可以是如下代码：

1.关系表达式：结果一定是布尔类型

2.布尔类型值

3.其他数据：编译器会默认转成布尔类型判断是否成立

for循环

在介绍for循环之前我们先了解了解 for循环和while循环有什么区别呢：

当如果明确了循环的次数的时候推荐使用for循环

for循环场景：循环次数确定

当不明确循环的次数的时候推荐使用while循环

while循环场景：循环次数不确定

for循环语法：

        for ( 语句1 , 语句2 ,语句3 ){

             循环体
       }

执行规则

1.执行语句1（声明循环变量）

2.判断语句2结果是否为true（循环条件）

2.1 true ：则执行循环体

2.1.1 ：执行语句3（循环变量自增）

2.2 false:循环结束

3.重复步骤2

退出循环：

循环结束： continue：结束本次循环体，继续下次循环

break：结束整个循环语句，跳出所在的循环（使用最多）

注意点： continue:只能用于循环语句 break：可以用于结束循环语句 + switch-case分支语句

for 循环嵌套：

    for ( 外部声明记录循环次数的变量； 循环条件； 变化值 ){

        for ( 内部声明记录循环次数的变量； 循环条件；变化值 ){

          循环体

        }

       }

例如九九乘法表就是for循环嵌套：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 此处是盒子的样式 */
        div {
            display: inline-block;
            width: 100px;
            border: 2px solid skyblue;
            margin: 2px;
            text-align: center;
        }
    </style>
</head>

<body>
    <script>
        // for循环
        for (let i = 1; i <= 9; i++) {
            for (let f = 1; f <= i; f++) {
                document.write(`<div >${f} X ${i} = ${f * i}</div>`)
            }
            document.write(`<br>`)
        }
    </script>
</body>

再举个三角形的小爱心的栗子：

  <script>
        // 思路：外层每一行 ，跟内层里面小星星的个数是一样的，所以内层小星星可以等于外层的循环数（第五行里面有五个小星星）
        for (let i = 1; i <= 10; i++) {
            for (let j = 1; j <= i; j++) {
                document.write("♥")
            }
            document.write("<br>")
        }
           
        for (let i = 1; i <= 10; i++) {
            for (let j = i; j <= 10; j++) {
                document.write("♥")
            }
            document.write("<br>")
        }
    </script>