我了解到for
会对每个数组的元素进行迭代,即使某个有针对性的情况不存在,而forEach
会跳过这些不存在的情况。
此外,当写for
时,必须指定一个计数器(我不是在谈论for...in
),而forEach
只是使用函数迭代器。 / p>
好。你能回答以下四个问题吗?
forEach
跳过了未来的数组' for
没有?forEach
是否使用实习计数器(我们只是不必写它)?或者它是一个完全不同于for
的机制?forEach
不会按照与数组顺序相同的顺序浏览数组。怎么样的JavaScript 答案 0 :(得分:3)
因此,当您谈论for
循环时,您指的是实际的for
循环,而不是for...in
(不应在数组上使用)。似乎有一点误解,让我从这开始:
for
循环不意味着循环遍历数组。并不是说你不应该或它不好但不是它的主要功能 - 它实际上只是循环直到条件满足然后停止。最常见的语法恰好是for (var i =0; i < max; i++)
,恰好与数组循环匹配,但这并不意味着您不能拥有for (var i = 100; Number.isInteger(i); i = i/2)
。所以,话虽如此,这里有你的问题的答案:
forEach
是否跳过数组中缺少的项目? forEach
是一种数组方法,与map
,reduce
和其他 一起跳过未分配的广告位。这有助于处理稀疏数组,例如
var arr = [];
arr[5] = "five";
arr[7] = "seven";
arr[10] = "ten";
console.log("---using forEach---");
arr.forEach(function(item) {
console.log(item);
});
console.log("---using a for-loop---");
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
&#13;
这是一个简单的例子,说明了为什么你可能想要使用稀疏数组循环 - 正如你所看到的,你可以减少代码执行。这是一个稍微复杂一点:
var arr = [];
arr[5] = "five";
arr[42] = "the answer";
arr[9001] = "over nine thousand";
arr.forEach(function(item) {
console.log(item);
});
&#13;
直接for
循环将执行(字面上)超过九千次,当你拥有的是三个项目时。
我必须在这里澄清一些内容 - 未设置值是您未分配任何内容的任何内容。分配undefined
确实算作分配:
var arr = [];
arr[5] = "five";
arr[7] = undefined;
arr[10] = "ten";
arr.forEach(function(item) {
console.log(item);
});
&#13;
forEach
是否使用内部计数器您可以轻松获得当前结果,因为它已经传递回调。
var arr = [];
arr[5] = "five";
arr[42] = "the answer";
arr[9001] = "over nine thousand";
arr.forEach(function(item, index) {
console.log(index, "-", item);
});
&#13;
forEach
进入上面应该告诉你。这是另一个简单的例子:
var alphabet = ["a", "b", "c", "d", "e", "f", "g" ];
alphabet.forEach(function(letter, index) {
console.log(index, letter);
})
&#13;
for
和forEach
两者之间的差异是我在开头提到的 - for
是JavaScript中的通用循环运算符 - 你可以使用它去通过数组,但你也可以将它用于各种其他目的。相比之下,forEach
专门绑定到数组。现实地比较两者是非常困难的,但如果我们限制仅谈论在数组上使用它们,这里有一些要点
for
break
或return
提前退出循环,这样您就不需要遍历整个数组了for (var i = arr.length; i >= 0; i--)
),甚至可以返回或跳过项目(在i--
或i += 2
内部执行循环体)forEach
.forEach
来电let
和const
更重要)find
。for...of
感谢@Bergi,我想起了我想要包含的内容:
你没有提到但是存在的一个循环是for...of
loop,它在for...in
循环的语法中与类似但它被设计为在数组上工作以及其他可迭代对象。它是一个相对较新的构造(至少比forEach
更新),因为它在ES6规范中,因此广泛的Web支持可能不存在,但它可以替代两者以上。使用起来非常简单:
var arr = [];
arr[5] = "five";
arr[7] = "seven";
arr[10] = "ten";
for (item of arr) {
console.log(item);
}
&#13;
因此,简而言之,它就像for
循环一样,因为它会覆盖所有内容,但您不必声明和维护计数器。
答案 1 :(得分:2)
for
关键字是一种语言结构,这是最快且最常见的&#34; raw&#34;迭代事物的方法。它有三种风格:
C风格for
:for ( initializer; condition; iterator ) { code... }
- 这是最灵活且经过时间考验的版本。要迭代列表,您将开始遍历从0到列表长度的所有列表索引。你也可以
重温每一个,第三个等元素。大多数时候,这已经足够了。
Javascript for-in
for (var key in object) { code ... }
- 这是查看对象中每个键的好方法,例如,输出JSON对象的所有值。
(ES2015)Javascript for-of
:for (var item of collection) { code ... }
- 这是新的,可在现代浏览器中使用。它允许您跳过索引和计数器,并允许您遍历集合中的每个项目。 (比如,产品列表中的每个对象。)它与C风格的功能相同,但更容易使用。
但是,forEach
函数特定于Javascript中的Array
个对象,并允许您为数组中的每个项运行一个函数。如果你有一个实用功能可以为你完成所有工作,那就太好了。
以下是如何使用以上所有类型的迭代:
// most plain kind of array with a length of 7
var myArray = [1, 2, 3, 4, 5, 6, undefined];
// a weird kind of array with no values between index 3 and 100
// its length is 102
var mySparseArray = [1, 2, 3, 4];
mySparseArray[100] = 5;
mySparseArray[101] = 6;
// 1. C-style for
// ** can control how index is incremented
// ** needs an extra variable to iterate with
for (var i = 0; i < myArray.length; i += 1) {
console.log(myArray[i]);
// logs 1, 2, 3, 4, 5, 6, undefined
}
for (var i = 0; i < mySparseArray.length; i += 1) {
console.log(myArray[i]);
// logs 1, 2, 3, 4, undefined, undefined, ... (up to index 100), 5, 6
}
// 2. for..in
// ** keys are iterated over in non-guaranteed order
// (you might get 2, "length", 1, 0, 3)
// ** all enumerable keys are included, that might include things other than indexes.
for (var key in myArray) {
console.log(myArray[key]);
// logs 1, 2, 3, 4, 5, 6
}
for (var key in mySparseArray) {
console.log(mySparseArray[key]);
// logs 1, 2, 3, 4, 5, 6
// this for-loop "thinks" the array is an object with numbers for keys
}
// 3. for..of
// ** only available in browsers with ES2015 support
// ** supports many other things than Arrays - TypedArrays, Iterators...
for (var item of myArray) {
console.log(item);
}
for (var item of mySparseArray) {
console.log(item);
// logs 1, 2, 3, 4, undefined, undefined, ... (up to index 100), 5, 6
}
// 4. forEach
// ** calls a function for each element (considered slow)
// ** supports only Arrays (unless you call it with Array.prototype.forEach.call)
function myCallback(element) {
console.log(element);
}
myArray.forEach(myCallback); // logs 1, 2, 3, 4, 5, 6
mySparseArray.forEach(myCallback); // logs 1, 2, 3, 4, 5, 6
请务必在浏览器的开发者控制台中试用这些内容!您可以看到上面的每个代码片段。
答案 2 :(得分:1)
vlaz已在评论中回答,我只会:
主要区别在于forEach
调用可以在数组中按元素生成一个闭包,这在您需要重用某些内部变量时非常有用。