【JavaScript】三种循环结构的总结

101茂茂

已于 2022-04-06 22:43:08 修改

阅读量209

点赞数

文章标签：前端 javascript

于 2022-04-06 22:42:16 首次发布

本文链接：https://blog.csdn.net/weixin_64691270/article/details/124002412

版权

while循环结构

循环三要素
- 起始值
- 条件
- 变量的变化
1.语法：

while(条件 true/false){
    循环体/需要重复执行的代码;
}

执行步骤：
- 1.判断条件是否成立
  - 1.1 如果成立，执行循环体代码，然后重复步骤1
  - 1.2 如果不成立，结束循环，执行大括号后面的代码
3.注意点
- （1）小括号中的语句，无论结果是什么都会转换成布尔类型来判断是否成立
- （2）避免写一个死循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    //需求：打印 3 次 '我爱大前端'

    //复制粘贴弊端：（1）代码冗余  （2）不便于维护
    // console.log ( "我爱大前端" );
    // console.log ( "我爱大前端" );
    // console.log ( "我爱大前端" );

    
    /*
    1.循环结构 ： 代码重复执行

    2. 语法
        while(条件 true/false){
            循环体 ：需要重复执行的代码
        };

    执行步骤
        1. 判断条件是否成立
            2.1 成立：执行循环体代码。 重复步骤1
            2.2 不成立，循环语句结束，执行大括号后面的代码

    */
    let i = 1;//循环变量，记录循环次数
    while(i<=3){
        console.log ( "我爱大前端" );
       i++;循环变量自增  自增的目的是为了控制循环的次数，否则这是一个死循环
    }
    console.log('111');//大括号外的代码与循环结构没有关系，还是顺序执行


   //循环语句注意点：
    //循环语句注意点：
    //(1)小括号中的语句，无论结果是什么都会转换成布尔类型来判断是否成立
    //(2)避免写一个死循环
    //let num = 1;
    // while(num < 10){
    //     console.log ( num );
    //     num++;//改变循环变量的值，可以避免死循环
    // }

</script>
</body>
</html>

do-while循环结构

1.语法:

do{
    循环体;
}while( 条件 );

2.执行过程
- 1.先执行循环体代码
- 2.执行条件语句
  - 如果结果为true，执行循环体代码
  - 如果为false，循环结束
- 3.重复步骤2
3.do-while和while实现的循环其实是一样的，只有一个不同点：do-while循环不管怎样先执行一次循环体代码，然后再判断条件
- while循环：先奏后斩（先判断条件再执行循环体）
- do-while循环：先斩后奏（不管怎样先执行一次循环体代码，然后再判断条件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<script>

    /* 1. 学习目标 ： do-while循环 
       
       2. 学习路线
            (1)复习while语法特点
            (2)学习do-while语法
            (3)介绍do-while语法应用场景
    
    */


    //1.while循环:
    //let i = 1;
    // while(i > 5){
    //     //循环条件不成立，循环体一次都不执行
    //     console.log ( "哈哈哈哈" );
    //     i++
    // }

    //2.do-while循环
    /**
     do-while语法：(用的很少)

     do{
            循环体;
        }while( 条件 );

     特点：无论如何先执行一次循环体，然后再去判断条件
     */
    let i = 1;
        do{
            console.log ( "呵呵呵呵呵" );
            i++;
        }while (i > 5);



    //while循环：先奏后斩（先判断条件再执行循环体）
    //do-while循环：先斩后奏（不管怎样先执行一次循环体代码，然后再判断条件）


    //3.do-while循环与while循环应用场景
    //无论如何需要先执行一次循环体，使用do-while代码更简洁

    //例子：让用户输入账号和密码，如果输入正确就登陆成功，如果输入错误就让他一直输入

    //while循环实现
    // let username = prompt('请输入账号');
    // let password = prompt('请输入密码');
    //
    // while(username != 'admin' || password != '123456'){
    //     username = prompt('请输入账号');
    //     password = prompt('请输入密码');
    // }

    //do-while实现
    do{
        let username = prompt('请输入账号');
        let password = prompt('请输入密码');
    }while(username != 'admin' || password != '123456')

</script>
</body>
</html>