JS循环嵌套的执行原理
【逆战班】
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,外循环执行一次,内循环全部执行完,直到外循环执行完毕,整个循环结束。
while、do.. while和for循环语句都可以进行嵌套,并且他们之间可以进行互相嵌套。最常见的是在for循环中嵌套for循环。格式如下:
for (循环变量初始值; 循环条件; 步长)
{
循环体
.......
for (循环变量初始值; 循环条件; 步长)
{
循环体
........
}
}
例子一:
利用循环嵌套输出一个金字塔形状的三角形:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
for (var j = 1; j <= 5; j++) {//外层循环表示有多少行
for(var k=1;k<=5-j;k++){//内层循环体一:控制每一层开始输出及格空格符
document.write(' ');
}
for (var i = 1; i <= j; i++) {//内层循环体二:控制输出 * 的个数
document.write('* ');
}
document.write('<br>');//每打印一行进行换行操作
}
</script>
</body>
</html>
运行结果如下:

在其中定义了两层 for 循环,分别为外层循环和内层循环,外层循环用于控制输出的行数。内层循环体一用于控制每一行开始输出空格的个数,内层循环体二用于控制每一行输出“* ”的个数,最后输出一个三角形。具体执行步骤如下:
第一步:执行外层循环,定义变量j并赋值为1,j<=5结果为true,进入外层循环。
第二步:执行内层循环体一,定义变量k并赋值为1,此时j的值为1,k<=5-1结果为true ,进入内存循环体一。
第三部:执行内存循环体一的语句,输出一个空格符。
第四部:执行内层循环体一的步长k++;此时k=2。
第五步:继续执行内层循环体一,执行顺序同第二、三、四步一样,直到k=5内层循环体一执行完毕,第一行输出四个空格符。
第六步:执行内层循环体二,定义变量i并赋值为1,i<=1结果为true,进入内层循环体二。
第七部:执行内层循环体二的语句,输出一个“* ”。
第八部:执行内层循环体一的步长i++;此时i=2。
第九步:继续执行内层循环体二,i<=1结果为false,结束内层循环体二。
第十步:执行外层循环语句,换行。
第十一步:执行外层循环的步长j++;此时j=2。
第十二步:继续执行外层循环,职业顺序同第一到第十一步。直到j=6整体循环完毕,输出一个三角形。
例子二;
百鸡百钱 : 有一百钱 要买一百鸡,公鸡5钱1只,母鸡3钱1只,仔鸡3只1钱 ,一百钱买一百鸡,每种鸡都要有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
for(var x=1;x<=98;x++){//外层循环控制公鸡数量
for(y=1;y<=98;y++){//中间循环控制母鸡数量
for(z=1;z<=98;z++){//内层循环控制仔鸡数量
if(x*5+y*3+z*1/3==100&&x+y+z==100){//在if语句中写出条件表达式
console.log(`公鸡有${x}只,母鸡有${y}只,仔鸡有${z}只`);//在控制台输出结果
}
}
}
}
</script>
</body>
</html>
运行结果如下:

在其中定义了三层循环结构,外层循环控制公鸡数量,中间循环控制母鸡数量,内层循环控制仔鸡数量。具体执行步骤如下:
第一步:执行外层循环,定义变量x并赋值为1,x<=98结果为true,进入外层循环。
第二步:执行中间循环,定义变量y并赋值为1,y<=98结果为true,进入中间循环。
第三部:执行内层循环,定义变量z并赋值为1,z<=98结果为true,进入内层循环。
第四步:执行if 语句,进行条件判断,结果为false,结束if 语句。
第五步:执行内层循环的步长z++;此时z=2。
第六步:继续执行内层循环,直到z=99,结束内层循环。
第七步;执行中间循环的步长y++,此时y=2。
第八步:执行中间循环,y<=98结果为true。进入中间循环。
第九步:执行内层循环,步骤同第三至第六步。
第十步:执行中间循环,直到y=99,结束中间循环。
第十一步:执行外层循环的步长x++,此时x=2。
第十二步:直到x=99整体循环结束。
JS循环嵌套的执行原理的更多相关文章
- js解析器的执行原理
首先看一段代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- 问题记载——keil中写for循环嵌套
还是上次的工程,LED灯闪烁.我今天回想一下感觉上次调试的时候还是有点问题,LED0 1和0的翻转时间很奇怪. 所以今天又打开看了看,单步调试,发现for循环嵌套只执行前一个循环,后一个循环根本不执行 ...
- 【JS中循环嵌套常见的六大经典例题+六大图形题,你知道哪几个?】
首先,了解一下循环嵌套的特点:外层循环转一次,内层循环转一圈. 在上一篇随笔中详细介绍了JS中的分支结构和循环结构,我们来简单的回顾一下For循环结构: 1.for循环有三个表达式,分别为: ①定义循 ...
- JS循环+循环嵌套+经典例题+图形题
首先,了解一下循环嵌套的特点:外层循环转一次,内层循环转一圈. 在上一篇随笔中详细介绍了JS中的分支结构和循环结构,我们来简单的回顾一下For循环结构: 1.for循环有三个表达式,分别为: ①定义循 ...
- JS中for循环嵌套
for 循环 for语句也是一种前测试循环语句,但它具有在 执行循环之前初始化变量 和 定义循环后要执行的代码的能力 for循环中专门提供了位置来放置循环的三个表达式 定义一个循环需要做实现这三步: ...
- 老李推荐:第5章7节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 循环获取并执行事件 - runMonkeyCycles
老李推荐:第5章7节<MonkeyRunner源码剖析>Monkey原理分析-启动运行: 循环获取并执行事件 - runMonkeyCycles poptest是国内唯一一家培养测试开 ...
- 更快的理解js中循环嵌套
[循环控制语句] break语句:终止本层循环,继续执行循环后面的语句:(当循环有多层时,break只会跳出一层循环) continue语句:跳过本次循环,继续执行下次循环: (对于for循环,con ...
- JS流程控制语句 退出循环break 在while、for、do...while、while循环中使用break语句退出当前循环,直接执行后面的代码。
退出循环break 在while.for.do...while.while循环中使用break语句退出当前循环,直接执行后面的代码. 格式如下: for(初始条件;判断条件;循环后条件值更新) { i ...
- JS疑难点和GC原理
js解析与序列化json数据(一)json.stringify()的基本用法: 对象有两个方法:stringify()和parse().在最简单的情况下,这两个方法分别用于把JavaScript对象序 ...
随机推荐
- JVM如何判断对象能否被回收
•写在前面说起Java和C++,很容易想到让人疯狂的指针,Java使用了内存动态分配和垃圾回收技术,让我们从C++的各种指针问题中摆脱出来,更加专心于业务逻辑,不过如果我们需要深入了解java的JVM ...
- Python-scapy学习
scapy-arpspoof from scapy.all import Ether,ARP,sendp,getmacbyip Ether:用来构建以太网数据包 ARP:构建ARP数据包的类 send ...
- python掉包侠与深浅拷贝
今日所得 包 logging模块 hashlib模块 openpyxl模块 深浅拷贝 包 在学习模块的时候我们了解过模块的四种表现形式,其中的一种就是包. 什么是包? 它是一系列模块文件的结合体,表示 ...
- css3 transform 变形属性详解
本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...
- python多线程交替打印abc以及线程池进程池的相关概念
import threading import sys import time def showa(): while True: lockc.acquire() #获取对方的锁,释放自己的锁 prin ...
- spring学习笔记三:Component注解(把POJO类实例化到spring的IOC容器中)
Component注解:把普通的POJO 类实例化到spring的IOC容器中,就是定义成<bean id="" class=""> 项目目录树: ...
- jprofiler监控tomcat
jprofiler监控tomcat https://www.cnblogs.com/yjd_hycf_space/p/7727757.html https://www.jianshu.com/p/c3 ...
- [PyTorch入门之60分钟入门闪击战]之自动推倒
AUTOGRAD: AUTOMATIC DIFFERENTIATION(自动分化) 来源于这里. autograd包是PyTorch中所有神经网络的核心.首先我们先简单地了解下它,然后我们将训练我们的 ...
- 前沿理论、反思创新、产学结合——你不能错过的WSDM 2016大会
第九届ACM网络搜索与数据挖掘国际会议(ACM International Conference on Web Search and Data Mining,简称WSDM)已于上周(2月22日-25日 ...
- 【基础篇】hexo博客搭建教程
[基础篇]搭建hexo博客(一) 作者:Huanhao bilibili:Mrhuanhao 前言 你是否想拥有属于自己的博客?你是否无奈与自己不会写网站而烦恼? 不要担心,本系列教程将会实现你白嫖的 ...