JavaScript 迭代
示例
传统for循环
传统for循环包含三个组成部分:
初始化:在第一次执行look块之前执行
条件:每次在执行循环块之前都要检查条件,如果为false则退出循环
事后思考:循环块执行后每次执行
这三个组件之间用;符号分隔。这三个组件中每个组件的内容都是可选的,这意味着以下是for可能的最小循环:
for (;;) { //做东西 }
当然,您需要在该-loop内添加if(condition===true){break;} 或if(condition===true){return;},for以使其停止运行。
通常,尽管如此,初始化用于声明索引,条件用于将索引与最小值或最大值进行比较,事后才用于增加索引:
for (var i = 0, length = 10; i < length; i++) { console.log(i); }
使用传统for循环遍历数组
遍历数组的传统方法是:
for (var i = 0, length = myArray.length; i < length; i++) { console.log(myArray[i]); }
或者,如果您希望向后循环,请执行以下操作:
for (var i =myArray.length- 1; i > -1; i--) { console.log(myArray[i]); }
但是,可能有多种变体,例如以下一种:
for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) { console.log(value); }
...或者这个...
var i = 0, length = myArray.length; for (; i < length;) { console.log(myArray[i]); i++; }
...或这个:
var key = 0, value; for (; value = myArray[key++];){ console.log(value); }
哪种效果最好,很大程度上取决于个人喜好和您要实现的特定用例。
请注意,所有浏览器(包括非常老的浏览器)都支持所有这些变体!
一while环
for循环的一种替代方法是while循环。要遍历数组,可以执行以下操作:
var key = 0; while(value = myArray[key++]){ console.log(value); }
像传统的for循环一样,while即使最古老的浏览器也支持循环。
另外,请注意,每个while循环都可以重写为for循环。例如,上述while循环的行为与此for-loop完全相同:
for(var key = 0; value = myArray[key++];){ console.log(value); }
for...in
在JavaScript中,您还可以执行以下操作:
for (i in myArray) { console.log(myArray[i]); }
但是,应谨慎使用,因为for在所有情况下,它的行为都与传统循环不同,并且需要考虑潜在的副作用。请参阅为什么在数组迭代中使用“for...in”是个坏主意?更多细节。
for...of
在ES6中,for-of建议使用循环来遍历数组的值:
let myArray = [1, 2, 3, 4]; for (let value of myArray) { let twoValue = value * 2; console.log("2 * value is: %d", twoValue); }
以下示例显示了for...of循环和for...in循环之间的区别:
let myArray = [3, 5, 7]; myArray.foo = "hello"; for (var i in myArray) { console.log(i); // logs 0, 1, 2, "foo" } for (var i of myArray) { console.log(i); //日志3、5、7 }