【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循环语句,它写法更简洁直观

目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
69 32
|
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
|
4月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
43 2
|
5月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
5月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
49 0
|
缓存 JavaScript 前端开发
JavaScript 的几种循环方式
学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~ >如果大家喜欢,可以点赞或留个言哦💕~~~~,谢谢大家⭐️⭐️⭐️~~~
108 0
|
JavaScript 前端开发 索引
JavaScript的几种循环方式
JavaScript提供了许多通过LOOPS迭代的方法。本教程解释了现代JAVASCRIPT中各种各样的循环可能性 目录: for forEach do...while while for...in for...of for...in vs for...of 介绍 JavaScript提供了许多迭代循环的方法。
1024 0

热门文章

最新文章