遍历对象项

Stepping through object items

本文关键字：对象 遍历      更新时间：2023-09-26

很像我上周问的问题，可以在这里找到。我正试图通过创建一个Images对象来做同样的事情，而不是将它们放在数组中。这是我目前掌握的代码。

JS

var Images = {
    image1: {
        href: "Image",
        text: "Bleh"
    },
    image2: {
        href: "Image",
        text: "Helb"
    }
};
$("#next").on("click", function(){
    for(var key in Images){
        console.log(Images[key]);
    }
})

因此，我尝试让它在每次单击下一个按钮时遍历每个项目，而不是遍历数组位置它会以与遍历数组相同的方式执行吗？

我也不想找人帮我写代码，只是想解释一下它是如何工作的。提前谢谢。

使用现有的对象结构，有一种方法看起来像这样：

var currPosition = 0;
$("#next").on("click", function(){
    console.log(Images['image' + ++currPosition]);
})

也就是说，你的对象只是将它们列为image1、image2等……这对我来说是一个数组。所以，如果你的结构更像：

var Images = [{ href: "Image", text: "Bleh" }, { href: "Image", text: "Helb"}];

然后代码看起来会更干净一点：

var currPosition = 0;
$("#next").on("click", function(){
    console.log(Images[currPosition++]);
})

您可以这样做。

var i = 0;
var keys = [];
if(Images.keys != undefined)
{
    keys = Images.keys();
}
else 
{
    for (var prop in Images)
    {
        if(Images.hasOwnProperty(prop))
        {
            keys.push(prop);
        }
    }
}
$("#next").on("click", function(){
    console.log(Images[i]);
    i++;
});

另外请注意，旧的浏览器可能不支持Object.keys（）方法。若您想处理这个问题，您可能需要循环遍历Images对象，并将键保存到相同的数组中。

这种方法将对象转换为数组，然后您可以一次遍历一个元素：

var arr= [],
    idx= 0;
for(var img in Images) {
  for(var key in Images[img]) {
    arr.push(img+': '+Images[img][key]);
  }
};
$("#next").on("click", function(){
  console.log(arr[idx++]);
});

工作Fiddle 1

上面的代码假设有两个级别的对象。

下面的代码将递归遍历任意数量的级别：

var arr= [],
    idx= 0;
function toArray(name, obj) {
  for(var key in obj) {
    if(typeof obj[key] === 'object') {
      toArray(name+'.'+key, obj[key]);
    }
    else {      
      arr.push(name+'.'+key+': '+obj[key]);
    }
  }
};
toArray('Images', Images);

工作Fiddle 2

相关文章：