어떻게 자바스크립트 객체를 반복하거나 열거할 수 있을까요?

다음의 JavaScript 객체가 있습니다:

var p = {
    p1: value1,
    p2: value2,
    p3: value3
};

p의 요소들 (p1, p2, p3...)을 모두 순환하고 키와 값들을 어떻게 얻을 수 있을까요?

답변 1

var p = {
    0: value1,
    b: value2,
    key: value3
};
for (var key of Object.keys(p)) {
    console.log(key +  ->  + p[key])
}

사용한 것에 주목하십시오. for...of 대신 for...in을 사용하면 이름이 지정된 속성에 대해 정의되지 않은 값을 반환하며, Object.keys()는 전체 프로토타입 체인 속성이 아닌 개체 자체의 속성만 사용합니다.

새로운 Object.entries() 메서드를 사용:

참고: 이 메서드는 Internet Explorer에서 네이티브로 지원되지 않습니다. 오래된 브라우저에 대한 폴리필 사용을 고려해야 할 수 있습니다.

const p = {
    p1: value1,
    p2: value2,
    p3: value3
};
for (const [key, value] of Object.entries(p)) {
  console.log(`${key}: ${value}`);
}

답변 2

제이쿼리로 자바스크립트 객체를 순환하거나 열거하는 방법에 대해 알아보겠습니다. 이를 위해 우리는 .each() 메소드를 사용할 것입니다.
자바스크립트 객체는 프로퍼티와 값을 가지며, 이러한 프로퍼티와 값은 키-값 쌍으로 구성됩니다. 예를 들어, 다음과 같은 자바스크립트 객체가 있다고 가정해봅시다.
```javascript
var myObject = {
name: 홍길동,
age: 25,
city: 서울
};
```
이제 우리는 이 객체를 순환해보고자 합니다. 이를 위해 우리는 제이쿼리의 .each() 메소드를 사용할 것입니다. .each() 메소드는 주어진 컬렉션의 각 요소에 대해 함수를 반복적으로 실행합니다.
```javascript
$.each(myObject, function(key, value) {
console.log(key + : + value);
});
```
위의 코드를 실행하면 다음과 같은 결과가 콘솔에 출력될 것입니다.
```
name: 홍길동
age: 25
city: 서울
```
이를 통해 우리는 자바스크립트 객체를 순환하고, 각 프로퍼티의 키와 값을 얻을 수 있습니다.
위의 예시 코드는 제이쿼리를 사용한 방법이지만, 순수한 자바스크립트로도 동일한 작업을 수행할 수 있습니다. 다음은 자바스크립트의 Object.keys() 및 forEach() 메소드를 사용한 예시입니다.
```javascript
var keys = Object.keys(myObject);
keys.forEach(function(key) {
console.log(key + : + myObject[key]);
});
```
위의 코드도 동일하게 작동하며, 동일한 결과를 출력할 것입니다.
이러한 방법을 사용하여 자바스크립트 객체를 순환하고, 각 프로퍼티의 키와 값을 얻을 수 있습니다. 이를 통해 웹 개발에서 객체 데이터를 처리하고 조작하는 데 있어 유용한 도구를 얻을 수 있습니다.