Javascript에서 일반 객체를 반복하는 방법

일반적이지는 않지만 때때로 Javascript 개체를 반복해야 하는 상황에 처할 수 있습니다. 문자열 및 배열과 달리 객체, 중괄호 및 키: 값 쌍이 있는 리터럴 객체는 반복 가능한 것으로 간주되지 않습니다.

따라서 for... of 메서드를 사용하여 다음 개체를 다음과 같이 반복하면 다음과 같습니다.

const fruitsQty = {
melon: 10, 
apple: 15, 
grape: 7, 
pineapple: 10, 
jackfruit: 22, 
strawberry: 14, 
orange: 30}

for (let exm of fruitsQty) {
console.log(exm)
}

오류가 발생합니다.

그러나 해당 개체 키:값 쌍을 배열로 제공하면 for...of 메서드를 사용할 수 있습니다.

그렇게 하려면 특수 메소드를 사용해야 합니다. 객체 외부의 키를 포함하는 실제 배열을 배열로 반환하려면 Object.keys(), 해당 객체 외부의 값으로 구성된 실제 배열을 반환하려면 Object.values() Object.entries() 해당 객체의 키:값 쌍의 리터럴 중첩 배열을 반환합니다.

Object.keys(fruitsQty) // (7) ["melon", "apple", "grape", "pineapple", "jackfruit", "strawberry", "orange"]

Object.values(fruitsQty) // (7) [10, 15, 7, 10, 22, 14, 30]

Object.entries(fruitsQty) // ["melon" 10, "apple" 15, "grape" 7, "pineapple" 10, "jackfruit" 22, "strawberry" 14, "orange" 30

이제 그것들이 배열로 표시되었으므로(기술적으로는 배열로 변환되지 않습니다. 객체에서 배열을 만드는 것입니다. 혼란스럽다면 사과드립니다. lol) 이전for...of 방법을 사용하여 반복할 수 있습니다. 그 객체는 배열과 함께 작동하기 때문입니다.

다음은 과일의 양을 반복하는 예입니다.

for (let quantity of Object.values(fruitsQty) {
console.log(quantity) 
}

//
10
15
7
10
22
14
30

기본적으로 이 세 가지 방법을 사용하면 마치 배열인 것처럼 for..of 방법을 사용하여 객체를 반복할 수 있습니다. 과일의 총 수량을 얻기 위해 루프를 돌 수도 있습니다.

let sum = 0;

for (let quantity of Object.values(fruitsQty) {
sum += quantity;
}

// Each time it loops, the sum adds each fruit quantity
// 108

이러한 키와 값은 해당 메서드가 있는 배열처럼 작동하므로 다음과 같이 과일 수량의 길이도 확인할 수 있습니다.

// first, create a variable that stores the fruit quantity information as an array

let quantity = Object.values(fruitsQty);

console.log(quantity.length) // 7