JavaScript“for in”循环的问题答案

【问题标题】：Problems with JavaScript "for in" loopJavaScript“for in”循环的问题
【发布时间】：2011-10-21 22:05:15
【问题描述】：

我有一组对象，它们将成为我网站中某个菜单的基础。它将使用 JavaScript 构建：

[
  {"menuName":"Contact Info","sectionName":"contacts"},
  {"menuName":"Facilities","sectionName":"facilities"},
  {"menuName":"Locations","sectionName":"locations"},
  {"menuName":"Packages","sectionName":"packages"},
  {"menuName":"Policies","sectionName":"policies"},
  {"menuName":"Reviews","sectionName":"reviews"},
  {"menuName":"Rooms","sectionName":"rooms"}
]

所以我决定使用“for in 循环”，这样我就不必处理索引和长度了。我希望在构建时菜单中会出现七个项目（我将使用<ul> 和<li>）。

当我在调试时，不小心给<li> 添加了背景颜色，这时候一切都乱套了。在可见的第 7 个菜单 <li> 之后，我发现至少 30 个空的 <li>。

为什么会这样？

编辑：

这是循环。该循环为稍后解析的另一个函数创建另一个对象。（它创建了一个<li>，内部有一个<a>，其属性由前一个数组提供。）我知道另一个函数工作正常，因为当我将这个“for-in”循环更改为普通的for循环或while循环时，它工作正常。

this.sectionList = function(menu, id) {
    var list = new Array();

    for(var i in menu) {
        var listItem = {
            "element" : "li",
            "contains" : [{
                "element" : "a",
                "attr" : {
                    "href" : menu[i].sectionName + ':' + id
                },
                "contains" : menu[i].menuName
            }]
        }
        list.push(listItem);
    }
}

【问题讨论】：

谁知道？你能用你的代码展示你在做什么吗？
你能把你的循环代码粘贴进去吗？
你是如何添加背景颜色的？
我的 ESP 今天不工作了。请实际解释您的问题。您的问题中没有 <li>-generating 代码，您不应该使用 for in 遍历数组。
for in loops 用于迭代对象成员，not for 用于迭代数组。 .length 属性真的有这么多需要处理吗？

标签： javascript arrays object loops for-in-loop

【解决方案1】：

for in 迭代对象属性。 Javascript 数组只是一种特定类型的对象，它具有一些方便的属性，可帮助您将它们视为数组，但它们仍然具有内部对象属性.. 您并不是要遍历这些）。

因此，您不应该使用for in 来迭代数组。仅当您添加背景颜色时，您才会明白这一点，但情况总是如此。

相反，使用计数器和数组 .length 循环。

【讨论】：

稀疏数组呢？ var arr = []; arr[1236345566] = 10; arr[2745453222] = 30; var sum = 0; for (var i = 0, len = arr.length; i < len; ++i) { sum += Number(arr[i]); } 会很慢。这是一个人为的例子，但在很多情况下，您可能需要对稀疏数组的所有成员进行实际操作。
@kpozin：会的，但这只是因为Array 不是为了这个。

【解决方案2】：

您的对象获取由 JavaScript 本身传递的方法和属性。这些是每个对象在创建时获取的方法。

您必须使用.hasOwnProperty 才能仅查找您分配给对象的属性和方法！

for(var i in myObject){
  if(myObject.hasOwnProperty(i)){
    console.log(myObject.i);
  }
}

希望有帮助！

这里有两篇文章帮助我两个更好地理解它：

http://bonsaiden.github.com/JavaScript-Garden/#object.hasownproperty http://javascriptweblog.wordpress.com/2011/01/04/exploring-javascript-for-in-loops/

【讨论】：

不要这样做。而是正确循环。
这不是遍历数组的方式。
是的。但它是如何循环对象的，不是吗？我以为他有两个循环，一个用于数组本身，一个用于其中的对象。
@dotweb：我想你已经回答了我的问题（即使没有附加信息）。我从来不知道 for-in 也会贯穿对象的原型。
@dotweb：是的，但他正在遍历数组。当对答案有争议时乞求接受似乎有点生...

【解决方案3】：

我认为在这个 jsFiddle 中迭代数据结构的两种方式没有区别：http://jsfiddle.net/jfriend00/HqLdk/。

您应该在数组上使用for (x in array) 有很多充分的理由。主要原因是这种类型的迭代迭代对象的属性，而不仅仅是数组元素。这些属性可以包括数组的其他属性（如果已添加），因为 for (var i = 0; i < array.length; i++) 方法不会遇到添加属性的问题，因为根据定义，它只会遍历数组元素。

有点幸运的是，当没有向数组对象添加其他属性时，对属性的迭代恰好包括数组元素。该语言不希望您以这种方式迭代数组元素。您应该使用

迭代数组

for (var i = 0; i < array.length; i++)。

我理解简单语法的诱惑，但这不是正确的做法。

【讨论】：