Question

就像我上周提出的问题一样，找到here。我试图通过创建一个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]);
    }
})

因此，不是单步执行数组位置，我试图通过每次单击下一个按钮来逐步浏览每个项目。它是否会像单步执行一样完成一个数组？

我也不是在寻找任何人为我编写代码，只是为了解释它是如何工作的。提前谢谢。

Answer 1

使用现有的对象结构，一种方法如下：

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++]);
})

Answer 2

你可以这样做。

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对象并自己将密钥保存到同一个数组中。

Answer 3

此方法将对象转换为数组，然后您可以一次单步执行一个元素：

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++]);
});

Working 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);

Working Fiddle 2

单步执行对象项

3 个答案: