developer tip

JavaScript에서 객체를 반복하는 방법은 무엇입니까?

optionbox 2020. 9. 3. 08:23
반응형

JavaScript에서 객체를 반복하는 방법은 무엇입니까? [복제]


이 질문에 이미 답변이 있습니다.

이 물건이 있습니다. 이 개체를 JavaScript에서 반복하고 싶습니다. 이것이 어떻게 가능한지?

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

아래 코드로 할 수 있습니다. 먼저 dictionary.data를 사용하여 데이터 배열을 가져 와서 데이터 변수에 할당합니다. 그 후에 일반 for 루프를 사용하여 반복 할 수 있습니다. 각 행은 배열의 행 개체가됩니다.

var data = dictionary.data;

for (var i in data)
{
     var id = data[i].id;
     var name = data[i].name;
}

비슷한 접근 방식을 따라 이미지 배열을 반복 할 수 있습니다.


이 방법도 있습니다 (EcmaScript5의 새로운 기능).

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

이미지에 대한 동일한 접근 방식


그런 것 :

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루프액세스 하여 배열을 반복합니다.

var d, i;

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

for..in 루프를 사용하여 배열을 반복 할 수도 있습니다 . 그러나에 추가 된 속성 Array.prototype이 표시 될 수 있으며 배열 요소를 올바른 순서로 가져 오거나 일관된 순서로 가져 오지 못할 수도 있습니다.


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

생성기 함수를 사용하면 깊은 키-값을 반복 할 수 있습니다.

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)
}


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

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

다음은 모든 옵션입니다.

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)

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)

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

참고 URL : https://stackoverflow.com/questions/15496508/how-to-iterate-object-in-javascript

반응형