javaScript中的循环语句

初学小徐

已于 2023-10-09 10:48:24 修改

阅读量188

点赞数

文章标签： javascript 开发语言

于 2023-09-25 11:31:12 首次发布

本文链接：https://blog.csdn.net/weixin_48735790/article/details/133018321

版权

循环结构

while循环

循环是指重复执行一些操作，因此while循环指的是在满足条件期间，重复执行某些代码

基本语法：

while（循环条件）{
要重复执行的代码（循环体）
}
释义：
与if比较相似，都是需要满足小括号里的条件，并且为true才会进入执行循环体
while循环只要满足小括号中的条件就会一直执行循环体，直到不满足小括号中的条件，才会跳出大括号，结束循环
三要素包括：变量起始值，终止条件，变量变化值（使用自增或自减）

案例

案例1. 页面输出1~100
思路：利用i，将i和数字进行比较

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
      let i=1
      while(i<=100){
        document.write(`${i}<br>`)
        i++
      }
    </script>
  </body>
</html>

案例2. 计算1加到100的总和并输出
思路:

声明一个变量，该变量是累计和。用sum表示
每次将i添加到sum里面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
      let i = 1;
      let sum = 0;
      while (i <= 100) {
        sum += i;
        i++;
      }
      document.write(`${sum}`);
    </script>
  </body>
</html>

案例3：计算1~100之间的所有偶数和
思路：

声明累加和的变量sum
首先利用 if 语句把i里面的偶数筛选出来
把筛选出来的 i 加到sum中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
      let i = 0;
      let sum = 0;
      while (i <= 100) {
        if (i % 2 == 0) {
          sum += i;
        }
        i++;
      }
      document.write(`${sum}`);
    </script>
  </body>
</html>

循环的结束
break：退出整个循环。一般用于结束已经得到，后续循环不需要的时候可以使用
continue：结束本次循环，继续下次循环。一般用于排除或者跳过某一个选项的时候，可以使用continue

for循环

基本使用

语法

for(变量起始值；终止条件；变量变化量){
	代码段
	}

退出循环
break：退出for循环。一般用于结束已经得到，后续循环不需要的时候可以使用
continue：结束本次循环，继续下次循环。一般用于排除或者跳过某一个选项的时候，可以使用continue

案例

案例1:求1~100之间的所有偶数和

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
        let sum= 0;
        for(let i =1;i<=100;i++){
            if(i%2==0){
                sum+=i;
            }
        }document.write(sum)
    </script>
  </body>
</html>

案例1：遍历数组中的内容，并打印出来
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
        
        let arr=['a','b','c','d','e']
        for(let i=0;i<arr.length;i++){
            document.write(arr[i])
        }
    </script>
  </body>
</html>

嵌套

语法：

for(外部循环次数的变量；循环条件；变量变化量){
	for(内部循环次数的变量；循环条件；变量变化量){
	代码段
	}
}

案例

案例1： 页面中打印出5行5列的⭐
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
      for (let i = 1; i <= 5; i++) {//外部打印行数
        for (let j = 1; j <= 5; j++) {
          document.write("⭐");
        }
        document.write(`<br>`);
      }
    </script>
  </body>
</html>

案例1： 9*9乘法表
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
    let sum=0;
      for (let i = 1; i <= 9; i++) {//外部打印行数
        for (let j = 1; j <= i; j++) {
            sum=j*i
          document.write(`${j}*${i}=${sum} `);
        }
        document.write(`<br>`);
      }
    </script>
  </body>
</html>

总结：

for和while循环有什么区别？
当明确循环次数时，推荐使用for循环
当不明确循环次数时，推荐使用while循环
了解
while(true)来构造“无限”循环，需要使用break来结束循环
for(; ;)也是可以构造“无限”循环。因为没有开头，也没有限制的条件，因此也需要使用break来结束循环

补充知识：

断点调试

断点：在某句代码上添加的标志，当程序执行到这句有标记的代码时会暂停下来
作用是能够更好的理解代码运行，并且在工作中更快的找到bug
步骤：

按F2打开开发者工具
点到sources一栏
选择代码文件
确定代码位置后，刷新网页
点击下一步的小标志就可以查看每一步的数据
如图所示：选择需要断点的位置，每一步都可以看到数据的变化

我们使用这两个小标志来进行下一步的操作

想要进入函数体内进行断点，需要点击旁边的箭头，如以下图片所示。

初学小徐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javaScript中的循环语句

for和while循环有什么区别？当明确循环次数时，推荐使用for循环当不明确循环次数时，推荐使用while循环了解while(true)来构造“无限”循环，需要使用break来结束循环for(;;)也是可以构造“无限”循环。因为没有开头，也没有限制的条件，因此也需要使用break来结束循环。
复制链接

扫一扫