Web - Front end 16. Javascript 배열과 Array 객체
1. 배열
여러개의 원소들을 연속적으로 저장하고 전체를 하나의 단위로 다루는 데이터 구조
서로 자료형이 다른 데이터들을 저장할 수도 있음
각 원소는 대괄호([ ])와 0부터 시작하는 인덱스로 접근
plot[1];
2. 대괄호([ ])로 배열 생성
[ ] 연산자를 이용해 생성
[ ] 안에 만들고자 하는 원소들의 초기 값들을 나열
let week = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sta', 'Sun'];
let plot = [-20, -5, 0, 15, 20];
* 배열 크기와 원소 추가
배열은 처음 만들어진 크기로 고정되지 않고 원소를 추가하면 늘어남
위의 예제예서 크기가 5인 plot에 인덱스 5번과 6 번에 값을 추가하면 배열의 길이가 늘어나면서 원소가 추가됨. 단 인덱스 10번에 값을 추가하면 중간의 값들이 'undifined'가 되므로 주의해야함
plot[5] = 35; // 배열에 6번째 원소 추가하고 크기가 6으로 늘어남
plot[6] = 50; // 배열에 7번째 원소 추가하고 크기가 7으로 늘어남
plot[10] = 65; // 인덱스 7~11의 원소들이 'undefined' 가 되고 크기가 11로 늘어남
* 예제 - [ ] 를 사용하여 배열을 만들고 각 배열의 값 만큼 '*'을 출력
<body>
<h2>[] 로 배열 만들기</h2>
<hr>
<script>
let plot = [20, 5, 8, 15, 20]; //원소 5개의 배열 생성
document.write("let plot = [20, 5, 8, 15, 20]<br><br>");
for (let i=0; i<plot.length; i++){
for (let j=0; j<plot[i]; j++){
document.write("*");
}
document.write(" => " + plot[i]+ "<br><br>");
}
</script>
</body>
3. Array 로 배열 생성
JavaScript는 Array로 생성한 배열이나 [ ]로 생성한 배열을 똑같이 다룸
[ ]로 생성 하든 new Array로 생성하든, 모두 Array 객체로 다룸
- 초기값을 가진 배열 생성
'new' 키워드를 이용해서 Array 타입의 객체를 생성하고 () 안에 초기값 입력
let plot = new Array(-20, -5, 0, 15, 20);
- 초기화 되지 않은 배열 생성
배열 객체를 일단 생성한 후 나중에 원소에 값을 저장할 수 있음
let plot = new Array(5);
plot[0] = 20;
plot[1] = 5;
...
- 빈 배열 생성
초기에 배열의 원소 개수를 예상할 수 없으면 빈 배열 생성 가능
let plot = new Array();
처음에는 빈 배열이지만 원소를 순서대로 삽입하면 배열의 크기가 자동으로 늘어남
원소는 반드시 순서대로 삽입해야 하면 중간에 건너뛰면 중간의 원소들은 'undfined '가 됨
plot[0] = 20; // 배열 크기는 1
plot[1] = 15; // 배열 크기는 2
4. length 프로퍼티
Array 객체의 length 프로퍼티는 배열의 크기를 나타냄
객체에서 자동 관리하는 프로퍼티지만 사용자가 임의로 값을 변경하여 배령을 늘리거나 줄일 수 있음 (String 객체에서는 length 프로퍼티 변경 불가능) - 배열이 줄어들면 그만큼 원소가 삭제 되고 늘어나면 그만큼 빈 원소가 생김
* 예시 - length 프로퍼티를 이용해 평군 온도 구하기
<body>
<h2>Array 객체에 온도를 저장하여 평균 온도 구하기</h2>
<hr>
<script>
let degree = new Array();
degree[0] = 19.4;
degree[1] = 21.3;
degree[2] = 16.9;
degree[3] = 18.6;
degree[4] = 22.6;
degree[5] = 19.7;
degree[6] = 22.4;
let sum = 0;
// for문으로 테이블 생성
document.write('<table><tr>');
for (let i = 1; i <= degree.length; i++){
document.write("<th>5월 " + i + "일</th>");
}
document.write("</tr><tr>")
for (let i = 0; i < degree.length; i++){
document.write("<td>" + degree[i] + "도</td>");
}
document.write("</tr></table><br><br>")
// length 프로퍼티를 이용해서 온도의 평균값 구하기
for (let i = 0; i < degree.length; i++){
sum += degree[i];
}
let avg = sum / degree.length;
document.write("5월의 평균 온도 : 섭씨 " + avg.toFixed(2) + "도");
</script>
</body>
5. Array 객체의 메소드
* 예시
<head>
<script>
function print(msg, arr){
document.write(msg + " " + arr.toString() + "<br><br>");
}
</script>
</head>
<body>
<h2>Array 객체의 다양한 메소드 활용</h2>
<hr>
<script>
let a = new Array("황", "김", "이");
let b = new Array("박");
let c;
print("a가 참조하는 배열 객체 내용 : ", a);
document.write("<br>");
c = a.concat(b);
print("a와 b를 합친 결과 : ", c);
print("a.concat(b) 후의 a의 결과 : ", a);
document.write("<br>");
c = a.join('###');
print("a와 b를 '###'로 구분하여 연결한 결과 : ", c);
print("a.join('###') 후의 a의 결과 : ", a);
document.write("<br>");
c = a.reverse(); // 기존의 배열의 순서가 역순으로 변경됨
print("a의 원소들의 순서를 뒤집은 결과 : c = ", c);
print("a.reverse() 후의 a의 결과 : ", a);
document.write("<br>");
c = a.slice(1, 2); // 일부만 슬라이스하여 새로운 배열 객체 반환
print("a를 index 1 ~ 2 전까지 슬라이싱한 결과 : ", c);
print("a.slice(1, 2) 후의 a의 결과 : ", a);
document.write("<br>");
c = a.sort(); // 기존의 배열 순서가 오름차순으로 변경
print("a의 원소들을 오름차순으로 정렬한 결과 : ", c);
print("a.sort() 후의 a의 결과 : ", a);
document.write("<br>");
c = a.toString(); // 쓰나 안쓰나 결과는 동일
print("a의 원소들을 합쳐서 문자열로 반환한 결과 : ", c);
print("a.toString() 후의 a의 결과 : ", a);
</script>
</body>
* .toString() 은 묵시적으로 자동으로 호출되기 때문에 생략해도 무관
댓글
댓글 쓰기