> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트에서 '객체'를 반복하는 방법

자바스크립트에서 '객체'를 반복하는 방법

WBOY
풀어 주다: 2024-07-17 05:57:39
원래의
519명이 탐색했습니다.

ays to iterate over “objects” in javascript

Javascript 객체에는 키 값 쌍 속성이 포함되어 있으며 객체에 대한 반복은 배열과 다릅니다. for...in 루프와 Object.keys(), Object.values() 및 Object.entries()를 사용하여 객체를 반복할 수 있습니다. 각 방법을 어떻게 사용할 수 있는지 살펴보겠습니다.

1. for...in 메소드 사용

const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };
 for(let key in persons){
     console.log(`${person[key]} : ${key}`)
}
   //output
   // name: 'John',
   // age: 30,
   // occupation: 'Engineer'
로그인 후 복사

2.Object.keys() 사용: 메소드

object.keys()는 객체를 인수로 취하고 키 배열을 반환하는 자바스크립트 메서드입니다

const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };
const Object_keys = Object.keys(person);
console.log(Object_keys)// [ 'name', 'age', 'occupation']```




로그인 후 복사

object.keys()를 사용하여 객체를 반복할 수 있습니다


const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };
const Object_keys = Object.keys(person);

//here first i have used Object_keys array which i got from Object.keys(person);
for(let i = 0 ; i<Object_keys.length;i++){
  console.log(`${Object_keys[i]} : ${person[Object_keys[i]]}`);
}

//here i have used Object_keys array which i got from Object.keys(person);
for(let keys of Object_keys){
  console.log(`${keys} : ${person[keys]}`);
}

// here i have just directly use object.key() method
for(let keys of Object.keys(person)){
  console.log(`${keys}: ${person[keys]}`);
}

// all three ways will give same output
name : John
age : 30
occupation : Engineer


로그인 후 복사

3.Object.entries() 사용:

Object.entries()는 객체를 인수로 취하고 키 값 쌍의 2차원 배열을 반환하는 자바스크립트 메서드입니다


const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };

const Object_keyValue = Object.entries(person);

//output
// [ [ 'name', 'John' ], [ 'age', 30 ], [ 'occupation', 'Engineer' ] ]


로그인 후 복사

Object.entries()를 사용하여 객체를 반복할 수 있습니다


const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };

for (const [key, value] of Object.entries(person)) {
  console.log(`${key} : ${value}`);
}

//output
   // name: 'John',
   // age: 30,
   // occupation: 'Engineer'


로그인 후 복사

4. Object.values() 사용:

Object.values()는 객체 자체의 열거 가능한 속성 값 배열을 반환합니다. 이는 키가 아닌 값에만 관심이 있는 경우 유용할 수 있습니다.


const myObject = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

const values = Object.values(myObject);

for (const value of values) {
  console.log(value);
}



로그인 후 복사

위 내용은 자바스크립트에서 '객체'를 반복하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿