JavaScript 개체를 통해 반복

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript 개체를 통해 반복
Abdul Mateen 2023년10월12일
JavaScript JavaScript Object
  1. JavaScript 객체를 통해 루프하는for-in 루프
  2. for-of 루프를 사용하여 JavaScript 객체를 반복합니다
  3. forEach 메서드를 사용하여 JavaScript 객체를 반복합니다
JavaScript 개체를 통해 반복

이 튜토리얼 기사에서는 JavaScript 객체를 반복하는 방법을 소개합니다.

반복문이 여러 개 있으며 JavaScript 객체를 반복하는 데 사용되는 방법은 다음과 같습니다.

  • for-in 루프
  • for-of 루프
  • forEach 메소드

JavaScript 객체를 통해 루프하는for-in 루프

for-in문은 키-값 쌍으로 JavaScript 개체를 반복하는 데 사용되는 루프입니다. 이 루프는 JavaScript 객체의 모든 요소를 반복합니다.

for-in루프를 사용하여 JavaScript 객체를 반복하는 예제 코드는 다음과 같습니다.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
} for (var city in Cities) {
  console.log(city, ':', Cities[city]);
}

출력:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

for-in루프를 사용하는 동안 객체를 반복하거나 반복하기 위해 특별한 함수를 사용할 필요가 없습니다.

for-of 루프를 사용하여 JavaScript 객체를 반복합니다

for-of문은 키-값 쌍이없는 반복 가능한 객체를 반복하는 루프이기도합니다. 또한이 루프를 사용하여 키-값 쌍으로 JavaScript 개체를 반복 할 수 있지만 다음과 같은 일부 특수 기능을 사용합니다.

  • Object.getOwnPropertyNames
  • Object.entries
  • Object.keys
  • Reflect.ownKeys

Object.getOwnPropertyNames

이 메서드는 객체에 저장된 키-값 쌍의 모든 키 배열을 반환합니다. 그러나 JavaScript 객체의 모든 키-값 쌍을 반복하려면 for-of루프와 함께이 메서드를 사용해야합니다.

객체를 반복하기 위해Object.getOwnPropertyNames()와 함께for-of를 사용하는 예제 코드는 다음과 같습니다.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
for (var city of Object.getOwnPropertyNames(Cities)) {
  const CityName = Cities[city];
  console.log(city, ':', CityName);
}

출력:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Object.entries

이 메서드는 개체의 키-값 쌍 배열을 반환합니다. 그러나 키와 값을 반복하려면이 메서드와 함께 for-of루프를 사용하여 JavaScript 객체를 반복해야합니다.

객체를 반복하기 위해Object.entries()와 함께for-of를 사용하는 예제 코드는 다음과 같습니다.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
for (var [city, CityName] of Object.entries(Cities)) {
  console.log(city, ':', CityName);
}

출력:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Object.keys

이 메서드는 개체의 키 배열을 반환합니다. 그러나 객체의 키-값 쌍을 반복하려면for-of 루프와 함께이 함수를 사용해야합니다.

객체를 반복하기 위해Object.keys()와 함께for-of를 사용하는 예제 코드는 다음과 같습니다.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
for (var city of Object.keys(Cities)) {
  console.log(city, ':', cities[city]);
}

출력:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Reflect.ownKeys

이 메서드는 객체의 키도 반환합니다. 그러나 객체의 키-값 쌍을 반복하려면이 함수를 for-of루프와 함께 사용해야합니다.

객체를 반복하기 위해Reflect.ownKeys와 함께for-of를 사용하는 예제 코드는 다음과 같습니다.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
for (var city of Reflect.ownKeys(Cities)) {
  console.log(city, ':', cities[city]);
}

출력:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

forEach 메서드를 사용하여 JavaScript 객체를 반복합니다

forEach 메소드는 다른 메소드를 순차적으로 호출하는 반복자 역할을합니다. 그러나 다음과 같은 몇 가지 다른 함수를 사용하여이 방법을 사용하여 객체를 반복 할 수 있습니다.

  • Object.keys
  • Reflect.ownKeys

Object.keys

이 메서드를forEach 메서드와 함께 사용하면 객체의 키-값 쌍을 반복 할 수 있습니다.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
Object.keys.forEach(city => {console.log(city, ':', Cities[city])})

출력:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Reflect.ownKeys

이 메서드를forEach 메서드와 함께 사용하면 객체의 키-값 쌍을 반복 할 수 있습니다.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
Reflect.ownKeys.forEach(city => {console.log(city, ':', Cities[city])})

출력:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

관련 문장 - JavaScript Object