使用包含 MooTools 的 for..in 的 Javascript 数组迭代答案

【问题标题】：Javascript array iteration using for..in with MooTools included使用包含 MooTools 的 for..in 的 Javascript 数组迭代
【发布时间】：2011-01-03 15:30:22
【问题描述】：

我在 MooTools 中遍历一个数组，但在使用简写 for..in 循环遍历数组时看到了其他项目。当我使用常规 for 循环时，它工作正常。这是 MooTools 污染全局命名空间的问题还是我在这里做错了什么？

有一个 createTabs() 函数迭代数组并为数组中的每个值创建一个选项卡：

function createTabs() {
    var myTabs = [["First", "a.png"], ["Second", "b.png"]];
    for(var i in myTabs) {
        var tab = new Tab(myTabs[i][0], myTabs[i][1]);
        console.log(i);
    }
}

这是console.log(i)的输出：

0
1
$family
each
clean
associate
link
contains
extend
getLast
getRandom
include
combine
erase
empty
flatten
hexToRgb
rgbToHex
toJSON

我了解前 2 个索引，但其余的来自哪里？

编辑：感谢 Chetan 和 k Prime 的快速回答。这是有道理的，MooTools 添加的Array.each 是一种更简洁的迭代方式！

现在看起来好多了：

myTabs.each(function(item) {
    var tab = new Tab(item[0], item[1]);
    console.log(item);
});

【问题讨论】：

标签： javascript mootools for-in-loop

【解决方案1】：

正如 Chetan 指出的，for .. in 用于对象属性迭代，而不是数组。但是，您可以使用 hasOwnProprty 遍历当前成员（而不是 MooTools 设置的继承成员），如下所示：

for (i in array)
    if (array.hasOwnProperty(i))
    {
        //.. do stuff ...
    }

或者，更好的是，因为您使用的是 MooTools，只需使用 Array.each 方法：

array.each (function (item, index)
{
    // ... do stuff ...
});

【讨论】：

需要指出的是，基于函数的迭代（例如：array.each）比普通的for或for..in慢得多
请注意，根据 ECMA，.each 将很快成为标准浏览器功能，并且 mootools 在将基于函数的 forEach 的别名定义为 .each 时检查是否有本机支持 - 因此性能下降只是暂时的，主要会影响旧版浏览器。我仍然不建议使用 for ... in 进行数组遍历，除非您需要数组键（但它仍然是一个 hack）

【解决方案2】：

for..in 不适用于数组迭代。它遍历对象的所有非内置属性。由于 MooTools 为 Array 原型添加了更多功能，因此它们现在也是数组属性。看到这个https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Statements/For...in

只需使用基本的 for 循环进行数组迭代。

【讨论】：