【JavaScript-循环-js循环你学懂了吗】

简介: 【JavaScript-循环-js循环你学懂了吗】

双重for循环(循环嵌套)


语句结构


for (外层的初始化变量;外层的条件表达式;外层的操作表达式){

for (里层的初始化变量;里层的条件表达式;里层的操作表达式){

执行语句;>  }

}


<script>
  for(var i = 1 ;i<=3 ; i++){
      console.log('外层循环第'+i+'次');
      for(var j = 1 ; j<=2 ; j++){
          console.log('内循环第'+j+'次');
      }
  }
    </script>


下面我们来看几个有关循环的案例:


山鱼案例教学

1.如何用for循环嵌套打印五行小星星?

<script>
    var str = '';
    for(var i = 1;i<=5;i++){//外循环五次,形成五行
        console.log('');
        for(var j = 1; j<=5;j++){//内循环打印五个星星
            str =str + '★';
        }
        str = str+'\n';//外循环每循环一次就要进行换行,这样才能进行五行排列
    }
    console.log(str);//最后得出五行排列的效果
    </script>


2.如何用for循环嵌套打印倒三角?

<script>
        var str = '';
    for(var i = 1;i<=10;i++){
        for(var j = i;j<=10;j++){
            str=str+'O';
        }
        str = str+'\n';
    }
    console.log(str);
 </script>


小星星和小三角结束了,那我们再来看一下while这个家伙


while循环

  1. while 循环语法结构 while 当...的时候

 2.执行思路当条件表达式结果为true则执行循环体否则退出循环


<script>

   // 1. while 循环语法结构 while 当...的时候

   // 2.执行思路当条件表达式结果为true则执行循环体否则退出循环

   // while (条件表达式)

   //      循环体;

// }
    var i = 1;
    while(i<=100){
        console.log('这个人今年'+i+'岁');
        i++;        
    }
    </script>


下面用一个小案例来看一下while


案例:你啊吃香菜吗

条件:


① 弹出输入框,要求用户输入。


② 判断条件比较复杂我们使用while循环。


③ while 循环语句中的条件表达式只要输入的不是“我爱吃”,就一直循环。


<script>
        var message = prompt('你爱吃香菜吗?');
        while(message !=='我爱吃'){
          message = prompt('你爱吃香菜吗?');
        }
          alert('我也爱吃!');
    </script>


while的表弟do while循环

语句结构:


<script>
    do{
        console.log('im,fine.thanks');
        i++;
    }while(i<=100);
    </script>


①先执行1次循环体代码

②再执行条件表达式,如果结果为true ,则继续执行循环体代码,如果为false ,则退出循环,继续执行后面。

代码

区别: 执行思路跟while不同的地方在于do while 先执行一次循环体在判断条件,而while是先判断在执行。


总结:


1.JS中循环有for、 while、do while

2.三个循环大多情况下都可以相互替代使用

3.如果是用来计次数,跟数字相关的,三者使用基本相同,但是for循环使用的更多一些

4.while和do…while可以做更复杂的判断条件,比for循环灵活一些

5.while和do…while执行顺序不一样, while先判断后执行, do…while先执行一次 ,再判断执行

6.while和do…while执行次数不一样, do…wvhile 至少会执行一次循环体,而while可能一次也不执行

7、实际工作中,更常用for循环语句,它写法更简洁直观

目录
相关文章
|
10天前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
1月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
75 32
|
10天前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
10天前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
4月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
4月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
4月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
存储 JavaScript 前端开发
JavaScript与PHP中正则
有个在线调试正则的工具,点击查看工具。下面的所有示例代码,都可以在codepen上查看到。
JavaScript与PHP中正则
|
JavaScript 前端开发 PHP

热门文章

最新文章