[JavaScript] 배열

JavaScript Arrays

배열은 데이터를 연속된 공간에 저장하는 것이다.

자바의 배열에는 같은 타입의 데이터만 저장할 수 있으나 자바 스크립트의 배열에는 여러가지 타입의 데이터를 저장할 수 있다.

그러나 같은 데이터 타입으로 배열을 만드는 것이 일반적이며 자바의 배열과 마찬가지로 인덱스를 통해 배열의 해당 위치에 들어있는 값을 불러올 수 있다.

 

 

 

배열의 n번째 요소 출력하기

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];  //결과: Saab​

- 자바 스크립트 배열의 인덱스는 0번부터 시작하므로
  배열의 n번째에 있는 요소를 출력하기 위해서는 인덱스 값으로 n-1을 입력해야 한다.

 

<스크립트> 태그가 <헤드> 안에 있을 경우, 

window.onload = function(){
    var list3 = ["apple", "30", "500"];
    document.getElementById("demo").innerHTML = list[1]; //apple 출력
}​

- 맨 윗 줄부터 차례대로 코드가 실행되므로 script가 head 안에 있으면 body의 요소가 로딩되기 전에 먼저 실행되므로 에러가 발생한다.
- window.onload를 사용하여 body가 모두 로딩된 후 스크립트 안의 함수를 실행하도록 해줘야한다.

 

 

 

for문을 이용하여 배열 안에 있는 내용을 리스트로 꺼내기

 

var flist = ["망고","청포도","파인애플","키위"];

//사진1
text = "<ul>";
for (i = 0; i < flist.length; i++) {
text += "<li>" + flist[i] + "</li>";
}
text += "</ul>";
document.getElementById("fruits").innerHTML = text;
  
//사진2
flist.push("사과");  //배열 마지막에 사과 추가
document.getElementById("push").innerHTML = flist.join(" & ");

flist.pop();  //배열의 마지막 요소 삭제 --> 사과
flist.pop();  //배열의 마지막 요소 삭제 --> 키위
document.getElementById("pop").innerHTML = flist.join(" & ");

- 배열의 마지막에 데이터 추가하기 : push();

- 배열의 마지막 데이터 삭제하기 : pop();