Javascript：不理解关联数组上的循环

Question

我有一个 JSON 对象（嗯，这就是我认为我已经定义的），我正在尝试访问其中的数组值。它循环三次是正确的，但 img.iName 的值始终是 undefined

我误会了什么？

<div id="dbgDIV">Debug Div<br></div>
<script>
    // imgs as a JSON array
    var gallery = {"imgs":
                [ // Height and Width to be added
                    {"iName":"File1.jpg", "tName": "File1_th.jpg","cap":"This is a Caption for File1"},
                    {"iName":"File2.jpg", "tName": "File2_th.jpg","cap":"This is a Caption for File2"},
                    {"iName":"File3.jpg", "tName": "File3_th.jpg","cap":"This is a Caption for File3"}
                ],
                "imgCount":"3"
    };
    var dbgDIV = document.getElementById("dbgDIV");
    for (var img in gallery.imgs) {
        dbgDIV.innerHTML = dbgDIV.innerHTML + "img=" + img.iName + "<br>";
        console.log(img.iName);
    }

</script>

Answer 1

for...in 循环是问题所在。只需使用传统的 for 循环来索引数组：

var gallery = {
  "imgs": [
    {
      "iName": "File1.jpg",
      "tName": "File1_th.jpg",
      "cap": "This is a Caption for File1"
    },
    {
      "iName": "File2.jpg",
      "tName": "File2_th.jpg",
      "cap": "This is a Caption for File2"
    },
    {
      "iName": "File3.jpg",
      "tName": "File3_th.jpg",
      "cap": "This is a Caption for File3"
    }
  ],
  "imgCount": "3"
};
var dbgDIV = document.getElementById("dbgDIV");
for (var i = 0; i < gallery.imgs.length; i++) {
  var img = gallery.imgs[i];
  console.log(img.iName);
}

Answer 2

for...in 循环遍历 keys ，所以在数组中它将是

 0,1,2

而且这些号码没有 iName。您可能希望使用 for..of 循环遍历 values：

for(var img of gallery.imgs)

Answer 3

您应该使用 for...of / forEach / for 循环，而不是您使用的 for..in 循环。

快速演示 for..in 和 for..of 循环之间的区别：

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

这意味着它不会真正遍历您想要的数组元素，而是遍历对象的所有可枚举属性。（在 javascript 中所有变量都是对象）

我建议你选择类似的东西：

gallery.imgs.forEach(img => {
  console.log(img.iName) // "File1.jpg" , "File2.jpg", ...
});

Javascript：不理解关联数组上的循环

Javascript : Not Understanding Looping on Associative Array

javascript

json

for-in-loop