16JavaScript for循環

時間 2019-12-09

標籤 16javascript javascript 循環欄目 JavaScript 简体版

原文原文鏈接

1.JavaScript 循環

若是但願一遍又一遍地運行相同的代碼，而且每次的值都不一樣，那麼使用循環是很方便的。html

咱們能夠這樣輸出數組的值：數組

通常寫法：瀏覽器

document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
document.write(cars[3] + "<br>"); 
document.write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>");

for循環寫法：工具

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Yubaba</title>
</head>        
<body>

<script>
arr=["1","2","3","4","5","6"];
for (var i=0;i<arr.length;i++){
    document.write(arr[i] + "<br>");
}
</script>

</body>
</html>

結果：spa

2.不一樣類型的循環

JavaScript 支持不一樣類型的循環：code

for - 循環代碼塊必定的次數
for/in - 循環遍歷對象的屬性
while - 當指定的條件爲 true 時循環指定的代碼塊
do/while - 一樣當指定的條件爲 true 時循環指定的代碼塊

3.For 循環

for 循環是您在但願建立循環時常會用到的工具。htm

下面是 for 循環的語法：對象

for (語句 1; 語句 2; 語句 3)
{
    被執行的代碼塊
}

語句 1 （代碼塊）開始前執行blog

語句 2 定義運行循環（代碼塊）的條件ip

語句 3 在循環（代碼塊）已被執行以後執行

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Yubaba</title>
 6 </head>
 7 <body>
 8 
 9 <p>點擊按鈕循環代碼6次。</p>
10 <button onclick="myFunction()">點擊這裏</button>
11 <p id="demo"></p>
12 <script>
13 function myFunction(){
14     var x="";
15     for (var i=0;i<6;i++){
16         x=x+"該數字爲 " + i + "<br>";
17     }
18     document.getElementById("demo").innerHTML=x;
19 }
20 </script>
21 
22 </body>
23 </html>

運行結果：

for中的語句 1

一般咱們會使用語句 1 初始化循環中所用的變量 (var i=0)。

語句 1 是可選的，也就是說不使用語句 1 也能夠。

咱們能夠在語句 1 中初始化任意（或者多個）值：

如：

for (var i=0,len=cars.length; i<len; i++)
{ 
    document.write(cars[i] + "<br>");
}

同時還能夠省略語句 1（好比在循環開始前已經設置了值時）：

如：

var i=2,len=cars.length;
for (; i<len; i++)
{ 
    document.write(cars[i] + "<br>");
}

for中的語句 2

一般語句 2 用於評估初始變量的條件。

語句 2 一樣是可選的。

若是語句 2 返回 true，則循環再次開始，若是返回 false，則循環將結束。

注意：若是咱們省略了語句 2，那麼必須在循環內提供 break。不然循環就沒法停下來。這樣有可能令瀏覽器崩潰。

for中的語句 3

一般語句 3 會增長初始變量的值。

語句 3 也是可選的。

語句 3 有多種用法。增量能夠是負數 (i--)，或者更大 (i=i+15)。

語句 3 也能夠省略（好比當循環內部有相應的代碼時）：

var i=0,len=cars.length;
for (; i<len; )
{ 
    document.write(cars[i] + "<br>");
    i++;
}

4.For/In 循環

JavaScript for/in 語句循環遍歷對象的屬性：

實例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Yubaba</title>
 6 </head>
 7 <body>
 8     
 9 <p>點擊下面的按鈕，經過for in循環遍歷對象 "person" 的屬性。</p>
10 <button onclick="myFunction()">點擊這裏</button>
11 <p id="demo"></p>
12 <script>
13 function myFunction(){
14     var x;
15     var txt="";
16     var person={fname:"Bill",lname:"Gates",age:56}; 
17     for (x in person){
18         txt=txt + person[x]+" ";
19     }
20     document.getElementById("demo").innerHTML=txt;
21 }
22 </script>
23     
24 </body>
25 </html>