[Java Script] 배열과 for in문

배열 생성

let arr = new Array();
	arr[0] = "홍길동";
	arr[1] = 20;
	arr[2] = "OO시";
	arr[3] = true;
	arr[4] = "oo대학교";

alert(arr);

배열에 저장할 수 있는 자료

1. 문자열 2.숫자 3.boolean 4.함수 5.객체 // arr = ['문자열', 20, true, function(), new Date()]

 

배열이나 객체를 반복 실행 할 때 사용하는 구문

1. for in ()

for( 변수명 in 배열명){ }

  for(i in arr){
  	alert(arr[i]);
  }

for...in문은 보통 객체의 속성을 반복하기 위해서 열거형과 함께 사용되며, ES6에서 추가 됨.

let user = {
  name: 'kim cheolsoo',
  age: 5,
  address: 'Incheon',
};

for (let key in user) {
  console.log(`${key}: ${user[key]}`);
}

let student = {
            no : 2001,
            name : "홍길동",
            kor : 100,
            eng : 90,
            math : 80,
        }
// let 키값 변수선언
// for(key 값 in object){}

let j; //키값
for(j in student){
	document.getElementById('forin').innerHTML += `<li>${j}:${student[j]}</li>`
}

 

 

2. forEach()

foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드

 

배열명.forEach(callback(item,index, array))

object.forEach(function(item,index){

}

 

/*forEach*/
let fruit = ['딸기', '바나나','수박','오렌지','키위'];

fruit.forEach(function (item,index){
	//document.getElementById('foreach').innerHTML += `<li>${fruit[index]}</li>`;
	document.getElementById('foreach').innerHTML += `<li>${item}</li>`;
});
       
let list = document.querySelectorAll('#foreach li');
       
list.forEach (function(item,index){
	item.addEventListener("mouseenter",function(){
		this.style.fontSize = '36px';
	});
	item.addEventListener("mouseleave",function(){
		this.style.fontSize = '16px';
	});
});

---

 let arr2 = [];
 	arr2[0] = "짱구";
    arr2[1] = "철수";
    arr2[2] = "유리";
    arr2[3] = "훈이";
    arr2[4] = "맹구";
    arr2[5] = "수지";

let sunflower = ['짱구','철수','유리','훈이','수지','맹구','채성아'];
        for(let i = 0; i < sunflower.length; i++) {
            document.write(`${sunflower[i]} <br>`);
 }