JavaScript - 배열

JavaScript

배열

• 동일한 이름을 갖는 원소들의 연속적 저장 영역
• 배열의 원소는 메모리 내에서 순서대로 저장
• 배열의 각 원소는 인덱스([0]부터 시작)로 구별
• 배열의 크기(원소의 개수) : length 속성
• 배열의 선언 방식

var 배열명 = new Array(3);
var num = new Array(3);
num.length; // 배열의 크기

자바스크립트 배열의 특징

• 각 원소에 다른 유형의 데이터 저장 가능
• 배열 선언 형식

var num = new Array(); // 크기가 정해지지 않은 배열 선언
var num = new Array(3); // 원소가 5개인 배열 선언(크기 지정)
var fruits = new Array("사과", "배", "포도"); // 배열의 선언과 동시에 값 저장
var num = [100,200,300];

배열의 사용

• 배열 원소에 값 저장
  • a[2] = 10; // 세번째 원소에 10 저장
• 배열 원소에 들어있는 값 출력
  • var x = arr[0] // 배열 첫번째 원소의 값을 가져와서 변수 x에 저장
  • document.write(arr[1])
• 주의
  • 배열의 전체 원소에 값을 저자하거나 출력하기 위해서는 반복문 사용
  • 배열은 크기가 정해져 있기 때문에 반복 횟수를 정할 수 있으므로 for문 사용
  • 반복문 시작은 반드시 0부터 (배열의 인덱스가 [0]부터 시작하므로)

array.js

var num = new Array(5); // 크기가 5인 배열 생성

var player = new Array(); // 크기가 정해지지 않은 배열 선언

//  배열 선언과 동시에 초기화
var fish = new Array("고등어", "갈치", "명태", "대구");
var score = [84, 90, 75, 99];

// 각 원소의 데이터 타입이 다른 경우
var student = ["홍길동", 2, 95.3, 'A'];
var student2 = new Array("홍길동", 2, 95.3, 'A');

// num 배열의 각 원소 값 저장
for(var i = 0; i < num.length; i++) {
    num[i] = i;
}
// player 배열에 각 원소 값 저장
for(var i = 0; i < 3; i++) {
    player[i] = "선수" + ( i+1 );
}

document.write("num : ");
for(var i = 0; i < num.length; i++) {
    document.write(num[i] + " ")
}

document.write("<br>player : ");
for(var i = 0; i < player.length; i++) {
    document.write(player[i] + " ")
}

document.write("<br>fish : ");
for(var i = 0; i < fish.length; i++) {
    document.write(fish[i] + " ")
}

document.write("<br>score : ");
for(var i = 0; i < score.length; i++) {
    document.write(score[i] + " ")
}

document.write("<br>student : ");
for(var i = 0; i < student.length; i++) {
    document.write(student[i] + " ")
}

배열 연습문제1

• 크기가 4인 배열 colors 선언하고
• 4개의 색상을 입력 받아서 배열에 저장한 후
• 배열에 들어있는 값들을 목록으로 출력

arrayEx1.js

var colors = new Array(4);
for(var i = 0; i < colors.length; i++) {
    colors[i] = prompt("색상 입력");
}
document.write("<ol type=\"A\">");
for(var i = 0; i < colors.length; i++) {
    document.write( "<li>" + colors[i] + "</li>");
}
document.write("</ol>");

배열 연습문제2

• 크기가 4인 배열 names 선언하고
• 4개의 학생 이름을 입력 받아서 배열에 저장한 후
• 배열에 들어있는 값들을 테이블로 출력

arrayEx2.js

var student = new Array(4);
for(var i = 0; i < student.length; i++) {
                                  student[i] = prompt("학생" + (i+1) + " 입력");
                                  }
                                  document.write("<table border=\"1\" width=\"200px\">")
                                  for(var i = 0; i < student.length; i++) {
document.write("<tr align=\"center\"><td>" + (i+1) + "</td><td>" + student[i] + "</td></tr>");
}
document.write("/<table>")