前端研习录（21）——JavaScript循环语句合集

最新推荐文章于 2023-01-10 00:47:43 发布

清风不渡

最新推荐文章于 2023-01-10 00:47:43 发布

阅读量252

点赞数

分类专栏：前端研习录文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/WXKKang/article/details/126186141

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（21）——JavaScript循环语句合集

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入JavaScript循环语句部分

一、for语句

for语句就是循环命令，可以指定循环的起点、终点和终止条件，语法如下：

for(初始化表达式 ; 布尔表达式 ; 迭代因子){
语句A;
}

初始化表达式：确定循环变量的初始值，只在循环开始时执行一次。
布尔表达式：每轮循环开始时，都要执行这个表达式，只有返回值为true，才能继续循环。
迭代因子：每轮循环的最后一个操作，通常用来递增循环变量。

示例如下：

<!DOCTYPE html>
<html lang="en">
<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>清风不渡</title>
</head>
<body>
    <script>
        var num ;
        for (num = 1 ; num <= 10 ; num++){
            console.log("今天是爱你的第"+num+"天~~~")
        }
        
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

当然，for循环也是可以进行嵌套执行的，如下：

示例：通过for循环打印出九九乘法表，代码如下：

<!DOCTYPE html>
<html lang="en">
<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>清风不渡</title>
</head>
<body>
    <script>
        var x;
        var y;
        for (x=1 ; x<=9 ; x++){
            document.write("</br>")
            for (y=1 ; y<=x ;y++){
                document.write("<span>"+y+"*"+x+"="+x*y+"</span>"+"&emsp;")
            }
        }
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

二、while语句

while循环包括一个条件和一个代码块，只要条件为真，就会不断的循环执行代码块，语法如下：

while (条件) {
代码块;
}

示例如下：

<!DOCTYPE html>
<html lang="en">
<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>清风不渡</title>
</head>
<body>
    <script>
        var num = 1;
        while (num<=10) {
            console.log("今天是爱你的第"+num+"天~~~");
            num++;
        }
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

注意：while循环内部代码块中必须要有一段代码来保证while循环有终止，不然会陷入死循环

三、break语句和continue语句

break和continue都是跳出的意思，区别在于break为直接跳出不再执行，continue为跳出当前循环返回循环头部，进入下一次循环。

1、break语句

我们通过下面这段代码来解读break语句的作用

<!DOCTYPE html>
<html lang="en">
<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>清风不渡</title>
</head>
<body>
    <script>
        var num = 1;
        while (num<=10) {
            if (num === 6){
                console.log("今天是第"+num+"天，我想休息一天~")
                break;
            }
            console.log("今天是爱你的第"+num+"天~~~");
            num++;
        }
    </script>
</body>
</html>

执行结果如下：
在这里插入图片描述
可以看出，当到第六天的时候，一休息就没有下文了，说明在num到6的时候是直接跳出了这个循环，并且循环已结束，这就是渣男break。

2、continue语句

我们通过下面这段代码来解读continue语句的作用

<!DOCTYPE html>
<html lang="en">
<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>清风不渡</title>
</head>
<body>
    <script>
        var num = 1;
        while (num<=10) {
            if (num === 6){
                console.log("今天是第"+num+"天，我想休息一天~")
                num++;
                continue;
            }
            console.log("今天是爱你的第"+num+"天~~~");
            num++;
        }
    </script>
</body>
</html>