for...in과 for...of 루프의 차이점
두 루프 모두 무언가를 반복합니다. 이들 간의 주요 차이점은 반복되는 항목에 있습니다.
1) for...in 루프
이 루프는 열거 가능한 속성을 반복합니다. 임의의 순서로 개체의 속성에만 관심이 있고 값에는 관심이 없습니다.
다음 예에서는 for...in을 사용하여 루프 속성 배열이 반복됩니다. 배열이므로 색인 중요한 속성이므로 각각의 모든 요소의 인덱스가 반복되어 출력에 표시됩니다. 색인 외에도 "inherProp2 ", "inherProp1 "도 표시됩니다.
예시-1
<html>
<body>
<script>
Object.prototype.inherProp1 = function() {};
Array.prototype.inherProp2= function() {};
var org = ["Apple", "Microsoft", "Tesla"]
org.anotherOrg = "solarCity";
for (var key in org) {
document.write(key);
document.write("</br>");
}
</script>
</body>
</html> 출력
0 1 2 anotherOrg // own property inherProp2 // inherited property inherProp1 // inherited property
다음 예에서 hasOwnProperty() 이후 색인 과 같은 자체 속성만 사용됩니다. 및 기타 속성은 "inherProp1과 같은 상속된 속성으로 표시됩니다. " 및 "inherProp2 "가 표시되지 않습니다.
예시-2
<html>
<body>
<script>
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
var org = ["Apple", "Microsoft", "Tesla"]
org.anotherOrg = "solarCity";
for (var i in org) {
if (org.hasOwnProperty(i)) {
document.write(i);
document.write("</br>");
}
}
</script>
</body>
</html> 출력
0 1 2 anotherOrg
2) For...of 루프
for...in과 달리 루프, for...of 루프는 개체가 반복하도록 정의한 값을 반복합니다.
다음 예에서 'Apple ', '마이크로소프트 ' 및 '테슬라 '는 for...of를 사용하여 출력에 표시됩니다. 루프.
예시
<html>
<body>
<script>
var org = ["Apple", "Microsoft", "Tesla"]
for (var key of org) {
document.write(key);
document.write("</br>");
}
</script>
</body>
</html> 출력
Apple Microsoft Tesla