JavaScript 'for in' 语句给出不可预测的结果

JavaScript 'for in' statement giving unpredicted results

本文关键字：不可预测 结果 in for JavaScript 语句      更新时间：2023-09-26

我有以下代码：

var images = document.getElementsByTagName('img');
if (screen.width > 640) {
    for (var image in images) {
        image = images[image];
        console.log(image['src']);
    }
}

页面上只有一个图像，但由于某种原因，for ... in语句循环遍历images三次。这是为什么呢？

示例：http://jsfiddle.net/OliverJAsh/C8egs/

您不仅要遍历元素列表，还要遍历命名方法：

  • length
  • item
  • namedItem

正确的方法是：

for (var i=0; i<images.length; i++) {
    var image = images[i];
    console.log(image['src']);
}

除了使用document.getElementsByTagName('img')，还可以使用document.images。

http://jsfiddle.net/C8egs/2/

for(var x in var)不应该

用于通过数组，因为它通过对象中的键。

如果您这样做：

for (var image in images) {
        console.log(image );
}

您会注意到控制台输出将显示"长度"(以及对象上的任何其他属性(;

而是像这样使用它：

for (var i=0; i < images.length; i++) {
    var image = images[i];
    console.log(image['src']);
}

问题在于您的for..in循环。for..in循环循环遍历对象的所有可枚举属性。 getElementsByTagName返回一个NodeList。 除了找到的元素之外，所有nodeList对象至少有两个附加属性：一个length属性，包含找到的元素数，以及一个item属性，一个以数字方式访问元素的方法(遵循 DOM 规范(。

如果要循环遍历类似数组的对象，则应改用纯for循环：

for (var i = 0; i < images.length; i++) {
    console.log(images[i].src);
}
循环不是

三次，实际上是循环四次。循环在不同的浏览器中有所不同。我在IE8和FireFox中检查了它在 fireFox 中，它循环了四次，控制台输出为

  • 映像节点
  • 长度
  • 项目
  • 命名项

在IE8中，它循环了两次

  • 长度
  • IMG 标记的索引位置

所以你必须纠正你的 for 循环，如下所示

var images = document.getElementsByTagName('img');
if (screen.width > 640) {
    for (var i in images) {
        image2 = images[i];
        if(image2.nodeName == "IMG" || image2.nodeName == "img")
        console.log(image2['src']);
    }
}
JavaScript

的for in迭代对象的属性，而不是数组的内容。 试试这个：

var obj = {"name": "one", "date": 10, "help": false};
for (var key in obj) {
    alert(key);
}

您必须通过访问数组中项的索引来诉诸迭代。

for (var idx = 0, numImages = images.length; idx < numImages ; idx++) {
      image = images[idx];
      console.log(image['src']);      
}
相关文章：