JavaScript for循環(huán)的用法

發(fā)布時(shí)間：2021-07-16 10:18:56 來源：億速云閱讀：143 作者：chen 欄目：web開發(fā)

這篇文章主要介紹“JavaScript for循環(huán)的用法”，在日常操作中，相信很多人在JavaScript for循環(huán)的用法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”JavaScript for循環(huán)的用法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

一、JavaScript 循環(huán)

循環(huán)是方便的，如果你想重復(fù)地運(yùn)行同一個(gè)代碼，每次使用不同的值。

通常情況下，這是與數(shù)組一起工作:

text += cars[0] + "<br>"; text += cars[1] + "<br>"; text += cars[2] + "<br>"; text += cars[3] + "<br>"; text += cars[4] + "<br>"; text += cars[5] + "<br>";  可以寫成這樣:  for (i = 0; i < cars.length; i++) {     text += cars[i] + "<br>"; }

例：

<!DOCTYPE html> <html lang="en">     <head>         <meta charset="UTF-8">         <title>項(xiàng)目</title>     </head>     <body style="background-color: aqua;">          <h2>JavaScript 循環(huán)</h2>          <p id="demo"></p>          <script>             var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];             var text = "";             var i;             for (i = 0; i < cars.length; i++) {                 text += cars[i] + "<br>";             }             document.getElementById("demo").innerHTML = text; </script>      </body> </html>

JavaScript for循環(huán)的用法

二、不同種類的循環(huán)

JavaScript 支持不同類型的循環(huán):

for - 多次循環(huán)一段代碼。

for/in - 通過對(duì)象的屬性循環(huán)。

三、For 循環(huán)

for循環(huán)通常是你想創(chuàng)建循環(huán)時(shí)使用的工具。

語法:

for (statement 1; statement 2; statement 3) {    code block to be executed }

語句1：循環(huán)(代碼塊)開始之前執(zhí)行。

語句2：定義了運(yùn)行循環(huán)的條件(代碼塊)。

語句3：循環(huán)(代碼塊)被執(zhí)行后每次執(zhí)行。

for (i = 0; i < 5; i++) {    text += "The number is " + i + "<br>"; }

完整代碼:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>項(xiàng)目</title> </head> <body style="background-color: aqua;">  <h2>JavaScript Loops</h2>  <p id="demo"></p>  <script> var text = ""; var i; for (i = 0; i < 5; i++) { text += "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML = text; </script>  </body> </html>

JavaScript for循環(huán)的用法

語句1在循環(huán)開始前設(shè)置變量 (var i = 0)，語句2定義了循環(huán)運(yùn)行的條件 (i 必須小于 5)，語句3增加值(i++) 每次循環(huán)中的代碼塊都已被執(zhí)行。

1. 語句 1

通常，您將使用語句1初始化循環(huán)中使用的變量 (i = 0)。語句1是可選的，可以在語句1中初始化多個(gè)值(逗號(hào)分隔)。

for (i = 0; i < 5; i++) {    text += "The number is " + i + "<br>"; }

可以省略語句1(如在循環(huán)開始之前設(shè)置值)。

<script>    var cars = ["BMW", "Volvo", "Saab", "Ford"];    var i = 2;    var len = cars.length;    var text = "";     for (; i < len; i++) {        text += cars[i] + "<br>";   }     document.getElementById("demo").innerHTML = text; </script>

JavaScript for循環(huán)的用法

2. 語句 2

經(jīng)常使用語句2來判斷初始變量的條件。

這是情況并非總是如此，JavaScript不在乎。語句2也是可選的.如果語句2返回true，則循環(huán)將重新啟動(dòng)，如果返回false，則循環(huán)將結(jié)束。

如果省略語句2，則必須在循環(huán)中提供一個(gè)中斷。否則循環(huán)永遠(yuǎn)不會(huì)結(jié)束。這將使你的瀏覽器崩潰。

3. 語句 3

經(jīng)常語句3增加初始變量的值.這是情況并非總是如此，JavaScript不在乎，并聲明3是可選的。

聲明3可以做任何事情，如負(fù)增量(i--)，正增量(i = i + 15)，或任何其他。

語句3也可以省略(例如當(dāng)你在循環(huán)中增加你的值)。

<script>    var cars = ["BMW", "Volvo", "Saab", "Ford"];     var i = 0;    var len = cars.length;    var text = "";     for (; i < len; ) {        text += cars[i] + "<br>";        i++;   }    document.getElementById("demo").innerHTML = text; </script>

JavaScript for循環(huán)的用法

四、For/In 循環(huán)

JavaScript for/in 語句遍歷對(duì)象的屬性。

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <title>項(xiàng)目</title>   </head>   <body style="background-color: aqua;">      <h2>JavaScript 循環(huán)</h2>      <p>for/in 語句通過對(duì)象的屬性循環(huán).</p>      <p id="demo"></p>      <script>       var txt = "";       var person = {         fname: "John",         lname: "Doe",         age: 25       };       var x;       for (x in person) {         txt += person[x] + " ";       }       document.getElementById("demo").innerHTML = txt; </script>    </body> </html>

for/in 語句通過對(duì)象的屬性循環(huán).

JavaScript for循環(huán)的用法

到此，關(guān)于“JavaScript for循環(huán)的用法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

JavaScript for循環(huán)的用法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽