不一樣的JavaScript（1）——循環

1. 和很多語言中的循環一樣，JavaScript支持for, while, do...while循環，並且在循環體內支持continue和break；

2. JavaScript的continue和break除了能終止當前最裏面一層循環外，還支持跳轉到特定的標籤（通常跳轉到外層循環）。比如下面的例子：

2.1 break後不跟標籤：

for (var i = 0; i < 3; ++i) {
    for (var j = 0; j < 3; ++j) {
        if (i == 1 && j == 1) {
            break;
        }
        console.log('(', i, ', ', j, ')');
    }
}

上次代碼的輸出：(0, 0), (0, 1), (0, 2), (1, 0), (2, 0), (2, 1), (2, 2)。也就是當運行到i等於1、j也等於1時，終止運行最裏層循環，當外層循環從i等於2處接着運行。

2.2 break後跟標籤：

outerloop:
for (var i = 0; i < 4; ++i) {
    for (var j = 0; j < 4; ++j) {
        if (i == 1 && j == 1) {
            break outerloop;
        }
        console.log('(', i, ', ', j, ')');
    }
}

上面的代碼 的輸出：(0, 0), (0, 1), (0, 2), (1, 0)。也就是當運行到i等於1、j也等於1時，外層循環也終止了。

2. 3 continue後不跟標籤：

for (var i = 0; i < 3; ++i) {
    for (var j = 0; j < 3; ++j) {
        if (i == 1 && j == 1) {
            continue;
        }
        console.log('(', i, ', ', j, ')');
    }
}

上面的代碼的輸出：(0, 0), (0, 1), (0, 2), (1, 0), (1, 2), (2, 0), (2, 1), (2, 2)。也就是當運行到i等於1、j也等於1時，最裏層循環跳過從i等於1、j等於2處繼續運行。

2.4 continue後跟標籤：

outerloop:
for (var i = 0; i < 4; ++i) {
    for (var j = 0; j < 4; ++j) {
        if (i == 1 && j == 1) {
            continue outerloop;
        }
        console.log('(', i, ', ', j, ')');
    }
}

上面的代碼 的輸出：(0, 0), (0, 1), (0, 2), (1, 0), (2, 0), (2, 1), (2, 2)。也就是當運行到i等於1、j也等於1時，外層循環跳過從i等於2、j等於0處繼續運行。

3. JavaScript還有for...in循環，用來遍歷一個object的所有屬性。

3.1 下面代碼遍歷people中的所有屬性：

var people = {
    name: "harry",
    age: 32
};
for (var property in people) {
    console.log(property, ": ", people[property]);
}

上面代碼用一個for...in循環遍歷people中的所有屬性，因此輸出的兩行分別爲name: harry和age: 32。JavaScript的標準中沒有規定for...in循環遍歷時的順序，因此輸出的兩行的順序在不同的瀏覽器中可能會有不同。

3.2 有些程序員用for...in循環去遍歷數組中的每個元素，比如下面的代碼：

var numbers = [2, 3, 4];
for (var index in numbers) {
    console.log(index, ": ", numbers[index]);
}

上面的代碼輸出三行，分別是0: 2、1: 3和2: 4。在這個例子中，輸出和我們的預期一致。但for...in循環通常不推薦用來便利一個數組。不推薦的第一個理由是當數組中有undefined的元素是，for...in循環會漏掉這個元素。

var numbers = new Array();
numbers[4] = 4;

console.log("output of for loop: ");
for (var i = 0; i < numbers.length; ++i) {
    console.log(i, ": ", numbers[i]);
}

console.log("output of for...in loop: ");
for (var index in numbers) {
    console.log(index, ": ", numbers[index]);
}

上面的代碼在創建一個數組實例之後，把下標爲4的元素設爲4。由於數組是連續的，不能有空洞，因此下標爲0, 1, 2, 3的四個元素都會填上undefined。這個undefined的值在for循環中會被遍歷到，因此for循環的輸出是5行，分別是0: undefined、1: undefined、2: undefined、3: undefined和4: 4。但如果用for...in循環遍歷，undefined的元素將會被過濾掉，而只輸出一行4: 4。

不推薦用for...in循環來遍歷數組的第二個理由是for...in循環會列出數組的屬性。

Array.prototype.purpose = "level";
var numbers = [2, 3, 4];
for (var index in numbers) {
    console.log(index, ": ", numbers[index]);
}

上述代碼在爲數組的prototype中添加了一個屬性purpose，因此數組實例numbers也自動有了這個屬性。for...in循環除了能遍歷出數組中的3個元素，還能遍歷出這個屬性。因此上面代碼的輸出有4行，分別爲0: 2、1: 3、2: 4和purpose: level。