을 위한 루프

이것이 어떻게 작동하는지 알기 위해 반복 문장 반복하는 데 사용할 수 있는 모든 기호가 아닌,열거할 객체의 속성.

객체.키

Object.keys()메서드는 객체 키 배열을 반환합니다. 그러면 객체의 속성이 포함 된 배열이 생성됩니다. 그런 다음 배열을 반복하여 필요한 키와 값을 얻을 수 있습니다.

객체.값

Object.values()메서드는 객체 값의 배열을 반환합니다. 그러면 객체의 속성이 포함 된 배열이 생성됩니다. 그런 다음 배열을 반복하여 필요한 값을 얻을 수 있습니다.

객체.getOwnPropertyNames

Object.getOwnPropertyNames()메서드의 배열을 반환합니다 모든산(열거할 특성을 제외한 사용하는 기호를)찾을 직접 지정된 객체입니다. 그러면 객체의 속성이 포함 된 배열이 생성됩니다. 그런 다음 배열을 반복하여 필요한 키와 값을 얻을 수 있습니다.

객체.항목

Object.entries()쌍이다.

성능 비교

이제 테스트는 이러한 모든 기술 및 비교하고 각각의 하나에 따라 자신의 속도와 성능을 결정은 더 빠르다.

Chrome 및 Firefox 와 같은 대부분의 브라우저는performance.now()performance.now()DOMHighResTimeStamp를 반환합니다.

사용

let start = performance.now();// code to be timed...let duration = performance.now() - start;

시작되자 테스트…

테스트 결과

에 따르면 우리의 테스트 결과는 다음과 같습니다에서 오름차순으로;

╔═══════════╦════════════════════════════╦═════════════════════════╗
║ Rank ║ Technique ║ Time(ms) ║
╠═══════════╬════════════════════════════╬═════════════════════════╣
║ 1 ║ for...in loop ║ 0.8450000023003668 ms ║
║ 2 ║ Object.keys ║ 1.32499999017 ms ║
║ 3 ║ Object.entries ║ 1.63499999326 ms ║
║ 4 ║ Object.values ║ 2.05499998992 ms ║
║ 5 ║ Object.getOwnPropertyNames ║ 2.12500002817 ms ║
╚═══════════╩════════════════════════════╩═════════════════════════╝

이에 따라,이러한 결과는,가장 빠른 방법이를 반복해 자바스크립트 객체는 이것이 어떻게 작동하는지 알기 위해 루프입니다. 자,이것은 다른 방법이 무효이거나 쓸모 없다는 것을 의미하지는 않으며,모두 유스 케이스에 달려 있습니다.

for...in루프의 문제점은 프로토 타입 체인의 속성을 반복한다는 것입니다. 객체 속성을 반복합니다. Javascript 배열은 특정한 종류의 개체의 몇 가지 편리한 속성이 있는 데 도움 당신은 그들을 치료 배열로,그러나 그들은 여전히 내부 객체의 속성과를 의미하지 않을 반복한다. for...in또한 배열의 요소뿐만 아니라 열거 가능한 모든 속성을 반복합니다. 이로 인해 예기치 않은 결과가 발생할 수도 있습니다.

for...inhasOwnProperty.

더 효율적인 방법을 통해 루프 개체 ES6 이 먼저 변환 개체 배열로 사용하는Object.keys()Object.values()Object.getOwnPropertyNamesObject.entries(). 그런 다음 배열을 반복하여 키와 값을 얻습니다.