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

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

for循环

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

语法:

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

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

for循环执行顺序:

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

示例:求1-100的偶数和

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循环控制循环的宽度(列数);

示例:输出九九乘法表

 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行内块元素,设置其固定宽度)

<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循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS面试题之如何判断两个数组的内容是否相等

    JS面试题之如何判断两个数组的内容是否相等

    这篇文章主要为大家详细介绍了JavaScript面试的常考题,即如何判断两个数组的内容是否相等,文中的示例方法讲解详细,需要的小伙伴可以参考一下
    2023-10-10
  • 动态的创建一个元素createElement及删除一个元素

    动态的创建一个元素createElement及删除一个元素

    本文用示例为大家介绍下动态创建一个元素createElement及删除一个元素,感兴趣的朋友可以参考下
    2014-01-01
  • JavaScript 作用域链解析

    JavaScript 作用域链解析

    一直对Js的作用域有点迷糊,今天偶然读到Javascript权威指南,立马被吸引住了,写的真不错。我看的是第六版本,相当的厚,大概1000多页,Js博大精深,要熟悉精通需要大毅力大功夫。谢谢心得吧
    2014-11-11
  • JavaScript实现三级级联特效

    JavaScript实现三级级联特效

    这篇文章主要介绍了JavaScript实现三级级联特效,选择省会出现相应的县下拉框,同时市的下拉框改变,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • JavaScript开发人员的10个关键习惯小结

    JavaScript开发人员的10个关键习惯小结

    还在一味没有目的的编写JavaScript代码吗?那么你就OUT了!让我们一起来看看小编为大家搜罗的JavaScript开发人员应该具备的十大关键习惯吧
    2014-12-12
  • avalon js实现仿google plus图片多张拖动排序附源码下载

    avalon js实现仿google plus图片多张拖动排序附源码下载

    这篇文章主要介绍了avalon js实现仿google plus图片多张拖动排序附源码下载的相关资料,需要的朋友可以参考下
    2015-09-09
  • js实现随机点名器精简版

    js实现随机点名器精简版

    这篇文章主要为大家详细介绍了js实现随机点名器的精简版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 简单了解JavaScript中常见的反模式

    简单了解JavaScript中常见的反模式

    这篇文章主要介绍了简单了解JavaScript中常见的反模式,反模式 是指对反复出现的设计问题的常见的无力而低效的设计模式,俗话说就是重蹈覆辙。 这篇文章描述了 JavaScript 中常见的一些反模式,以及避免它们的办法。,需要的朋友可以参考下
    2019-06-06
  • js 点击按钮弹出另一页,选择值后,返回到当前页

    js 点击按钮弹出另一页,选择值后,返回到当前页

    js 点击按钮弹出另一页,选择值后,返回到当前页,其实主要用于cms系统中,相关文章的搜索,要在已上传目录中选择一些图片等。
    2010-05-05
  • 微信小程序--onShareAppMessage分享参数用处(页面分享)

    微信小程序--onShareAppMessage分享参数用处(页面分享)

    本篇文章主要介绍了微信小程序的页面分享onShareAppMessage分享参数用处的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04

最新评论