如何在JavaScript中迭代对象?

97

我有一个对象。我想在JavaScript中迭代这个对象。应该怎么做?

var dictionary = {
    "data": [
        {"id":"0","name":"ABC"},
        {"id":"1","name":"DEF"}
    ],
    "images": [
        {"id":"0","name":"PQR"},
        {"id":"1","name":"xyz"}
    ]
};
9个回答

144

您可以使用以下代码完成此操作。首先使用dictionary.data获取数据数组并将其分配给data变量。之后,您可以使用普通的for循环对其进行迭代。每一行都将是该数组中的一个行对象。

var data = dictionary.data;

for (var i in data)
{
     var id = data[i].id;
     var name = data[i].name;
}
您可以采用类似的方法来迭代图像数组。

1
在JS中,你应该将花括号放在同一行(我通常主张将花括号放在同一行,但JavaScript很奇怪:http://robertnyman.com/2008/10/16/beware-of-javascript-semicolon-insertion/) - Barnaby
我有相同的数组结构,但为什么它返回未定义? - Tanya von Degurechaff
for...in 不适用于数组。 - mplungjan
1
@TanyavonDegurechaff 尝试移除 dictionary.data,只需遍历 dictionary 即可。 - brendon-ai
1
for...in 用于迭代对象属性。对于数组,请使用 for...of - connexo

30

还有一种方法(对EcmaScript5而言是新的):

dictionary.data.forEach(function(item){
    console.log(item.name + ' ' + item.id);
});

图片处理采用相同的方法


8

类似于这样:

var dictionary = {"data":[{"id":"0","name":"ABC"},{"id":"1", "name":"DEF"}], "images": [{"id":"0","name":"PQR"},{"id":"1","name":"xyz"}]};

for (item in dictionary) {
  for (subItem in dictionary[item]) {
     console.log(dictionary[item][subItem].id);
     console.log(dictionary[item][subItem].name);
  }
}

for...in 不适用于数组。所以使用 for..in 字典,但是使用 (var j=0;j<dictionary[i].length;j++)... - mplungjan

4
使用点表示法和/或括号表示法来访问对象属性,并使用for循环迭代数组:
var d, i;

for (i = 0; i < dictionary.data.length; i++) {
  d = dictionary.data[i];
  alert(d.id + ' ' + d.name);
}

您也可以使用for..in循环迭代数组;但是,添加到Array.prototype的属性可能会显示出来,并且您可能无法按照正确的顺序甚至以任何一致的顺序获取数组元素。


3
使用生成器函数,您可以迭代深层次的键值。

function * deepEntries(obj) { 
    for(let [key, value] of Object.entries(obj)) {
        if (typeof value !== 'object') 
            yield [key, value]
        else 
            for(let entries of deepEntries(value))
                yield [key, ...entries]
    }
}

const dictionary = {
    "data": [
        {"id":"0","name":"ABC"},
        {"id":"1","name":"DEF"}
    ],
    "images": [
        {"id":"0","name":"PQR"},
        {"id":"1","name":"xyz"}
    ]
}

for(let entries of deepEntries(dictionary)) {
    const key = entries.slice(0, -1).join('.')
    const value = entries[entries.length-1]
    console.log(key, value)
}


2
for(index in dictionary) {
 for(var index in dictionary[]){
    // do something
  }
}

0

使用 for 和 foreach 循环

var dictionary = {
     data: [{ id: "0", name: "ABC" }, { id: "1", name: "DEF" }],
     images: [{ id: "0", name: "PQR" }, { id: "1", name: "xyz" }]
};
dictionary.data.forEach(item => {
     console.log(item.id + " " + item.name);
});

for (var i = 0; i < dictionary.data.length; i++) {
     console.log(dictionary.data[i].id + " " + dictionary.data[i].name);
}

0
var dictionary = {
        "data":[{"id":"0","name":"ABC"}, {"id":"1","name":"DEF"}],
        "images": [ {"id":"0","name":"PQR"},"id":"1","name":"xyz"}]
};


for (var key in dictionary) {
    var getKey = dictionary[key];
    getKey.forEach(function(item) {
        console.log(item.name + ' ' + item.id);
    });
}

0

以下是您的所有选项:

1. for...of(ES2015)

var dictionary = {
    "data": [
        {"id":"0","name":"ABC"},
        {"id":"1","name":"DEF"}
    ],
    "images": [
        {"id":"0","name":"PQR"},
        {"id":"1","name":"xyz"}
    ]
};

for (const entry of dictionary.data) {
  console.log(JSON.stringify(entry))
}

2. Array.prototype.forEach (ES5)

第二个:{{link1:Array.prototype.forEach}}(ES5)

var dictionary = {
    "data": [
        {"id":"0","name":"ABC"},
        {"id":"1","name":"DEF"}
    ],
    "images": [
        {"id":"0","name":"PQR"},
        {"id":"1","name":"xyz"}
    ]
};

dictionary.data.forEach(function(entry) {
  console.log(JSON.stringify(entry))
})

3. for() (ES1)

3. for()(ES1)

var dictionary = {
    "data": [
        {"id":"0","name":"ABC"},
        {"id":"1","name":"DEF"}
    ],
    "images": [
        {"id":"0","name":"PQR"},
        {"id":"1","name":"xyz"}
    ]
};

for (let i = 0; i < dictionary.data.length; i++) {
  console.log(JSON.stringify(dictionary.data[i]))
}


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接