迭代
传统的 for
循环
传统的 for
循环有三个组成部分:
- 初始化: 在第一次执行查看块之前执行
- 条件: 每次执行循环块之前检查一个条件,如果为 false 则退出循环
- 事后的想法: 每次执行循环块后执行
这三个组件通过 ;
符号彼此分开。这三个组件中的每个组件的内容都是可选的,这意味着以下是可能的最小 for
循环:
for (;;) {
// Do stuff
}
当然,你需要在 for
-loop 中的某处包含 if(condition === true) { break; }
或 if(condition === true) { return; }
才能让它停止运行。
但是,通常,初始化用于声明索引,条件用于将该索引与最小值或最大值进行比较,并使用事后补充来增加索引:
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
循环的行为完全相同:
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
在 ES 6 中, for-of
循环是迭代数组值的推荐方法:
Version >= 6
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
循环之间的区别:
Version >= 6
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); // logs 3, 5, 7
}
Array.prototype.keys()
该 Array.prototype.keys()
方法可用于迭代这样的指标:
Version >= 6
let myArray = [1, 2, 3, 4];
for (let i of myArray.keys()) {
let twoValue = myArray[i] * 2;
console.log("2 * value is: %d", twoValue);
}
Array.prototype.forEach()
该 .forEach(...)
方法是在 ES 5 及以上的选项。它受到所有现代浏览器以及 Internet Explorer 9 及更高版本的支持。
Version >= 五
[1, 2, 3, 4].forEach(function(value, index, arr) {
var twoValue = value * 2;
console.log("2 * value is: %d", twoValue);
});
与传统的 for
循环相比,我们不能跳出 .forEach()
的循环。在这种情况下,请使用 for
循环,或使用下面给出的部分迭代。
在所有版本的 JavaScript 中,都可以使用传统的 C 风格 for
循环遍历数组的索引。
var myArray = [1, 2, 3, 4];
for(var i = 0; i < myArray.length; ++i) {
var twoValue = myArray[i] * 2;
console.log("2 * value is: %d", twoValue);
}
也可以使用 while
循环:
var myArray = [1, 2, 3, 4],
i = 0, sum = 0;
while(i++ < myArray.length) {
sum += i;
}
console.log(sum);
Array.prototype.every
从 ES5 开始,如果你想遍历一个数组的一部分,你可以使用 Array.prototype.every
,它迭代直到我们返回 false
:
Version >= 五
// [].every() stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].every(function(value, index, arr) {
console.log(value);
return value % 2 === 0; // iterate until an odd number is found
});
在任何 JavaScript 版本中等效:
var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && (arr[i] % 2 !== 0); i++) { // iterate until an odd number is found
console.log(arr[i]);
}
Array.prototype.some
Array.prototype.some
迭代,直到我们返回 true
:
Version >= 五
// [].some stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].some(function(value, index, arr) {
console.log(value);
return value === 7; // iterate until we find value 7
});
在任何 JavaScript 版本中等效:
var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && arr[i] !== 7; i++) {
console.log(arr[i]);
}
库
最后,许多实用程序库也有自己的 foreach
变体。其中三个最受欢迎的是:
**** 在 jQuery 中的 jQuery.each()
:
$.each(myArray, function(key, value) {
console.log(value);
});
_.each()
,在 Underscore.js :
_.each(myArray, function(value, key, myArray) {
console.log(value);
});
_.forEach()
,在 Lodash.js :
_.forEach(myArray, function(value, key) {
console.log(value);
});
另请参阅关于 SO 的以下问题,其中大部分信息最初发布在: