logo

TechCodeview

JavaScript 객체를 반복하는 방법은 무엇입니까?

이 글에서는 JavaScript 객체를 반복하는 방법을 배웁니다. 반복하는 동안 객체의 속성을 하나씩 반복하며 반복에 사용하는 방법에 따라 이러한 속성에 대한 액세스가 다를 수 있습니다.

아래에서 설명하는 객체를 반복하는 방법에는 여러 가지가 있습니다.



내용의 테이블

방법 1: 사용 for...in 루프

for..in 루프를 사용하여 객체의 속성을 반복할 수 있습니다. 이 루프는 객체의 모든 비Symbol 반복 가능 속성을 반복하는 데 사용됩니다. 일부 객체에는 프로토타입에서 상속될 수 있는 속성이 포함될 수 있습니다. 그만큼 hasOwnProperty() 메소드를 사용하여 속성이 객체 자체에 속하는지 확인할 수 있습니다. 객체의 각 키 값은 키를 객체의 인덱스로 사용하여 찾을 수 있습니다.

통사론: 

for (let key in exampleObj) {  if (exampleObj.hasOwnProperty(key)) {  value = exampleObj[key];  console.log(key, value);  } }>

예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.



자바스크립트 
function iterateObject() {  let exampleObj = {  book: 'Sherlock Holmes',  author: 'Arthur Conan Doyle',  genre: 'Mystery'  };  for (let key in exampleObj) {  if (exampleObj.hasOwnProperty(key)) {  value = exampleObj[key];  console.log(key, value);  }  } } iterateObject();>
산출 
book Sherlock Holmes author Arthur Conan Doyle genre Mystery>

방법 2: 사용 Object.entries() 메서드 그리고 지도() 방법

그만큼 Object.entries() 메서드 객체 자체의 열거 가능한 문자열 키 속성 쌍의 배열을 반환하는 데 사용됩니다. 반환된 배열은 지도() 쌍에서 키와 값을 추출하는 방법. 키-값 쌍의 키와 값은 배열 쌍의 첫 번째와 두 번째 인덱스에 액세스하여 추출할 수 있습니다. 첫 번째 인덱스는 키에 해당하고 두 번째 인덱스는 쌍의 값에 해당합니다.

통사론: 

Object.entries(exampleObj).map(entry =>{ 키 = 항목[0]을 놓으세요;  값 = 항목[1]을 설정합니다.  console.log(키, 값); });>

예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.

자바스크립트 
function iterateObject() {  let exampleObj = {  book: 'Sherlock Holmes',  author: 'Arthur Conan Doyle',  genre: 'Mystery'  };  Object.entries(exampleObj).map(entry =>{ 키 = 항목[0]을 놓으세요;  let value = 항목[1];  console.log(키, 값);  }); } iterateObject();>
산출 
book Sherlock Holmes author Arthur Conan Doyle genre Mystery>

방법 3: 사용 forEach() 메서드 그리고 object.keys() 메서드

Object.keys()는 객체의 키 배열을 반환하고forEach()>배열의 각 요소를 반복할 수 있는 배열 메서드입니다.



예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.

자바스크립트 
function iterateObject() {  let exampleObj = {  book: 'Sherlock Holmes',  author: 'Arthur Conan Doyle',  genre: 'Mystery'  };  Object.keys(exampleObj).forEach(key =>{ const 값 = exampleObj[키];  console.log(`${key}: ${value}`);  }); } iterateObject();>
산출 
book: Sherlock Holmes author: Arthur Conan Doyle genre: Mystery>

방법 4: 사용 Lodash _.forOwn() 메서드

이 접근 방식에서는 객체를 반복하는 데 도움이 되는 Lodash _.forOwn() 메서드를 사용합니다.

예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.

자바스크립트 
// Defining Lodash variable  const _ = require('lodash'); let users = {  'a': 1,  'b': 2,  'c': 3 }; _.forOwn(users, function (value, key) {  console.log(key, '=', value); });>

산출: 

a = 1 b = 2 c = 3>

방법 5: Object.values() 메서드 및 forEach() 메서드 사용

Object.values() 메서드는 객체의 열거 가능한 속성 값 배열을 반환합니다. 이것을 forEach() 메소드와 결합하면 각 값을 반복할 수 있습니다. 해당 키에 액세스하려면 Object.keys() 메서드를 동시에 사용할 수 있습니다.

통사론:

Object.values(exampleObj).forEach((value, index) =>{ const key = Object.keys(exampleObj)[index];  console.log(키, 값); });>

예:

자바스크립트 
function iterateObject() {  let exampleObj = {  book: 'Sherlock Holmes',  author: 'Arthur Conan Doyle',  genre: 'Mystery'  };  Object.values(exampleObj).forEach((value, index) =>{ const key = Object.keys(exampleObj)[index];  console.log(키, 값);  }); } iterateObject();>
산출 
book Sherlock Holmes author Arthur Conan Doyle genre Mystery>