服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - JavaScript中的for循环与双重for循环详解

JavaScript中的for循环与双重for循环详解

2022-02-17 19:34Lumoom js教程

这篇文章主要给大家介绍了关于JavaScript中for循环与双重for循环的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

for循环

for循环就是对数组的元素进行循环。

语法:

for (初始化变量; 条件表达式; 迭代语句) {
     需要执行的代码块;
}

  • 初始化变量:一般用来对循环变量进行初始化赋值。
  • 条件表达式:作为循环条件,一个包含比较运算符的表达式,用来限定循环变量的边限。如果循环变量的值超出了该边限,则停止该循环语句的执行。
  • 迭代语句:用来改变循环变量的值,从而控制循环的次数,通常是对循环变量的值进行递增或者递减的操作。

for循环执行顺序:

// 1. 声明变量;
// 2. 判断循环执行条件;
// 3. 代码块执行;
// 4. 变量自增;

示例:求1-100的偶数和

?
1
2
3
4
5
var num=0
    for(var i=0;i<=100;i+=2){  //i+=2 意思为i=i+2
      num +=i        
    }
    console.log("偶数和:"+num)

双重for循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环语句中,可以再嵌套一个for循环,这样的for循环语句我们称之为双重for循环。

语法:

for (外层初始化变量; 外层条件表达式;外层迭代语句) {
     for (内层初始化变量;内层条件表达式; 内层迭代语句) {
         需要执行的代码块;
     }
}

  • 里层循环可看做是是外层循环的执行语句
  • 外层循环执行一次,里面循环就会执行全部

双重for循环实质:

  • 外层for循环控制循环的高度(行数);
  • 内层for循环控制循环的宽度(列数);

示例:输出九九乘法表

?
1
2
3
4
5
6
for(var i= 0 ; i <=9 ; i++){
    for(var aa = 1 ; aa <i+1 ; aa++){
      document.write(aa+"*"+i+"="+i*aa);
    }
    document.write("<br />");
  }

可以添加一些样式让它更美观(添加span元素,定义body主体部分的宽度,将span元素改为inline-block行内块元素,设置其固定宽度)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
<style> body{
    width:2000px;
  }
  span{
    display:inline-block;
    width:80px;
  } </style>
</head>
<body>
<script> for(var i= 0 ; i <=9 ; i++){
     for(var aa = 1 ; aa <i+1 ; aa++){ document.write("<span>"+aa+"*"+i+"="+i*aa+"</span>");
     }
     document.write("<br />");
   } </script>
</body>

总结

到此这篇关于JavaScript中的for循环与双重for循环的文章就介绍到这了,更多相关JavaScript双重for循环内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://segmentfault.com/a/1190000039414649

延伸 · 阅读

精彩推荐
  • js教程原生JavaScript实现换肤

    原生JavaScript实现换肤

    这篇文章主要为大家详细介绍了原生JavaScript实现换肤,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    weixin_441349728772022-01-21
  • js教程JavaScript仿京东轮播图效果

    JavaScript仿京东轮播图效果

    这篇文章主要为大家详细介绍了JavaScript仿京东轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    不是七七子5582022-01-24
  • js教程原生JS实现音乐播放器的示例代码

    原生JS实现音乐播放器的示例代码

    这篇文章主要介绍了原生JS实现音乐播放器的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友...

    单线程_016972022-01-22
  • js教程js实现鼠标切换图片(无定时器)

    js实现鼠标切换图片(无定时器)

    这篇文章主要为大家详细介绍了js实现鼠标切换图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    枫思然8172022-01-10
  • js教程如何使用原生Js实现随机点名详解

    如何使用原生Js实现随机点名详解

    这篇文章主要给大家介绍了关于如何使用原生Js实现随机点名的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习...

    CV_Di8162021-12-27
  • js教程Javascript 模拟mvc实现点餐程序案例详解

    Javascript 模拟mvc实现点餐程序案例详解

    这篇文章主要介绍了Javascript 模拟mvc实现点餐程序案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参...

    LiOnTalKING12192021-12-18
  • js教程JS+JQuery实现无缝连接轮播图

    JS+JQuery实现无缝连接轮播图

    这篇文章主要介绍了JS+JQuery实现无缝连接轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    南柯Seven7712021-12-23
  • js教程js实现调用网络摄像头及常见错误处理

    js实现调用网络摄像头及常见错误处理

    这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    飞灰4582022-02-13