不一样的JavaScript(1)——循环

来源:互联网 发布:知乎怎么打不开 编辑:程序博客网 时间:2024/05/17 06:16

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。

原创粉丝点击