不一样的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。