path: root/files/zh-tw/learn/javascript/building_blocks/looping_code/index.html

---
title: 循環代碼
slug: Learn/JavaScript/Building_blocks/Looping_code
translation_of: Learn/JavaScript/Building_blocks/Looping_code
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>

<p class="summary">編程語言對於快速完成重複性任務非常有用，從多個基本計算到幾乎任何其他需要完成大量類似工作的情況。 在這裡，我們將看看JavaScript中可用於處理此類需求的循環結構。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisites:</th>
   <td>Basic computer literacy, a basic understanding of HTML and CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objective:</th>
   <td>To understand how to use loops in JavaScript.</td>
  </tr>
 </tbody>
</table>

<h2 id="保持循環">保持循環</h2>

<p>循環，循環，循環。 除了與受歡迎的早餐穀物，過山車和音樂作品有關聯，它們還是編程中的關鍵概念。 編程循環都是一遍又一遍地做同一件事-在編程方面被稱為迭代。</p>

<p>讓我們考慮一個農民的例子，他要確保他有足夠的食物來養家糊口。 他可能使用以下循環來實現此目的：</p>

<p><br>
 <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p>

<p>循環通常具有以下一項或多項功能：</p>

<ul>
 <li> 一個用一定值初始化的計數器-這是循環的起點（上面的“開始：我沒有食物”）。</li>
 <li>一種條件，它是對/錯測試，用於確定循環是繼續運行還是停止（通常在計數器達到某個值時）。 “我是否有足夠的食物？”對此進行了說明。 以上。 假設他需要10份食物來養家糊口的話。</li>
 <li>一個迭代器，通常在每個連續循環上使計數器增加一小部分，直到條件不再成立為止。 上面我們沒有明確說明這一點，但是我們可以考慮一下農民每小時可以收集2份食物。 每小時之後，他收集的食物數量增加了2，然後他檢查是否有足夠的食物。 如果他已達到10個部分（此時條件不再成立，則循環退出），他可以停止收集並回家。</li>
</ul>

<p>In {{glossary("pseudocode")}}, this would look something like the following:</p>

<pre class="notranslate">loop(food = 0; foodNeeded = 10) {
  if (food = foodNeeded) {
    exit loop;
    // We have enough food; let's go home
  } else {
    food += 2; // Spend an hour collecting 2 more food
    // loop will then run again
  }
}</pre>

<p>因此，所需的食物數量設置為10，而農民當前擁有的食物數量設置為0。在循環的每次迭代中，我們檢查農民擁有的食物數量是否等於他所需的數量。 如果是這樣，我們可以退出循環。 如果不是這樣，農民將花一個小時收集兩份食物，然後循環再次運行。</p>

<h3 id="不用麻煩">不用麻煩</h3>

<p>在這一點上，您可能了解了循環背後的高級概念，但您可能在想：“好，很好，但這如何幫助我編寫更好的JavaScript代碼？” 如前所述，循環與一次又一次地執行同一操作有關，這對於快速完成重複性任務非常有用。</p>

<p>通常，代碼在每次循環的每次迭代中都會略有不同，這意味著您可以完成全部相似但略有不同的任務，一般情況，如果您要執行許多不同的計算，則需要不斷地執行不同的式子，而不能一遍又一遍重複！</p>

<p>讓我們看一個示例，以完美地說明為什麼循環是如此便利。 Let's say we wanted to draw 100 random circles on a {{htmlelement("canvas")}} element (press the <em>Update</em> button to run the example again and again to see different random sets):</p>

<div class="hidden">
<h6 id="Hidden_code">Hidden code</h6>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Random canvas circles&lt;/title&gt;
    &lt;style&gt;
      html {
        width: 100%;
        height: inherit;
        background: #ddd;
      }

      canvas {
        display: block;
      }

      body {
        margin: 0;
      }

      button {
        position: absolute;
        top: 5px;
        left: 5px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;

  &lt;button&gt;Update&lt;/button&gt;

  &lt;canvas&gt;&lt;/canvas&gt;


    &lt;script&gt;
    var btn = document.querySelector('button');
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');

    var WIDTH = document.documentElement.clientWidth;
    var HEIGHT = document.documentElement.clientHeight;

    canvas.width = WIDTH;
    canvas.height = HEIGHT;

    function random(number) {
      return Math.floor(Math.random()*number);
    }

    function draw() {
      ctx.clearRect(0,0,WIDTH,HEIGHT);
      for (var i = 0; i &lt; 100; i++) {
        ctx.beginPath();
        ctx.fillStyle = 'rgba(255,0,0,0.5)';
        ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
        ctx.fill();
      }
    }

    btn.addEventListener('click',draw);

    &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>

<p>您現在不必了解所有代碼，但讓我們看一下實際繪製100個圓圈的代碼部分：</p>

<pre class="brush: js notranslate">for (var i = 0; i &lt; 100; i++) {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(255,0,0,0.5)';
  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
  ctx.fill();
}</pre>

<ul>
 <li><code>代碼前面定義的random（），返回0到x-1之間的整數。</code></li>
 <li><code>WIDTH和HEIGHT是內部瀏覽器窗口的寬度和高度。</code></li>
</ul>

<p>您應該了解基本概念-我們正在使用一個循環來運行此代碼的100次迭代，每個迭代在頁面上的隨機位置繪製一個圓圈。 無論我們繪製100個圓，1000個還是10,000個，所需的代碼量都是相同的。 只需更改一個數字。</p>

<p>如果我們不在此處使用循環，則必須為每個要繪製的圓重複以下代碼：</p>

<pre class="brush: js notranslate">ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();</pre>

<p>這將變得很無聊，並且很難很快維護。 循環確實是最好的。</p>

<h2 id="循環的規範">循環的規範</h2>

<p>讓我們開始探索一些特定的循環結構。 第一個是for循環，您將在大多數時候使用它，它具有以下語法：</p>

<pre class="notranslate">for (initializer; exit-condition; final-expression) {
  // code to run
}</pre>

<p>這裡我們有：</p>

<ol>
 <li>關鍵字“ for”，即跟隨其後的一些括號。</li>
 <li>在括號內，我們有三個項目，以 ; 分隔：
  <ol>
   <li>初始化程序-通常是一個設置為數字的變量，該變量將遞增以計算循環運行的次數。 有時也稱為計數器變量。</li>
   <li>退出條件-如前所述，它定義了循環何時應停止循環。 通常，這是一個具有比較運算符的表達式，該測試用於檢驗是否滿足退出條件。</li>
   <li>最終表達式—每當循環經過完整的迭代時，總是對它進行評估（或運行）。 它通常用於遞增（或在某些情況下遞減）計數器變量，以使其更接近退出條件值。</li>
  </ol>
 </li>
 <li>一些花括號包含一個代碼塊-每次循環迭代時都將運行此代碼。</li>
</ol>

<p>讓我們看一個真實的例子，以便我們可以更清楚地看到它們的作用。</p>

<pre class="brush: js notranslate">var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
var info = 'My cats are called ';
var para = document.querySelector('p');

for (var i = 0; i &lt; cats.length; i++) {
  info += cats[i] + ', ';
}

para.textContent = info;</pre>

<p>這為我們提供了以下輸出：</p>

<div class="hidden">
<h6 id="Hidden_code_2">Hidden code 2</h6>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Basic for loop example&lt;/title&gt;
    &lt;style&gt;

    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;

  &lt;p&gt;&lt;/p&gt;


    &lt;script&gt;
    var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
    var info = 'My cats are called ';
    var para = document.querySelector('p');

    for (var i = 0; i &lt; cats.length; i++) {
      info += cats[i] + ', ';
    }

    para.textContent = info;

    &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p>

<div class="note">
<p><strong>Note</strong>: You can find this <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">example code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">see it running live</a>).</p>
</div>

<p>這顯示了一個循環，該循環用於遍歷數組中的項目並對其進行處理-這是JavaScript中非常常見的模式。 這裡：</p>

<ol>
 <li>迭代器i從0開始（變量i = 0）。</li>
 <li>它被告知運行，直到它不再小於cats數組的長度為止。 這很重要,退出條件顯示了循環仍將運行的條件。 因此，在這種情況下，儘管i &lt;cats.length仍然為true，循環仍將運行。</li>
 <li>在循環內部，我們將當前循環項（cats [i]是cats [無論 i 當時是什麼]）與一個逗號和一個空格連接到info變量的末尾。 所以：
  <ol>
   <li>在第一次運行中，i = 0，因此cats [0] +'，'將連接到info（“ Bill，”）上。</li>
   <li>在第二次運行中，i = 1，因此cats [1] +'，'將連接到info（“ Jeff，”）上</li>
   <li>等等。 每次循環運行後，將1加到i（i ++），然後該過程將再次開始。</li>
  </ol>
 </li>
 <li>當 i 等於cats.length時，循環將停止，瀏覽器將繼續循環下方的下一段代碼。</li>
</ol>

<div class="note">
<p><strong>Note</strong>: We have made the exit condition <code>i &lt; cats.length</code>, not <code>i &lt;= cats.length</code>, because computers count from 0, not 1 — we are starting <code>i</code> at <code>0</code>, and going up to <code>i = 4</code> (the index of the last array item). <code>cats.length</code> returns 5, as there are 5 items in the array, but we don't want to get up to <code>i = 5</code>, as that would return <code>undefined</code> for the last item (there is no array item with an index of 5). So therefore we want to go up to 1 less than <code>cats.length</code> (<code>i &lt;</code>), not the same as <code>cats.length</code> (<code>i &lt;=</code>).</p>
</div>

<div class="note">
<p><strong>Note</strong>: A common mistake with exit conditions is making them use "equal to" (<code>===</code>) rather than say "less than or equal to" (<code>&lt;=</code>). If we wanted to run our loop up to <code>i = 5</code>, the exit condition would need to be <code>i &lt;= cats.length</code>. If we set it to <code>i === cats.length</code>, the loop would not run at all because <code>i</code> is not equal to <code>5</code> on the first loop iteration, so it would stop immediately.</p>
</div>

<p>我們剩下的一個小問題是最終輸出語句的格式不太正確：</p>

<blockquote>
<p>My cats are called Bill, Jeff, Pete, Biggles, Jasmin,</p>
</blockquote>

<p>理想情況下，我們希望在最終循環迭代中更改串聯，以使句子的末尾沒有逗號。 好吧，沒問題-我們可以很高興地在for循環中插入一個條件來處理這種特殊情況：</p>

<pre class="brush: js notranslate">for (var i = 0; i &lt; cats.length; i++) {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }
}</pre>

<div class="note">
<p><strong>Note</strong>: You can find this <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">example code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">see it running live</a>).</p>
</div>

<div class="warning">
<p><strong>Important</strong>: With for — as with all loops — you must make sure that the initializer is iterated so that it eventually reaches the exit condition. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an <strong>infinite loop</strong>.</p>
</div>

<h2 id="中斷退出循環">中斷退出循環</h2>

<p>如果要在所有迭代完成之前退出循環，可以使用break語句。 在查看switch語句時，我們已經在上一篇文章中遇到了這一問題—當在switch語句中遇到與輸入表達式匹配的case時，break語句立即退出switch語句並移至其後的代碼上。</p>

<p>循環也是如此，-break語句將立即退出循環，並使瀏覽器繼續執行緊隨其後的任何代碼。</p>

<p>假設我們要搜索一系列聯繫人和電話號碼，然後僅返回我們要查找的號碼？ 首先，提供一些簡單的HTML-文本 {{htmlelement("input")}} 允許我們輸入要搜索的名稱，{{htmlelement("button")}} 元素以提交搜索，以及 {{htmlelement ("p")}} 元素以在以下位置顯示結果：</p>

<pre class="brush: html notranslate">&lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
&lt;input id="search" type="text"&gt;
&lt;button&gt;Search&lt;/button&gt;

&lt;p&gt;&lt;/p&gt;</pre>

<p>Now on to the JavaScript:</p>

<pre class="brush: js notranslate">var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
var para = document.querySelector('p');
var input = document.querySelector('input');
var btn = document.querySelector('button');

btn.addEventListener('click', function() {
  var searchName = input.value;
  input.value = '';
  input.focus();
  for (var i = 0; i &lt; contacts.length; i++) {
    var splitContact = contacts[i].split(':');
    if (splitContact[0] === searchName) {
      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
      break;
    } else {
      para.textContent = 'Contact not found.';
    }
  }
});</pre>

<div class="hidden">
<h6 id="Hidden_code_3">Hidden code 3</h6>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Simple contact search example&lt;/title&gt;
    &lt;style&gt;

    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;

  &lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
  &lt;input id="search" type="text"&gt;
  &lt;button&gt;Search&lt;/button&gt;

  &lt;p&gt;&lt;/p&gt;


    &lt;script&gt;
    var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
    var para = document.querySelector('p');
    var input = document.querySelector('input');
    var btn = document.querySelector('button');

    btn.addEventListener('click', function() {
      var searchName = input.value;
      input.value = '';
      input.focus();
      for (var i = 0; i &lt; contacts.length; i++) {
        var splitContact = contacts[i].split(':');
        if (splitContact[0] === searchName) {
          para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
          break;
        } else if (i === contacts.length-1)
              para.textContent = 'Contact not found.';
        }
    });
    &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>

<ol>
 <li>首先，我們有一些變量定義-我們有一個聯繫信息陣列，每個項目都是一個字符串，其中包含用冒號分隔的姓名和電話號碼。</li>
 <li>接下來，我們將事件監聽器附加到按鈕（btn），以便在按下按鈕時，將運行一些代碼來執行搜索並返回結果。</li>
 <li>我們將輸入到文本輸入中的值存儲在一個名為searchName的變量中，然後清空文本輸入並再次對其進行聚焦，以準備進行下一次搜索。</li>
 <li>現在到有趣的部分，for循環：
  <ol>
   <li>我們從0開始啟動計數器，運行循環直到計數器不再小於contact.length，然後在每次循環之後將i遞增1。</li>
   <li>在循環內部，我們首先將當前觸點（contacts [i]）分割為冒號字符，並將得到的兩個值存儲在名為 splitContact 的數組中。</li>
   <li>然後，我們使用條件語句來測試splitContact [0]（聯繫人的姓名）是否等於輸入的searchName。 如果是這樣，我們在段落中輸入一個字符串以報告聯繫人的電話號碼，然後使用break結束循環。</li>
  </ol>
 </li>
 <li>
  <p>在（contacts.length-1）迭代之後，如果聯繫人姓名與輸入的搜索不匹配，則將段落文本設置為“找不到聯繫人。”，然後循環繼續進行迭代。</p>
 </li>
</ol>

<div class="note">
<p>Note: You can view the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">full source code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">see it running live</a>).</p>
</div>

<h2 id="Skipping_iterations_with_continue">Skipping iterations with continue</h2>

<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> statement works in a similar manner to <code>break</code>, but instead of breaking out of the loop entirely, it skips to the next iteration of the loop. Let's look at another example that takes a number as an input, and returns only the numbers that are squares of integers (whole numbers).</p>

<p>The HTML is basically the same as the last example — a simple text input, and a paragraph for output. The JavaScript is mostly the same too, although the loop itself is a bit different:</p>

<pre class="brush: js notranslate">var num = input.value;

for (var i = 1; i &lt;= num; i++) {
  var sqRoot = Math.sqrt(i);
  if (Math.floor(sqRoot) !== sqRoot) {
    continue;
  }

  para.textContent += i + ' ';
}</pre>

<p>Here's the output:</p>

<div class="hidden">
<h6 id="Hidden_code_4">Hidden code 4</h6>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Integer squares generator&lt;/title&gt;
    &lt;style&gt;

    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;

  &lt;label for="number"&gt;Enter number: &lt;/label&gt;
  &lt;input id="number" type="text"&gt;
  &lt;button&gt;Generate integer squares&lt;/button&gt;

  &lt;p&gt;Output: &lt;/p&gt;


    &lt;script&gt;
    var para = document.querySelector('p');
    var input = document.querySelector('input');
    var btn = document.querySelector('button');

    btn.addEventListener('click', function() {
      para.textContent = 'Output: ';
      var num = input.value;
      input.value = '';
      input.focus();
      for (var i = 1; i &lt;= num; i++) {
        var sqRoot = Math.sqrt(i);
        if (Math.floor(sqRoot) !== sqRoot) {
          continue;
        }

        para.textContent += i + ' ';
      }
    });
    &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>

<ol>
 <li>In this case, the input should be a number (<code>num</code>). The <code>for</code> loop is given a counter starting at 1 (as we are not interested in 0 in this case), an exit condition that says the loop will stop when the counter becomes bigger than the input <code>num</code>, and an iterator that adds 1 to the counter each time.</li>
 <li>Inside the loop, we find the square root of each number using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a>, then check whether the square root is an integer by testing whether it is the same as itself when it has been rounded down to the nearest integer (this is what <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a> does to the number it is passed).</li>
 <li>If the square root and the rounded down square root do not equal one another (<code>!==</code>), it means that the square root is not an integer, so we are not interested in it. In such a case, we use the <code>continue</code> statement to skip on to the next loop iteration without recording the number anywhere.</li>
 <li>If the square root IS an integer, we skip past the if block entirely so the <code>continue</code> statement is not executed; instead, we concatenate the current <code>i</code> value plus a space on to the end of the paragraph content.</li>
</ol>

<div class="note">
<p><strong>Note</strong>: You can view the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">full source code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">see it running live</a>).</p>
</div>

<h2 id="while_and_do_..._while">while and do ... while</h2>

<p><code>for</code> is not the only type of loop available in JavaScript. There are actually many others and, while you don't need to understand all of these now, it is worth having a look at the structure of a couple of others so that you can recognize the same features at work in a slightly different way.</p>

<p>First, let's have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> loop. This loop's syntax looks like so:</p>

<pre class="notranslate">initializer
while (exit-condition) {
  // code to run

  final-expression
}</pre>

<p>This works in a very similar way to the for loop, except that the initializer variable is set before the loop, and the final-expression is included inside the loop after the code to run — rather than these two items being included inside the parentheses. The exit-condition is included inside the parentheses, which are preceded by the <code>while</code> keyword rather than <code>for</code>.</p>

<p>The same three items are still present, and they are still defined in the same order as they are in the for loop — this makes sense, as you still have to have an initializer defined before you can check whether it has reached the exit-condition; the final-condition is then run after the code inside the loop has run (an iteration has been completed), which will only happen if the exit-condition has still not been reached.</p>

<p>Let's have a look again at our cats list example, but rewritten to use a while loop:</p>

<pre class="brush: js notranslate">var i = 0;

while (i &lt; cats.length) {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }

  i++;
}</pre>

<div class="note">
<p><strong>Note</strong>: This still works just the same as expected — have a look at it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">running live on GitHub</a> (also view the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">full source code</a>).</p>
</div>

<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> loop is very similar, but provides a variation on the while structure:</p>

<pre class="notranslate">initializer
do {
  // code to run

  final-expression
} while (exit-condition)</pre>

<p>In this case, the initializer again comes first, before the loop starts. The <code>do</code> keyword directly precedes the curly braces containing the code to run and the final-expression.</p>

<p>The differentiator here is that the exit-condition comes after everything else, wrapped in parentheses and preceded by a <code>while</code> keyword. In a <code>do...while</code> loop, the code inside the curly braces is always run once before the check is made to see if it should be executed again (in while and for, the check comes first, so the code might never be executed).</p>

<p>Let's rewrite our cat listing example again to use a <code>do...while</code> loop:</p>

<pre class="brush: js notranslate">var i = 0;

do {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }

  i++;
} while (i &lt; cats.length);</pre>

<div class="note">
<p><strong>Note</strong>: Again, this works just the same as expected — have a look at it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">running live on GitHub</a> (also view the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">full source code</a>).</p>
</div>

<div class="warning">
<p><strong>Important</strong>: With while and do...while — as with all loops — you must make sure that the initializer is iterated so that it eventually reaches the exit condition. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an <strong>infinite loop</strong>.</p>
</div>

<h2 id="Active_learning_Launch_countdown!">Active learning: Launch countdown!</h2>

<p>In this exercise, we want you to print out a simple launch countdown to the output box, from 10 down to Blast off. Specifically, we want you to:</p>

<ul>
 <li>Loop from 10 down to 0. We've provided you with an initializer — <code>var i = 10;</code>.</li>
 <li>For each iteration, create a new paragraph and append it to the output <code>&lt;div&gt;</code>, which we've selected using <code>var output = document.querySelector('.output');</code>. In comments, we've provided you with three code lines that need to be used somewhere inside the loop:
  <ul>
   <li><code>var para = document.createElement('p');</code> — creates a new paragraph.</li>
   <li><code>output.appendChild(para);</code> — appends the paragraph to the output <code>&lt;div&gt;</code>.</li>
   <li><code>para.textContent =</code> — makes the text inside the paragraph equal to whatever you put on the right hand side, after the equals sign.</li>
  </ul>
 </li>
 <li>Different iteration numbers require different text to be put in the paragraph for that iteration (you'll need a conditional statement and multiple <code>para.textContent =</code> lines):
  <ul>
   <li>If the number is 10, print "Countdown 10" to the paragraph.</li>
   <li>If the number is 0, print "Blast off!" to the paragraph.</li>
   <li>For any other number, print just the number to the paragraph.</li>
  </ul>
 </li>
 <li>Remember to include an iterator! However, in this example we are counting down after each iteration, not up, so you <strong>don't</strong> want <code>i++</code> — how do you iterate downwards?</li>
</ul>

<p>If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.</p>

<div class="hidden">
<h6 id="Active_learning">Active learning</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
&lt;div class="output" style="height: 410px;overflow: auto;"&gt;

&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
&lt;textarea id="code" class="playable-code" style="height: 300px;width: 95%"&gt;
var output = document.querySelector('.output');
output.innerHTML = '';

// var i = 10;

// var para = document.createElement('p');
// para.textContent = ;
// output.appendChild(para);
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;
</pre>

<p class="brush: js"></p>

<p class="brush: js"></p>

<p class="brush: js"></p>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<p class="brush: js"></p>

<p class="brush: js"></p>

<p class="brush: js"></p>

<p class="brush: js"></p>

<pre class="brush: js notranslate">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var jsSolution = 'var output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nvar i = 10;\n\nwhile(i &gt;= 0) {\n var para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
var solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>

<p class="brush: js"></p>
</div>

<p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="Active_learning_Filling_in_a_guest_list">Active learning: Filling in a guest list</h2>

<p>In this exercise, we want you to take a list of names stored in an array, and put them into a guest list. But it's not quite that easy — we don't want to let Phil and Lola in because they are greedy and rude, and always eat all the food! We have two lists, one for guests to admit, and one for guests to refuse.</p>

<p>Specifically, we want you to:</p>

<ul>
 <li>Write a loop that will iterate from 0 to the length of the <code>people</code> array. You'll need to start with an initializer of  <code>var i = 0;</code>, but what exit condition do you need?</li>
 <li>During each loop iteration, check if the current array item is equal to "Phil" or "Lola" using a conditional statement:
  <ul>
   <li>If it is, concatenate the array item to the end of the <code>refused</code> paragraph's <code>textContent</code>, followed by a comma and a space.</li>
   <li>If it isn't, concatenate the array item to the end of the <code>admitted</code> paragraph's <code>textContent</code>, followed by a comma and a space.</li>
  </ul>
 </li>
</ul>

<p>We've already provided you with:</p>

<ul>
 <li><code>var i = 0;</code> — Your initializer.</li>
 <li><code>refused.textContent +=</code> — the beginnings of a line that will concatenate something on to the end of <code>refused.textContent</code>.</li>
 <li><code>admitted.textContent +=</code> — the beginnings of a line that will concatenate something on to the end of <code>admitted.textContent</code>.</li>
</ul>

<p>Extra bonus question — after completing the above tasks successfully, you will be left with two lists of names, separated by commas, but they will be untidy — there will be a comma at the end of each one. Can you work out how to write lines that slice the last comma off in each case, and add a full stop to the end? Have a look at the <a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a> article for help.</p>

<p>If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.</p>

<div class="hidden">
<h6 id="Active_learning_2">Active learning 2</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
&lt;div class="output" style="height: 100px;overflow: auto;"&gt;
  &lt;p class="admitted"&gt;Admit: &lt;/p&gt;
  &lt;p class="refused"&gt;Refuse: &lt;/p&gt;
&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
var people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];

var admitted = document.querySelector('.admitted');
var refused = document.querySelector('.refused');
admitted.textContent = 'Admit: ';
refused.textContent = 'Refuse: '

// var i = 0;

// refused.textContent += ;
// admitted.textContent += ;

&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var jsSolution = 'var people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i &lt; people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
var solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="Which_loop_type_should_you_use">Which loop type should you use?</h2>

<p>For basic uses, <code>for</code>, <code>while</code>, and <code>do...while</code> loops are largely interchangeable. They can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive. Let's have a look at them again.</p>

<p>First <code>for</code>:</p>

<pre class="notranslate">for (initializer; exit-condition; final-expression) {
  // code to run
}</pre>

<p><code>while</code>:</p>

<pre class="notranslate">initializer
while (exit-condition) {
  // code to run

  final-expression
}</pre>

<p>and finally <code>do...while</code>:</p>

<pre class="notranslate">initializer
do {
  // code to run

  final-expression
} while (exit-condition)</pre>

<p>We would recommend <code>for</code>, at least to begin with, as it is probably the easiest for remembering everything — the initializer, exit-condition, and final-expression all have to go neatly into the parentheses, so it is easy to see where they are and check that you aren't missing them.</p>

<div class="note">
<p><strong>Note</strong>: There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration guide</a>.</p>
</div>

<h2 id="Conclusion">Conclusion</h2>

<p>This article has revealed to you the basic concepts behind, and different options available when, looping code in JavaScript. You should now be clear on why loops are a good mechanism for dealing with repetitive code, and be raring to use them in your own examples!</p>

<p>If there is anything you didn't understand, feel free to read through the article again, or <a href="/en-US/Learn#Contact_us">contact us</a> to ask for help.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration in detail</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for statement reference</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> references</li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> references</li>
 <li>
  <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — some advanced loop best practices</p>
 </li>
</ul>

<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p>

<h2 id="In_this_module">In this module</h2>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
</ul>