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

JavaScript로 된 객체가 있습니다.

{
    abc: '...',
    bca: '...',
    zzz: '...',
    xxx: '...',
    ccc: '...',
    // ...
}

for속성을 얻기 위해 루프 를 사용하고 싶습니다 . 그리고 부분적으로 반복하고 싶습니다 (모든 객체 속성이 한 번에 아님).

간단한 배열을 사용하면 표준 for루프로 수행 할 수 있습니다 .

for (i = 0; i < 100; i++) { ... } // first part
for (i = 100; i < 300; i++) { ... } // second
for (i = 300; i < arr.length; i++) { ... } // last

그러나 객체로 어떻게합니까?



답변

대부분의 객체에는 다음을 사용하십시오 for .. in.

for (let key in yourobject) {
  console.log(key, yourobject[key]);
}

ES6에서는 키와 값을 동시에 필요로하는 경우

for (let [key, value] of Object.entries(yourobject)) {
    console.log(key, value);
}

상속 된 속성을 로깅하지 않으려면 hasOwnProperty로 확인하십시오 .

for (let key in yourobject) {
   if (yourobject.hasOwnProperty(key)) {
      console.log(key, yourobject[key]);
   }
}

hasOwnProperty간단한 객체 (예 :와 같이 만든 객체)를 사용하는 경우 키를 반복 할 때 확인할 필요가 없습니다 {}.

이 MDN 설명서 는 객체 및 해당 속성을 처리하는 방법을보다 일반적으로 설명합니다.

“청크 단위로”하려면 배열에서 키를 추출하는 것이 가장 좋습니다. 주문이 보장되지 않으므로 올바른 방법입니다. 최신 브라우저에서 사용할 수 있습니다

let keys = Object.keys(yourobject);

호환성을 높이려면 다음을 수행하는 것이 좋습니다.

 let keys = [];
 for (let key in yourobject) {
     if (yourobject.hasOwnProperty(key)) keys.push(key);
 }

그런 다음 색인별로 속성을 반복 할 수 있습니다. yourobject[keys[i]]:

for (let i=300; i < keys.length && i < 600; i++) {
   console.log(keys[i], yourobject[keys[i]]);
}


답변

최신 브라우저를위한 또 다른 반복 솔루션은 다음과 같습니다.

Object.keys(obj)
  .filter((k, i) => i >= 100 && i < 300)
  .forEach(k => console.log(obj[k]));

또는 필터 기능이없는 경우 :

Object.keys(obj).forEach((k, i) => {
    if (i >= 100 && i < 300) {
        console.log(obj[k]);
    }
});

그러나 JavaScript 객체의 속성이 정렬되지 않은 것, 즉 순서가 없다는 것을 고려해야합니다.


답변

Object.entries당신을 사용 하면 이런 식으로 할 수 있습니다.

 // array like object with random key ordering
 const anObj = { 100: 'a', 2: 'b', 7: 'c' };
 console.log(Object.entries(anObj)); // [ ['2', 'b'],['7', 'c'],['100', 'a'] ]

Object.entries () 메소드는 주어진 객체의 자체 열거 가능 속성 [키, 값]의 배열을 반환합니다

따라서 객체를 반복하고 각 객체를 가지고 key있고 value이와 같은 것을 얻을 수 있습니다.

const anObj = { 100: 'a', 2: 'b', 7: 'c' };
Object.entries(anObj).map(obj => {
   const key   = obj[0];
   const value = obj[1];

   // do whatever you want with those values.
});

또는 이런

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

참조를 위해 객체 항목에 대한 MDN 문서를보십시오


답변

새로운 ES6 / ES2015 기능을 사용하면 해시를 반복하기 위해 더 이상 객체를 사용할 필요가 없습니다. 지도 를 사용할 수 있습니다 . Javascript Maps는 키를 삽입 순서대로 유지하므로 항상 해킹 인 hasOwnProperty를 확인하지 않고도 키를 반복 할 수 있습니다.

지도를 반복합니다 :

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

for (var key of myMap.keys()) {
  console.log(key);
}
// Will show 2 logs; first with "0" and second with "1"

for (var value of myMap.values()) {
  console.log(value);
}
// Will show 2 logs; first with "zero" and second with "one"

for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

또는 각 용도로 사용하십시오.

myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)
// Will show 2 logs; first with "0 = zero" and second with "1 = one"


답변

반복 할 때 키와 값 을 원하면 Object.entries 와 함께 for … of 루프를 사용할 수 있습니다 .

const myObj = {a: 1, b: 2}

for (let [key, value] of Object.entries(myObj)) {
    console.log(`key=${key} value=${value}`)
}

// output: 
// key=a value=1
// key=b value=2


답변

이를 수행하는 유일한 신뢰할 수있는 방법은 객체 데이터를 2 개의 배열, 하나는 키 및 하나는 데이터에 저장하는 것입니다.

var keys = [];
var data = [];
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        keys.push(key);
        data.push(obj[key]); // Not necessary, but cleaner, in my opinion. See the example below.
    }
}

그런 다음 평소와 같이 배열을 반복 할 수 있습니다.

for(var i = 0; i < 100; i++){
    console.log(keys[i], data[i]);
    //or
    console.log(keys[i], obj[keys[i]]); // harder to read, I think.
}
for(var i = 100; i < 300; i++){
    console.log(keys[i], data[i]);
}

Object.keys(obj)IE 9 이상이기 때문에을 사용하지 않습니다 .


답변

-> 객체 배열의 키를 사용하여 JavaScript 객체를 반복하는 경우

Object.keys(Array).forEach(key => {

 console.log('key',key)

})