해야 하는 경우가 있습을 반복하는 개체를 통해서 자바스크립트를 검색하는 여러 키-값 쌍으로 이루어져 있습니다. 이 기사에서는 JavaScript 에서 객체 속성을 반복하는 네 가지 방법을 살펴 보겠습니다.
ES6 이전에 객체를 반복하는 유일한 방법은 for…in 루프. ES6 에서Object.keys()메소드가 도입되어 객체를 쉽게 반복 할 수 있습니다. 나중에 ES8,두 개의 새로운 방법이 추가되었,Object.entries()Object.values(). 최신 메소드는 객체를 배열로 변환 한 다음 배열 루핑 메소드를 사용하여 해당 배열을 반복합니다.
우리가 첫 번째 방법으로 시작하자!
을 위한 루프
는 간단하고 간단한 방법을 통해 반복하는 객체 속성을 사용하는for...in문입니다. 이 방법은 Internet Explorer6 이상을 포함한 모든 현대 및 기존 브라우저에서 작동합니다.
다음은for...in루프를 사용하여 객체를 반복하는 예입니다:
const user = { name: 'John Doe', email: '[email protected]', age: 25, dob: '08/02/1989', active: true};// iterate over the user objectfor (const key in user) { console.log(`${key}: ${user}`);}// name: John Doe// email: [email protected]// age: 25// dob: 08/02/1989// active: true의 문제는for...in루프는 그것을 반복하여성에서 체인 프로토 타입니다. JavaScript 의 객체는 프로토 타입에서 속성을 상속 할 수 있으므로fo...in문은 해당 속성도 반복합니다.
피 반복제 특성을 반복하는 동안,당신은 필요가 명시적으로 확인 속성이 속하는 경우 객체를 사용하여hasOwnProperty()방법:
for (const key in user) { if (user.hasOwnProperty(key)) { console.log(`${key}: ${user}`); }}다행히도,우리는 더 이상 필요에 의존하는for...inhasOwnProperty()방법을 반복을 통해 개체입니다. 사용할 수있는 더 좋은 방법이 있습니다.
객체.keys()메소드
Object.keys()메소드가 ES6 에 도입되었습니다. 그것은할 객체를 반복으로는 인수와 배열을 반환합을 포함하는 모든 속성 이름(또는 열쇠).
그런 다음 forEach()와 같은 배열 루핑 메소드 중 하나를 사용하여 배열을 반복하고 각 속성의 값을 검색 할 수 있습니다.
다음은 예입니다.
const courses = { java: 10, javascript: 55, nodejs: 5, php: 15};// convert object to key's arrayconst keys = Object.keys(courses);// print all keysconsole.log(keys);// // iterate over objectkeys.forEach((key, index) => { console.log(`${key}: ${courses}`);});// java: 10// javascript: 55// nodejs: 5// php: 15위의 함수 선언에서는 ES6 구문을 사용했습니다. 나는 당신이 이미 ES6 특히 화살표 기능에 익숙하다고 가정합니다. 당신이 ES6 을 처음 사용하는 경우,그것에 대해 배울 수있는 화살표 기능 가이드를 살펴.
객체.값()메소드
객체.values()메소드는 ES8 에 도입되었으며Object.key()의 반대를 수행합니다. 객체에있는 모든 속성의 값을 배열로 반환합니다. 그런 다음 배열 루핑 방법 중 하나를 사용하여 값 배열을 반복 할 수 있습니다.
예를 살펴 보겠습니다.
const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};// iterate over object valuesObject.values(animals).forEach(val => console.log(val));// 🐅// 🐱// 🐒// 🐘Object.항목()메소드
객체.entries()는 ES8 에 도입 된 또 다른 메소드이며 객체를 탐색하는 데 사용할 수 있습니다. 달리Object.values()Object.entries()의 배열을 생성 배열입니다. 각 내부 배열에는 두 개의 요소가 있습니다. 첫 번째 요소는 속성이고 두 번째 요소는 값입니다.
다음은 예입니다:
const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};const entries = Object.entries(animals);console.log(entries);// ,// ,// ,// ]통해 반복하는 배열에 반환에 의해Object.entries(),를 사용할 수 있습니다…의 반복 또는 forEach()메소드는 아래와 같이
// `for...of` loopfor (const of Object.entries(animals)) { console.log(`${key}: ${value}`);}// `forEach()` methodObject.entries(animals).forEach(() => { console.log(`${key}: ${value}`)});결론
의 모든 반복하기 위한 객체 속성에서 JavaScript. 우리는이 작업을 수행하기 위해 네 가지 다른 방법을 살펴 보았습니다. for...inObject.keys()Object.values()Object.entries().
❤️이 기사처럼? 트위터에서@attacomsian 을 팔로우하십시오. LinkedIn 과 DEV 에서 나를 팔로우 할 수도 있습니다. RSS 피드를 구독하십시오.
👋을 즐길 경우 내 기사를 읽고하고 지원하고 싶은 나를 만드는 무료 튜토리얼,☕사 커피(비용$5).