41.尚硅谷_JS基础_嵌套的for循环

说啊，那咱们呢，今天呢，是我们这个。所今天是第九天是吧，第十天九天九天，我这日子写的第十是吧，到说再改吧，啊我这来直接新建一个，来一个这个d day0D09啊我们这个第九天，第九天呢，我们来，诶说一个东西还是来说我们这个循环零一，我们叫做什么呢？叫做一个嵌套的负循环，从名字上来讲，什么叫做嵌套的负循环呀？哎，是不是我在负循环里边我再套一个负循环呀，哎，负循环里边再套一个负循环，哎，那我们说了，你这个嵌套的负循环它有什么用呢？诶我们先不管它，我们先来说一个什么呀，先来说这么一个需求，诶那我假设呢，有这么一个要求，我希望什么呢？诶在我们这个，诶通过我们这个程序在什么呢？在我们这个页面中干嘛呢？呃，输出如下的一个图形啊，如下图形，什么图形呢？我们来看看啊。

这么一个，诶这样，然后呢这样然后呢，这样这个它给我生成一堆空格是吧，然后呢，这样这样这样，然后呢，这样这样这样这样。诶，这是一个什么玩意儿，这是一个由这个星号构成的这个三角形吧，哎，一个这个三角形由星号组成一个这个三角形，那现在我想让你再通过程序在页面里话呢，输出这么一个图形，那这个东西我们要怎么做？或者这样说，实际上这个东西呢，对于咱们来说还稍微有点什么呀，有点难度，诶那我们来看一个，那这个如果整不出来的话，我们来先把这东西啊给简化一点干嘛呢？我不输出它了，输出一个这个东西，这是个什么东西，诶是个矩形是吧？诶是一个什么呀，是一个，诶横着有什么呀，有五个星号，竖着有五个号，是不是五乘以五的这么一个矩形的一个星号组成的矩形啊，哎，这么一个矩形，这个呢，稍微有点难，这个呢，我们想想怎么走。

首首先我们说了，通过程序在页面中输出如下图形吧，你要通过程序去输入，那我先说我怎么通过程序向我面中内容，那是不是页面中就是往那包里写，往包里写的应该是不是我们那个点red呀，哎点red我们来先来一个像什么呢？像我们这个body中，诶输出一个这个内容，直接来一个这个什么呢？Do com document点一个right，诶right一个什么呢？Right一个这个星号咱们先写一个，我一保存是不是出一个呀？诶我这写两个是不是出两个呀？诶那我一瞅我这一行输几个呀，是不是输五个呀，那这个事儿简单了，直接五个星号一保存走，你是不是就就出来了呀？哎，出来了简单吧，哎，那你现在要输什么呀，输出一个这个。

长方形一个矩形对吧，你想五个号是几行啊，是五行就完事了，好，那我这来一个二三四五行不行，诶你这一保存走，你人家什么呀，诶给你来一个这个一字长这是吧，是不排成一条线了呀？哎，那应该什么呀，我这是不是应该有一个换行啊哎，换行没五个星号，我后边是不需要跟着一个行啊，所以你光输入星号不行，你还得输出这个换行，换行怎么输出，是不是我们这个B2换行标签啊，我们这个B，然后呢，我再来写23451保存走，你是不是这么一个长方形的呀？哎，是不是非常的非常简单呀，哎非常简单，但是你看虽然很简单，但是这么写有没有啥问题，所现在我是输出几个呀，是一个高是五的这么一个矩形是吧？那假设我想输出一什么呢？高是十的矩形。

怎么办？来我你想啊走你复制一段呗，是不是输出十次一保存是不是十了，那现在我想输什么呢？输出。是不是复制100次啊，诶再复制二三，我就不演示了啊，你想复，你想复入几几行，你是复制几次呀，但我发现这么写麻不麻烦呀，是非常麻烦呀，哎，你如果说我想干嘛呢？我想复制7563行，这玩意数着是还挺劲的呀，哎，挺费劲的，所以你这块，你看我这一块，无论是复制多少行，我实际上是在干嘛呀，是在反复的执行，这一行代哪吧，我想生成一行，我就执行一次，我想生成两行，我就执行两次，我想生成十行，我是不是执行十次啊，我想生成7000行，我是不是执行7000次啊，那么想想，那我可以干嘛呀？

诶，我是不是可以写一个负循环呀，哎，我写一个循环我想想的多高，我是不是让它执行几次就行了呀？哎，咱们来看看啊，我们来我这么写了，直接给它注掉这些呢，都给它住了干嘛呢？我们来一个通过一个这个for循环来干嘛呢？哎，来输出我们这个图形，直接来一个负循环，Y一个I等于零，然后I小于五这个，然后来一个哎加加，那现在问你，我这个for循环会执行几次，五次吧？哎，五次啊，一定是说执行五次的，然后干嘛呢？我将这个刀Q的点right放到这个负循环里，那这样我负循环每执行一次这个do.right是不是写一次呀？诶那我们说了执行五次，它是不是直，它是不是就执行五次呀？哎，五次那高是不就是五了？哎，那我说了，我五行不过了，我望什么呢？我希望来个十行，是不是改成？

实行了呀，哎十行不过瘾了，我希望是37行直接改成什么呀，小于37是不是37行了呀，这种方式比我们刚才那个是不是就是不是灵活多了呀，哎，灵活多了啊，所以这块我们可以采用一个这个负循环来处理这个工作啊，来完成这个工作，那现在我们来说了，我们会发现什么呢？这个负循环执行几次，我们这个图形的高是不是就是多少啊哎，所以我们来说这个负循环实际上用来用来个嘛呢，这个负循环，哎直行几次，我们这个图形的这个高度就是什么呀，多少直行几次是不是就多少啊哎，那我们说了，实际上它可以什么呢？它可以用来控制我们这个图形的一个什么呀，高度啊，它是控制高度的，你想让它高度是11，你就小于11，你想它高度是二，一，你就小于21，这高度你是不是想让它多少就多少啊，哎，非常的什么呀，灵活啊，非常。

我这个能看懂吧，哎，那这个高度灵活了，那再来看。宽度现在是几个星，横向是五个星吧，那现在我说五个星不过去了，我希望十个星，十个星来呗走，你是不是十颗星的十个星不过瘾了，我希望什么？20个星，20个星小意思来呗来走你一保存是不是20个星啊，我希望什么呢？3456个星，诶，那是不是又数下了呀？所以这又带来了一个问题，高度了，宽度是又不活了呀，那这个事儿怎么办呀？我们还是给它改为五个芯啊，改五个星，那这个事儿我们要怎么办呢？那我一看我这个，我这是不是输出了五个星啊，哎，我们来说我这输出五个星，我看啊，我这么写一个document点来什么呢？星2345，我们来看我上边是document芯，我是不是执行了五次呀，这是document right一下输出了什么呀。

五个星吧，哎，五个星，那我问你这个跟他。一不一样，是不是一样的呀，只不过这个是一次输出五个，我是不是分成这是分成五次输出的呀，哎五次输出的，那我一想那这个我先不要了，那我这一想，我这输出几个心，它是不是就应该是宽度是多少啊，哎，我要输出十个，我是不是宽度就是我就输出14呀，那我想想那这东西我可不可以也用一个什么呀，循环来控制啊，行不行，哎，那我们来看看。在这儿，那我们希望什么呢？我们希望在什么呢？在我们这个什么呀，循环的这个内部干嘛呢？诶在创建一个循环用来什么呢？用来控制我们这个图形的一个什么呀，宽度啊，用来控制我们图形的一个宽度，我直接来一个负循环，哇，一个注意了，这回你就不能用这个I了，因为你这是不是已经用来了呀，你这一用这俩人可能你改改变成死循环了，所以这块这里边就不能用I了，我们改一个改什么呢？改一个接，哎Y一个J等于零，然后呢，J我也小于一个五，然后来一个这个接加加，我们来看现在我这个负循环是不是在这个负循的这个里边啊，诶里边，那这个就是我们叫什么呀，叫做负循环的一个什么呀，嵌套啊嵌套，那我们来看他们现在什么关系，这个负循环，在这个负环的这个里边，那么想想他们。

什么关系？这是我的外部负荷循环，这是我的这个内部负荷循环，那我们说了，我的外部负荷循环每执行一次，我的内部负循环会执行几次呀，是不是会执行五次呀，哎，五次啊，所以这里边我们来说目前什么呢？目前我们的谁什么呀？哎，外部的负循环执行一次，我们的这个内部的什么呢？诶就会执行五次，换句话说，我内部的循环它一共会执行几次呀。

是五五二十五次呀，诶25次每执行一次输出一个星，它是不是一共输出25个星啊，哎，那25个星我五乘以五的是不是正好是25个呀？诶我们来看效果啊，我这一保存走你，哎哟。完了，又一字长折了是吧？差哪了？是不是没换行啊，没换行，我这一想来吧，咱们这儿加一换行，加这行不行，加这什么效果了，你是不是一个一换呀，一个一换一保存走你诶说完了，诶这样一对长河了是吧，还是一溜，所以你不能一个一换，那我几个一换呀，哎五个一换，或者说我输出完一行，你是不是得换银行啊，我一行是五个，你就五个亿换，我一行十个，你是不是十个亿换呀，那我怎么知道输出完亿行了，哎，我这个复循环执行完一圈，是不是就输出完一行了呀，所以在它的下边我在这干嘛呢。

是不是输出一个换行啊，哎，输出一个这个换行，直接来一个document，点一个red，来一个这个点来我这一保存，咱们来看效果，来我这一保存走，你是不是就输出了这么一个图形啊，哎，五乘以五的这一个矩形啊矩形，那现在我们来看了，现在里边一个循环，外边一个循环，我有两个循环，那我这个方式比刚才那种方式它有什么好处呢？是不是更灵活了呀，诶我们说了外层循环是控制高度的，内层循环呢，诶我们来看，现在我是接小于五，我一行是不是就是五个星啊，我改一个皆小于一，我一保存走，你说一个星啊，皆小于二变成几个星啊，两个星接小于十是不是变十个线了呀？哎，所以这里边我们来说我们什么呢？内层循环可以什么呢？哎，可以来决定我们这个图形的一个什么呀，宽度啊，它执行几次，我们这个图形的这个宽度它就是什么呀，就是多少执行几次，我们这个宽度就是多少，那我们来看，那我这么改完了有什么特点呀，是不是就变得非常灵活了呀，你说我想我想创建一什么呀，我想创建一个高为七的，那你就把A小于什么呀，七宽为十的，你就接小于十，你这一保存是不是想生成多大就生成多大呀，哎，想。

生成多大就升多大啊，这种方式呢，更加的一个灵活，这就是我们负循环的一个嵌套的一个应用，这个能懂吗？哎，到时候下再写一下啊，我们再接着往下说，说完这块呢，我们来看我这输出这个图形吧，其实感觉它不太好看，为什么不太好看呢？他们行与行之距离挺远是吧，但是这个什么呀，星与星之间的距离是不是几乎为零啊，我希望干嘛呢？他们之间距离是不是能。

远一点啊，那怎么办呢？那我一想直接干嘛呀，在星号后边我给加一个空格，一保存，这就远了呀，哎，但是我觉得还有点近，干嘛呢，再加一个还有没有用了，哎，就没用了，为什么？因为这东西最终是不是写到网页里的呀，你写多少个是不当成当成一个呀，所以你要想要起作用，我们就不能这么写了，叫什么呀，按的时开头分号结尾NBSP吧，诶NBSP多写两一保存走，你看这距离是不是好一点了，哎，好一点啊，让它好看一点，好，那这一块看完了，我们就可以输出这么一个图形了，你现在想输多少就输多少，你就改成十，你就是一个什么样十乘以。十了对吧，哎，想让他做大就不断啊，非常的灵活，诶好了，那看到这儿了，我们再回过头来看刚才那个问题，刚才我们说了，我开始是想输出。

这么一个图形是吧，但是我们说了退而求其次，我们说找一个简单一点的，先输出这么一个，这个东西现在我们已经实现了，而且想输出多大是不是多大了，那现在我们就要输出谁呢说他。这东西我们要怎么输出呢？我们先看看啊，这两个图形它们哪不一样。哎，高度我用不用动，是不是都是五啊？哎，高度我不用动，它们指谁不一样，只是宽度不一样，我这个第二个图形它的宽度是什么呀？固定的是不是就是五个心啊，而这个图形呢，它第一行是一个心，第二行是两个心，第三行是三个心，第四行是四个芯，是不是第五行是五个芯，哎，以此类推，那我们先说了，它只是宽度变了，那我用不用去改变外层循环，不用，高度是没变呀，我只需要动这个内层循环，内层循环那我们现在说了，假设我说了它宽度要是一个星，我怎么办？

我是不是接小于一呀，宽度两个星，那我就接小于二，宽度是三个星，我是不是接小于三呀，但是有我这么写也不行，我写一行不行，变成一六了吧，我写二是变成两六了，对吧，都不行，那写多少合适呢？我们来看第一行我应该什么呀？第一行我是不是应该小于一啊？第二行我应该干嘛呀，是不是小于二啊？呃，第三行我应该小于。是不是三呀？哎，以此类推，第四行应该是小于四，然后第五行我应该是小于小于五的，是这么一个，所以这个五我这能不能写死了，不能写死了，因为它是会会变的吧，第一行是一，第二行是二，第三行是三，第四行是四，第五行是五，那问题来了，那我怎么知道是第几行？哎，我们是不是有一个I啊，第一行是不是就是我们这个外层循环是不是第一次执行啊，外层循一次执行I是多少？I是一啊哎，I是从零开始的吧？哎，第一行的时候I等于零，第二行的时候I等于一，第三行的时候I等于二，然后是I等于四，第五行的时候是不是I等于五啊，一定注意我们的I的值是从几开始的呀，从零开始的吧？哎，从零开始的，所以我们来看，诶A跟这行数正好差什么呀？哦，这是四好写反了是吧，三四，诶那这块我们说了这。

是我们这个行号，这是我们这个阶应该小于那个值，这是我们这个I的这个值，我们发现什么呢？我们发现我们这个I是不是老比我们那行号是不是小一啊，哎，那我如果让I加上一个一，是不是正好等等这个行号来，哎，所以我们来看，那我这写什么呀，写五就不合适了，我直接来什么呢？小于I加一行不行，这样第一次执行的时候I是零，那我这是不是小于一啊，小于一，我第一行是不是输出一个星啊，第二行的时候A变成一，一加一是不是变成二，我小于二是不是输出两个星啊，第三行A是二，二加一是不是变成三，我小于三是不是输出三个角？哎，以此类推，我们来看效果啊，这块我一保存走你。

这个图形是不是就就出来了，哎，就出来了啊，所以注意这一块动的时候咱们的什么呀，咱们这个高是不用动的，只需要动什么呀，宽宽干嘛呢？宽你得让它是个什么呀，是个变量，它会干嘛呀，我们这个值会跟着A的值是不是去去变化呀，哎，去变化这一块啊，是我们说这么一个东西，诶而且它有什么好处呢？这么写完了以后非常的什么呀，灵活，那现在看我是不是I小于五啊，我来I什么呢？A小于十我一保存。属于大三角啊，A小于15是不是就更大了呀？哎，你想生成多大就要干嘛呀，就多大，只需要改什么呢？改这个A的值啊，A的值好，那这块呢，是我们说的这个，诶嵌套的一个负循环，它可以用来输出这么一个这个图形，那这个说完了我们来再看啊，那这个会做了，我们再看，咱们把这题呢再来变一下这个图形，你会了，我希望干嘛呢？咱们倒着来。

这能看出效果吗？第一行我这什么呀，这是第一行我是五个星啊，哎，第二第二行是四个星，第三行是三个星，第四行是两个星，第五行是一个星，也就说是把上面这三角给它倒过来了，哎，那这个东西我们要怎么去输出，怎么输出，哎，你们自己来想一下啊，自己来想一下，我这个保存咱们来停一下。