松軟科技Web課堂:JavaScript For 回圈-有解無憂

回圈可多次執行代碼塊，

JavaScript 回圈

假如您需要運行代碼多次，且每次使用不同的值，那么回圈（loop）相當方便使用，

通常我們會遇到使用陣列的例子：

不需要這樣寫：

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>";
 }

不同型別的回圈

JavaScript 支持不同型別的回圈：

for - 多次遍歷代碼塊
for/in - 遍歷物件屬性
while - 當指定條件為 true 時回圈一段代碼塊
do/while - 當指定條件為 true 時回圈一段代碼塊

For 回圈

for 回圈是在您希望創建回圈時經常使用的工具，

for 回圈的語法如下：

for (陳述句 1; 陳述句 2; 陳述句 3) {
     要執行的代碼塊
}

陳述句 1 在回圈（代碼塊）開始之前執行，

陳述句 2 定義運行回圈（代碼塊）的條件，

陳述句 3 會在回圈（代碼塊）每次被執行后執行，

實體

for (i = 0; i < 5; i++) {
     text += "數字是 " + i + "<br>";
}

親自試一試

從上面的代碼中，您可以了解到：

陳述句 1 在回圈開始之前設定了一個變數（var i = 0），

陳述句 2 定義運行回圈的條件（i 必須小于 5），

陳述句 3 會在代碼塊每次執行之后對值進行遞增（i++），

陳述句 1

通常，您會使用陳述句 1 來初始化回圈中所使用的的變數（i = 0），

但情況并不總是這樣，JavaScript 不會在意，陳述句 1 是可選的，

您可以在陳述句 1 中初始化多個值（由逗號分隔）：

實體

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

而且您還可以省略陳述句 1（比如在回圈開始前設定好值）：

實體

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

陳述句 2

通常陳述句 2 用于計算初始變數的條件，

但情況并不總是這樣，JavaScript 不會在意，陳述句 2 也是可選的，

如果陳述句 2 回傳 true，那么回圈會重新開始，如果回傳 false，則回圈將結束，

如果省略陳述句 2，那么必須在回圈中提供一個 break，否則回圈永遠不會結束，請在下一章閱讀更多關于 break 的內容，

陳述句 3

通常陳述句 3 會遞增初始變數的值，

但情況并不總是這樣，JavaScript 不會在意，陳述句 3 也是可選的，

陳述句 3 可做任何事情，比如負遞增（i--），正遞增（i = i + 15），或者任何其他事情，

陳述句 3 也可被省略（比如當您在回圈內遞增值時）：

實體

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

For/In 回圈

JavaScript for/in 陳述句遍歷物件的屬性：

實體

var person = {fname:"Bill", lname:"Gates", age:62}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/164490.html

標籤：JavaScript

上一篇：JavaScript高級程式設計讀書筆記

下一篇：基于webpack實作多html頁面開發框架六提取公共代碼