[ js] 4. 반복문 for in, forEach, foreach
2024.02.26
북마크 작성자 정보
작성일/수정일
2024-02-26 16:22:20 / 2024-02-26 16:22:20
for, while
for in
- Array
let arry = ["a", "b", "c", "d"];
for (let i in arry){
console.log( arry[i] );
}
-Object
let obj = {
name : "홍길동",
age : "25",
nt : "chosun",
}
for( let key in obj){
console.log( key + " : " + obj[key] );
}
forEach()
배열의 각요소를 사용해 특정 함수를 for in 반복문처럼 실행.
- element : arry 각요소
- index : arry 각 요소의 index(순서)
- array : 배열 (삭제 가능)
배열명.forEach( function(element, index, array){ });
let arry = [1,2,3,4,5,6,7,8,9,];
let sum = 0;
let output = "";
arry.forEach( function(element, index, array){
sum += element;
output += index + ':' + element + "=>" +sum + 'n';
});
console.log(output);
** 문서 객체를 선택하서 li, div를 선택해서 내용을 변경하는 등 문서 객체에 반복문은 for in이 아닌 for문을 사용해야 한다.
=> 문서 객체 배열에 for in 구문을 사용하면 문서 객체 이외에 속성값도 접근해서 length 의 값과 다른 값을 나타낸다.
<script>
window.onload = function(){
const h1_arry = document.getElementsByTagName("h1");
const result_tag = document.getElementsByClassName("result_tag");
let result = "";
for( let i=0; i<h1_arry.length; i++){
result += "<li>"+i+h1_arry[i].innerHTML+"</li>";
}
// for( let i in h1_arry ){
// result += "<li>"+i+h1_arry[i].innerHTML+"</li>";
// }
result_tag[0].innerHTML = result;
}
</script>
<h1 >text1</h1>
<h1 >text2</h1>
<hr>
<div>
<ul class="result_tag"></ul>
</div>
//결과 for문
text1
text2
----------
0text1
1text2
//결과 for in
text1
text2
----------
0text1
1text2
lengthundefined
itemundefined
namedItemundefined