JavaScript 进阶第二章(循环结构 )

简介: JavaScript 进阶第二章(循环结构 )

while循环结构


1.语法:


while(条件 true/false){

       循环体/需要重复执行的代码;

   }


执行步骤:


1.判断条件是否成立


1.1 如果成立,执行循环体代码,然后重复步骤1


1.2 如果不成立,结束循环,执行大括号后面的代码


3.注意点


(1)小括号中的语句,无论结果是什么都会转换成布尔类型来判断是否成立


(2)避免写一个死循环


代码演示:

<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>


do-while循环结构


  • 1.语法


do{

   循环体;

}while( 条件 );


  • 2.执行过程


1.先执行循环体代码


2.执行条件语句

如果结果为true,执行循环体代码

如果为false,循环结束


3.重复步骤2


  • 3.do-while和while实现的循环其实是一样的,只有一个不同点:do-while循环不管怎样先执行一次循环体代码,然后再判断条件


while循环:先奏后斩(先判断条件再执行循环体)


do-while循环:先斩后奏(不管怎样先执行一次循环体代码,然后再判断条件)


代码演示:

<script>
    //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>


循环结构总结


1.原则上,三种循环结构语句之间可以互转,只不过每一种语句的适用场景不一样


2.最常用:for循环:适合循环次数固定


3.while循环:适合循环次数不固定


4.do-while循环:适合循环次数不固定,但是循环体代码至少要执行一次


相关文章
|
1天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
1天前
|
JavaScript 前端开发 算法
JavaScript 中的 if 判断:深入理解、实战应用与进阶技巧
【4月更文挑战第7天】探索 JavaScript 中的 if 判断语句,它是构建逻辑清晰程序的基础。了解其概念、语法、应用示例及编程技巧,包括条件控制、else if 结构、三目运算符。注意条件表达式简洁性,避免 falsy 值陷阱,利用逻辑运算符优化,并减少 if 嵌套。实践这些技巧将提升编程能力和代码质量。
24 0
|
1天前
|
数据采集 Web App开发 JavaScript
JavaScript爬虫进阶攻略:从网页采集到数据可视化
JavaScript爬虫进阶攻略:从网页采集到数据可视化
|
1天前
|
JavaScript 前端开发
JavaScript进阶知识汇总~(一)
JavaScript进阶知识汇总~(一)
|
7月前
|
自然语言处理 JavaScript 前端开发
JavaScript进阶 第一天笔记
JavaScript进阶 第一天笔记
464 0
|
7月前
|
JavaScript 前端开发 API
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(六)
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(六)
71 0
|
1天前
|
JavaScript 前端开发
JavaScript 中运算符优先级:理解规则、实战应用与进阶技巧
【4月更文挑战第6天】了解 JavaScript 运算符优先级是编写清晰无误代码的关键。优先级规则决定了运算的顺序,从高到低包括一元、乘性、加性、关系、相等性等运算符。掌握优先级能避免逻辑错误,例如在表达式 `a * b + c` 中,乘法先于加法执行。实际应用中,使用括号可以明确运算顺序,提高代码可读性。注意避免混淆优先级,如赋值与比较操作。利用优先级简化逻辑判断,遵循编码规范,提升编程技能。通过不断学习和实践,加深对运算符优先级的理解,优化代码质量。
18 0
|
1天前
|
存储 JSON JavaScript
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-(三)
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-
40 1
|
1天前
|
JavaScript 前端开发 算法
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-(二)
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-
29 0
|
1天前
|
Web App开发 JavaScript 前端开发
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-(一)
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-
63 0