JavaScript中for和foreach的区别5

时间:2016-10-02 21:07:21

标签: javascript for-loop foreach

我了解到for会对每个数组的元素进行迭代,即使某个有针对性的情况不存在,而forEach会跳过这些不存在的情况。

此外,当写for时,必须指定一个计数器(我不是在谈论for...in),而forEach只是使用函数迭代器。 / p>

好。你能回答以下四个问题吗?

  1. 确实forEach跳过了未来的数组' for没有?
  2. 的情况
  3. forEach是否使用实习计数器(我们只是不必写它)?或者它是一个完全不同于for的机制?
  4. 在某些语言中,forEach不会按照与数组顺序相同的顺序浏览数组。怎么样的JavaScript
  5. 最后,它们之间是否存在其他差异(排除,当然还有语法/语法差异)?

3 个答案:

答案 0 :(得分:3)

因此,当您谈论for循环时,您指的是实际的for循环,而不是for...in(不应在数组上使用)。似乎有一点误解,让我从这开始:

for循环意味着循环遍历数组。并不是说你不应该或它不好但不是它的主要功能 - 它实际上只是循环直到条件满足然后停止。最常见的语法恰好是for (var i =0; i < max; i++),恰好与数组循环匹配,但这并不意味着您不能拥有for (var i = 100; Number.isInteger(i); i = i/2)。所以,话虽如此,这里有你的问题的答案:

1。 forEach是否跳过数组中缺少的项目?

答案:是

forEach是一种数组方法,与mapreduce和其他 一起跳过未分配的广告位。这有助于处理稀疏数组,例如

&#13;
&#13;
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;
&#13;
&#13;

这是一个简单的例子,说明了为什么你可能想要使用稀疏数组循环 - 正如你所看到的,你可以减少代码执行。这是一个稍微复杂一点:

&#13;
&#13;
var arr = [];
arr[5] = "five";
arr[42] = "the answer";
arr[9001] = "over nine thousand";

arr.forEach(function(item) {
  console.log(item);
});
&#13;
&#13;
&#13;

直接for循环将执行(字面上)超过九千次,当你拥有的是三个项目时。

我必须在这里澄清一些内容 - 未设置值是您未分配任何内容的任何内容。分配undefined确实算作分配:

&#13;
&#13;
var arr = [];
arr[5] = "five";
arr[7] = undefined;
arr[10] = "ten";

arr.forEach(function(item) {
  console.log(item);
});
&#13;
&#13;
&#13;

2。 forEach是否使用内部计数器

答案:是

您可以轻松获得当前结果,因为它已经传递回调。

&#13;
&#13;
var arr = [];
arr[5] = "five";
arr[42] = "the answer";
arr[9001] = "over nine thousand";

arr.forEach(function(item, index) {
  console.log(index, "-", item);
});
&#13;
&#13;
&#13;

3。 forEach进入

的顺序是什么

答案:从零开始,按升序排列

上面应该告诉你。这是另一个简单的例子:

&#13;
&#13;
var alphabet = ["a", "b", "c", "d", "e", "f", "g" ];

alphabet.forEach(function(letter, index) {
  console.log(index, letter);
})
&#13;
&#13;
&#13;

4。 forforEach

之间的差异

答案:难以比较

两者之间的差异是我在开头提到的 - for是JavaScript中的通用循环运算符 - 你可以使用它去通过数组,但你也可以将它用于各种其他目的。相比之下,forEach专门绑定到数组。现实地比较两者是非常困难的,但如果我们限制谈论在数组上使用它们,这里有一些要点

for

  • +您可以使用breakreturn提前退出循环,这样您就不需要遍历整个数组了
  • +您可以控制数组遍历,这样您就可以从结尾开始倒计时(for (var i = arr.length; i >= 0; i--)),甚至可以返回或跳过项目(在i--i += 2内部执行循环体)
  • +很好地被认为是一种循环机制,因为它在许多其他语言中被使用
  • +/-您将遍历整个数组长度,即使对于稀疏数组也是如此。
  • - 即使你不关心它,你也必须保持循环计数器。

forEach

  • +与稀疏数组匹配
  • +接受回调,因此您可以通过将功能传递到.forEach来电
  • 来重复使用这些功能
  • +上述的另一个好处是回调体内所有内容的功能范围(尽管ES6 letconst更重要)
  • + Idiomatic JavaScript
  • +/-您将仅查看稀疏数组中的当前项目
  • - 无法提前退出,但您可以使用find
  • - 您无法控制数组的遍历方式。

PS:值得一提的是for...of

感谢@Bergi,我想起了我想要包含的内容:

你没有提到但是存在的一个循环是for...of loop,它在for...in循环的语法中与类似但它被设计为在数组上工作以及其他可迭代对象。它是一个相对较新的构造(至少比forEach更新),因为它在ES6规范中,因此广泛的Web支持可能不存在,但它可以替代两者以上。使用起来非常简单:

&#13;
&#13;
var arr = [];
arr[5] = "five";
arr[7] = "seven";
arr[10] = "ten";

for (item of arr) {
  console.log(item);
}
&#13;
&#13;
&#13;

因此,简而言之,它就像for循环一样,因为它会覆盖所有内容,但您不必声明和维护计数器。

答案 1 :(得分:2)

for关键字是一种语言结构,这是最快且最常见的&#34; raw&#34;迭代事物的方法。它有三种风格:

  1. C风格forfor ( initializer; condition; iterator ) { code... } - 这是最灵活且经过时间考验的版本。要迭代列表,您将开始遍历从0到列表长度的所有列表索引。你也可以 重温每一个,第三个等元素。大多数时候,这已经足够了。

  2. Javascript for-in for (var key in object) { code ... } - 这是查看对象中每个键的好方法,例如,输出JSON对象的所有值。

  3. (ES2015)Javascript for-offor (var item of collection) { code ... } - 这是新的,可在现代浏览器中使用。它允许您跳过索引和计数器,并允许您遍历集合中的每个项目。 (比如,产品列表中的每个对象。)它与C风格的功能相同,但更容易使用。

  4. 但是,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
    

    请务必在浏览器的开发者控制台中试用这些内容!您可以看到上面的每个代码片段。

    请务必查看the MDN reference on iterations.

答案 2 :(得分:1)

vlaz已在评论中回答,我只会:

主要区别在于forEach调用可以在数组中按元素生成一个闭包,这在您需要重用某些内部变量时非常有用。