用于... in循环的JavaScript具有奇怪的结果

Question

我有以下对象:

var r = {
    obj: $(this),
    children: $(this).children(),
    panes: $('.rotatorPane', $(this)),
    tagNames : [],
    captions: [],
    subcaptions: []     
};

$(this) 指以下div:

<div class="myRotator">
    <div class="rotatorPane">

    </div>
    <div class="rotatorPane" id="pane3">

    </div>

    <img src="img/1.jpg" alt="pane 1" class="rotatorPane" data-caption="Lorem Ipsum" data-subcaption="Dolor sit amet" />

</div>

我遇到的问题是......循环中的以下内容:

for(pane in r.panes){
    console.log(pane);
}

输出按预期开始:

0
1
2

但后来我得到一堆方法名称作为输出:

length
prevObject
context
selector
constructor
init
jquery
size
toArray
get
...etc

有谁知道为什么会这样？

Answer 1

不要for ... in在数组或类似数组的东西上使用.使用数字索引变量.

for (var i = 0; i < r.panes.length; ++i) {
  var pane = r.panes[i];
  // ...
}

该for ... in表单用于迭代对象的属性 - 所有这些. 如果要遍历数组的索引属性(或者,再次,您将其视为数组),请始终使用数字索引.

在这种情况下,所讨论的类似数组的对象是一个jQuery对象,除了数字索引属性之外,它还具有各种属性.