JavaScript 中的循环结构-CFANZ编程社区

<span style="background-color:#f7f7f7"><span style="color:#777777">typora-copy-images-to: media
</span></span>

循环结构

引入：操场一圈是400米，在运动会的时候，2000米的跑步比赛，我们需要绕操场跑5圈，如下图：

示意图

这就是一个循环，那么，在这个过程中，其实我们动作只是跑一圈，剩下的过程只是在重复。从计算机的角度来想，我们可不可以设定一个程序，让他自动跑5圈呢？可以的，用咱们今天要学习的循环结构。循环结构的意义就是让代码重复执行。

循环作用：处理重复代码

while循环结构

语法：

<span style="background-color:#f8f8f8"><span style="color:#770088">while</span>(条件语句){
  条件成立执行的代码
} </span>

例：对女朋友说5句我爱你

<span style="background-color:#f8f8f8"><span style="color:#aa5500">// 那么既然是循环，咱们需要设定几个条件，首先是从哪开始，每完成一次要进行计数，完成多少次停止。</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">1</span>;
<span style="color:#770088">while</span>(<span style="color:#000000">i</span><span style="color:#981a1a"><=</span><span style="color:#116644">10</span>){
    <span style="color:#000000">document</span>.<span style="color:#000000">write</span>(<span style="color:#aa1111">"我爱你！"</span>);  
    <span style="color:#000000">i</span><span style="color:#981a1a">++</span>;
}</span>

while循环结构的具体流程：

while循环的运行流程

while循环需要我们在循环外就将变量声名好，在执行代码的过程中，一定要让变量进行变化，否则这个循环就会无休止的进行下去。

不会停止的循环叫做死循环，程序一直不会停止，cpu占用率越来越高，很容易造成系统崩溃。所以我们在写代码的时候一定避免写成死循环。

例：利用while循环中的变量输出数字1~5

<span style="background-color:#f8f8f8"><span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">1</span>;
<span style="color:#770088">while</span>(<span style="color:#770088">while</span><span style="color:#981a1a"><=</span><span style="color:#116644">5</span>){
     <span style="color:#000000">document</span>.<span style="color:#000000">write</span>(<span style="color:#000000">i</span>);
    <span style="color:#000000">i</span><span style="color:#981a1a">++</span>;
}</span>

do while循环结构

do while 循环是while循环的变异体。循环流程相似，唯一不同的地方在于do while循环会先执行一次，不管条件是否成立，先执行一次，后面的流程和while循环一样。

for循环结构

语法：

<span style="background-color:#f8f8f8"><span style="color:#770088">for</span>(声明变量并赋初始值;条件表达式;每重复一次后变量的变化规律){
    重复执行的代码块
}
<span style="color:#aa5500"># 在语法中的声明变量并赋初始值，就是从哪里开始重复；条件表达式可以限定重复在什么时候停止（当条件不成立的时候）；通过每次重复变量的变化和条件表达式可以知道要重复多少次</span></span>

例：输出10句“我爱你”

<span style="background-color:#f8f8f8"><span style="color:#770088">for</span>(<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">1</span>;<span style="color:#0055aa">i</span> <span style="color:#981a1a"><=</span> <span style="color:#116644">10</span>; <span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>){
  <span style="color:#000000">document</span>.<span style="color:#000000">write</span>(<span style="color:#aa1111">"我爱你"</span>);
}</span>

循环执行过程分析：

<span style="background-color:#f8f8f8"><span style="color:#770088">var</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">10</span>,<span style="color:#116644">20</span>,<span style="color:#116644">30</span>,<span style="color:#116644">40</span>,<span style="color:#116644">50</span>];
<span style="color:#770088">var</span> <span style="color:#0000ff">sum</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>;
<span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#770088">in</span> <span style="color:#000000">arr</span>) {
  <span style="color:#000000">sum</span> <span style="color:#981a1a">+=</span> <span style="color:#000000">arr</span>[<span style="color:#0055aa">i</span>];
}
<span style="color:#000000">alert</span>(<span style="color:#000000">sum</span>);</span>

for循环中的初始值和变化可以不放在小括号中

<span style="background-color:#f8f8f8"><span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">1</span>;
<span style="color:#770088">for</span>(;<span style="color:#000000">i</span><span style="color:#981a1a"><=</span><span style="color:#116644">5</span>;){
  <span style="color:#000000">document</span>.<span style="color:#000000">write</span>(<span style="color:#000000">i</span>);
  <span style="color:#000000">i</span><span style="color:#981a1a">++</span>;
}</span>

执行流程是一样的，只是写法不一样。

在循环中，变量i的变化规律可以不是递增，也可以递减，也可以不是递增1。。。总而言之，变量i的变化规律可以自定义。

例：求出1~10之间所有单数的和。

<span style="background-color:#f8f8f8"><span style="color:#770088">var</span> <span style="color:#0000ff">sum</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>;
<span style="color:#770088">for</span>(<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">1</span>;<span style="color:#0055aa">i</span> <span style="color:#981a1a"><=</span> <span style="color:#116644">10</span>;<span style="color:#0055aa">i</span><span style="color:#981a1a">+=</span><span style="color:#116644">2</span>){
  <span style="color:#000000">sum</span> <span style="color:#981a1a">+=</span> <span style="color:#0055aa">i</span>;
}
<span style="color:#000000">alert</span>(<span style="color:#000000">sum</span>); <span style="color:#aa5500">// 25</span></span>

for循环的运行流程

for循环运行流程

循环中的跳转关键字

在循环有两个关键字可以改变循环执行的流程。

continue关键字，可以跳过当前这次的循环，直接进行下一次的循环。

<span style="background-color:#f8f8f8"><span style="color:#770088">for</span>(<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">1</span>;<span style="color:#0055aa">i</span> <span style="color:#981a1a"><=</span> <span style="color:#116644">5</span>;<span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>){
  <span style="color:#770088">if</span>(<span style="color:#0055aa">i</span> <span style="color:#981a1a">==</span> <span style="color:#116644">3</span>){
    <span style="color:#770088">continue</span>; <span style="color:#aa5500">// 当i=3的时候，直接进行下一次的循环</span>
  }
  <span style="color:#000000">document</span>.<span style="color:#000000">write</span>(<span style="color:#0055aa">i</span>);
} 
<span style="color:#aa5500">// 最后结果是1245</span></span>

break关键字，可终止循环，直接让整个循环结束运行。

<span style="background-color:#f8f8f8"><span style="color:#770088">for</span>(<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">1</span>;<span style="color:#0055aa">i</span> <span style="color:#981a1a"><=</span> <span style="color:#116644">5</span>;<span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>){
  <span style="color:#770088">if</span>(<span style="color:#0055aa">i</span> <span style="color:#981a1a">==</span> <span style="color:#116644">3</span>){
    <span style="color:#770088">break</span>; <span style="color:#aa5500">// 当i=3的时候，直接结束整个循环的运行</span>
  }
  <span style="color:#000000">document</span>.<span style="color:#000000">write</span>(<span style="color:#0055aa">i</span>);
} 
<span style="color:#aa5500">// 最后结果是12</span></span>

运行流程如下图所示：

案例：

入职薪水10K，每年涨幅5%，50年后工资多少？
打印100以内 7的倍数
打印100以内的奇数

循环的嵌套

让一段重复执行代码重复执行，也就是设定一个大程序，让多个人跑5圈。

<span style="background-color:#f8f8f8"><span style="color:#770088">for</span>(<span style="color:#770088">var</span> <span style="color:#0000ff">i</span><span style="color:#981a1a">=</span><span style="color:#116644">1</span>;<span style="color:#0055aa">i</span><span style="color:#981a1a"><=</span><span style="color:#116644">5</span>;<span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>){
    <span style="color:#770088">for</span>(<span style="color:#770088">var</span> <span style="color:#0000ff">j</span><span style="color:#981a1a">=</span><span style="color:#116644">1</span>;<span style="color:#0055aa">j</span><span style="color:#981a1a"><=</span><span style="color:#116644">5</span>;<span style="color:#0055aa">j</span><span style="color:#981a1a">++</span>){
        <span style="color:#000000">document</span>.<span style="color:#000000">write</span>(<span style="color:#aa1111">"第"</span> <span style="color:#981a1a">+</span> <span style="color:#0055aa">i</span> <span style="color:#981a1a">+</span> <span style="color:#aa1111">"个人跑第"</span> <span style="color:#981a1a">+</span> <span style="color:#0055aa">j</span> <span style="color:#981a1a">+</span> <span style="color:#aa1111">"圈<br>"</span>);
    }
}</span>

debug调试工具的使用

调试步骤：

<span style="background-color:#f8f8f8"><span style="color:#000000">浏览器中按F12</span><span style="color:#981a1a">--></span><span style="color:#000000">sources</span><span style="color:#981a1a">--></span><span style="color:#000000">在network选项中找到需要调试的文件打开</span><span style="color:#981a1a">--></span><span style="color:#000000">在程序代码的某一行设置断点</span></span>

调试中的相关操作

调试示意图

练习调试 :

<span style="background-color:#f8f8f8"><span style="color:#aa5500">// 3以内的数相加</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">age</span> <span style="color:#981a1a">=</span> <span style="color:#116644">10</span>;
<span style="color:#770088">if</span> (<span style="color:#000000">age</span> <span style="color:#981a1a">>=</span><span style="color:#116644">18</span> ) {
  <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">'大'</span>);
} <span style="color:#770088">else</span> {
  <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">'小'</span>);
}</span>

案例：