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循环:适合循环次数不固定,但是循环体代码至少要执行一次


相关文章
|
5月前
|
前端开发 JavaScript 开发者
JavaScript进阶-Promise与异步编程
【6月更文挑战第20天】JavaScript的Promise简化了异步操作,从ES6开始成为标准。Promise有三种状态:pending、fulfilled和rejected。基本用法涉及构造函数和`.then`处理结果,如: ```javascript new Promise((resolve, reject) =&gt; { setTimeout(resolve, 2000, &#39;成功&#39;); }).then(console.log); // 输出: 成功
89 4
|
5月前
|
存储 JavaScript 前端开发
JavaScript进阶-Map与Set集合
【6月更文挑战第20天】JavaScript的ES6引入了`Map`和`Set`,它们是高效处理集合数据的工具。`Map`允许任何类型的键,提供唯一键值对;`Set`存储唯一值。使用`Map`时,注意键可以非字符串,用`has`检查键存在。`Set`常用于数组去重,如`[...new Set(array)]`。了解它们的高级应用,如结构转换和高效查询,能提升代码质量。别忘了`WeakMap`用于弱引用键,防止内存泄漏。实践使用以加深理解。
78 3
|
4月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
144 24
|
4月前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
58 1
|
4月前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第4天】JavaScript的Web Workers和Service Worker增强了Web性能。Web Workers处理后台多线程,减轻主线程负担,但通信有开销,受同源策略限制。Service Worker则用于离线缓存和推送通知,需管理其生命周期、更新策略,并确保安全。两者都带来了挑战,但也极大提升了用户体验。通过理解和优化,开发者能构建更高效、安全的Web应用。
125 2
|
4月前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
49 2
|
4月前
|
设计模式 前端开发 JavaScript
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第1天】JavaScript设计模式增进代码复用和维护性。单例模式确保唯一实例,用闭包防止命名冲突和控制状态访问。观察者模式实现一对多依赖,通过解绑避免内存泄漏。工厂模式封装对象创建,适度使用避免复杂度。装饰者模式动态添加行为,保持简洁以保可读性。理解模式的优缺点,灵活应用,提升代码质量。
128 3
|
4月前
|
存储 前端开发 安全
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第2天】探索Web存储:localStorage持久化,sessionStorage会话限定,cookies则伴随HTTP请求。了解它们的特性和限制,如localStorage的5MB容量限制、跨域问题,sessionStorage的生命周期,及cookies的安全与带宽消耗。使用时需权衡安全、效率与应用场景。示例代码展示存储与检索方法。
288 2
|
5月前
|
JavaScript 前端开发
JavaScript进阶-Class与模块化编程
【6月更文挑战第21天】**ES6引入Class和模块化,提升JavaScript的代码组织和复用。Class是原型机制的语法糖,简化面向对象编程。模块化通过`import/export`管理代码,支持默认和命名导出。常见问题包括`this`指向和循环依赖。理解这些问题及避免策略,能助你写出更高效、可维护的代码。**
63 5
|
5月前
|
JavaScript 前端开发 开发者
JavaScript进阶-解构赋值与展开运算符
【6月更文挑战第19天】ES6的解构赋值与展开运算符增强了JS开发效率。解构允许直接从数组或对象提取值,简化数据提取,而展开运算符则用于合并数组和对象或作为函数参数。解构时注意设置默认值以处理不存在的属性,避免过度嵌套。展开运算符需区分数组与对象使用,勿混淆于剩余参数。通过示例展示了这两种操作在数组和对象中的应用,提升代码可读性与简洁度。
149 5
下一篇
无影云桌面