JavaScript“for in”的问题环形

发布于 2024-11-28 11:39:54 字数 1419 浏览 0 评论 0原文

我有一系列对象，它们将成为我网站中某个菜单的基础。它将使用 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 循环”，这样我就不必处理索引和长度。我希望构建时菜单中会出现七个项目（我将使用

）。

当我在调试时不小心向

添加了背景颜色时，一切都崩溃了。我在可见的第 7 个菜单

之后发现了至少 30 个空

。

为什么会发生这种情况？

编辑：

这是循环。该循环创建另一个对象供另一个函数稍后解析。（它创建一个

，其中包含一个，其中包含前一个数组提供的属性。）我知道另一个函数工作正常，因为当我更改时这个“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);
    }
}

原文

I have an array of objects which will be the basis for a certain menu in my website. It will be build using 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"}
]

So I decided to use the "for in loop" so that I won't have to deal with indexes and lengths. I expect seven items to appear in the menu when it gets built (I'll be using <ul> and <li>).

When I was debugging and accidentally added a background color to the <li>, is when all hell broke loose. I found at least 30 empty <li> after the visible 7th menu <li>.

Why is this happening?

EDIT:

Here's the loop. The loop creates another object for another function to parse later on. (It creates an <li> with an <a> inside with properties provided by the previous array.) I know that the other function works fine because when I change this "for-in" loop to an ordinary for loop, or while loop, it works fine.

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);
    }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

做个ˇ局外人 2024-12-05 11:39:54

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

因此，您不应该使用 for in 来迭代数组。只有当您添加背景颜色时，这一点才变得明显，但情况始终如此。

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

回复收藏 0 原文

放赐 2024-12-05 11:39:54

您的对象获取 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/

Your object gets methods and properties passed by JavaScript itself. Those are methods that every object gets when its created.

You have to use .hasOwnProperty to find only the properties and methods you assigned to the object!

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

Hope that helps!

Here are two articles that helped me two understand it better:

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

回复收藏 0 原文

坠似风落 2024-12-05 11:39:54

我认为在此 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++) 迭代数组。

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