for(i in array) 和 for(var i=0;i<array.length;i++) 之间的区别 [重复]

Question

对于所有 javascript/jquery 人来说，这将是一个非常简单的问题。

过去 2 年我一直在编写 javascript，今天我遇到了一个奇怪的问题。

我正在从我的C# Webmethod 获取一个 JSONarray，并由jQuery.ajax() 调用它

当我这样做时

for (i in JSONRaw) {
    Index = Index + 1;
    $('#bottomGridDashboard').append('<tr> <td>' + Index + '</td> <td>' + JSONRaw[i].DisplayName + '</td> <td>' + JSONRaw[i].SpeedInKPH + '</td> <td><img src="' + JSONRaw[i].ImageURL + '" height="20px" alt="" /></td> <td>' + JSONRaw[i].DepotID + '</td> <td>' + JSONRaw[i].RouteID + '/' + JSONRaw[i].ScheduleID + '/' + JSONRaw[i].TripID + '</td> <td>' + JSONRaw[i].Direction + '</td> <td>' + JSONRaw[i].LastStop + '</td> <td> ' + JSONRaw[i].ETAMinutes + ' </td> </tr>');
}

附加表添加了两个额外的行，将每个字段都设置为“未定义”。 See this Image

但是，如果我用

替换循环

for (var i = 0; i < JSONRaw.length;i++ ) {
    Index = Index + 1;
    $('#bottomGridDashboard').append('<tr> <td>' + Index + '</td> <td>' + JSONRaw[i].DisplayName + '</td> <td>' + JSONRaw[i].SpeedInKPH + '</td> <td><img src="' + JSONRaw[i].ImageURL + '" height="20px" alt="" /></td> <td>' + JSONRaw[i].DepotID + '</td> <td>' + JSONRaw[i].RouteID + '/' + JSONRaw[i].ScheduleID + '/' + JSONRaw[i].TripID + '</td> <td>' + JSONRaw[i].Direction + '</td> <td>' + JSONRaw[i].LastStop + '</td> <td> ' + JSONRaw[i].ETAMinutes + ' </td> </tr>');
}

未定义的行消失了..See the image

我为我的愚蠢道歉，但我以前从未遇到过这样的问题。 可能是什么原因？？

编辑：

数组非常好。而且里面没有洞。 另一个观察结果是未定义的属性只出现在我的网格底部。我认为它处理的索引比数组长度多两个。

EDIT-2

我的 console.log 显示了我的数组中的以下元素。

http://i.imgur.com/rI5TjdK.jpg

我已经在我的母版页中声明了原型。

Array.prototype.inArray = function (comparer) {
    for (var i = 0; i < this.length; i++) {
        if (comparer(this[i])) return true;
    }
    return false;
};


Array.prototype.pushIfNotExist = function (element, comparer) {
    if (!this.inArray(comparer)) {
        this.unshift(element);
    }
};

它是否增加了数组长度。 ? ?

Answer 1

简而言之，for ... in 循环遍历 object 的 keys，而类似 c 的 for 循环遍历数组索引。 JS 的类型不是那么强，因此它允许您同时使用两种方法，但数组的正确方法只是第二种方法或“forEach”方法。你可以阅读更多on MDN。

Answer 2

这两个循环有几种不同之处。

(1) 第一个应该是for (var i in JSONRaw)。在window 上设置属性i 可能会产生不明显的后果。

(2) JSONRaw 不是一个数组，而是一个恰好具有定义不明确的length 属性的对象。

(3) 在JSONRaw 上设置了其他属性，出现在第一个循环中。

(4) 数组可能有“洞”。例如，下面的数组在索引1 处有一个洞。

var a = [];
a[0] = 0;
a[2] = 2;

第一种方式会省略1。第二种方式将包括索引1（a[1] 是undefined）。

类似的情况可能会发生如下：

var a = [0, 1];
a.length = 3;

就个人而言，我怀疑 (3)。

在第一个循环中执行console.log 可能会发现问题。

编辑： 从您的调试输出来看，似乎 (3) 是罪魁祸首。 inArray 和 pushIfNotExist 是所有数组上的键，所以第一个 for 循环遍历它们。

如果你要使用第一个循环，你有三个选择：

(1) 不要在Array.prototype 上添加这些功能。通常不鼓励添加到内置原型中。

(2) 使用Object.defineProperty（在 IE8 中不起作用）：

Object.defineProperty(Array.prototype, 'inArray', {
    enumerable: false,   //this makes it not show up in the for loop
    value: function (comparer) {
        for (var i = 0; i < this.length; i++) {
            if (comparer(this[i])) return true;
        }
        return false;
    }
});

(3) 检查是否在原型上定义了键。

for(var i in JSONRaw) {
    if(JSONRaw.hasOwnProperty(i)) {
        //do something
    }
}

尽管由于潜在的陷阱（以及更快的性能），大多数人只使用第二个循环。

Answer 3

JavaScript 的 for-in 和 C# 的 foreach 是完全不同的东西。不要使用for-in 循环数组，除非您使用适当的保护措施，这不是它的用途。它循环遍历对象的可枚举属性，而不是数组索引或条目。

要么使用必要的保护措施，要么像你的第二个例子那样使用通用的for，或者（如果你可以依赖它）使用Array#forEach。

this SO answer 和 on my blog 中的更多信息。

---

另外：确保您在某处声明i（您似乎不在第一个示例中）。如果你不这样做，你就会成为The Horror of Implicit Globals 的牺牲品。

---

我已经在我的母版页中声明了原型。

Array.prototype.inArray = function ...

这就是为什么您不使用for-in 在没有保护措施的情况下循环遍历数组的原因。再次，请参阅上面的链接。您的for-in 循环将循环遍历数组索引属性（"0"、"1" 等等——是的，它们确实是字符串）并且还有您的函数的名称'已添加到Array.prototype（inArray 等）。