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