Array 객체
- Array 객체는 일련의 값들을 저장할 수 있는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체이다.
- 배열의 각 요소는 배열의 이름과 인덱스로 접근하여 사용하며, 인덱스는 0부터 시작한다.
- 자바 스크립트 배열의 특징
1. 타입이 고정적이지 않다. 즉, 같은 배열에 있는 원소의 타입이 서로 다를 수 있다.
2. 32비트 인덱스를 사용한다.
3. 크기가 동적이다.
4. 배열을 생성하거나 크기가 변경되어 다시 할당을 하더라도 배열 크기를 다시 선언할 필요가 없다.
5. 모든 배열은 객체이다. 즉, 배열은 객체 프로토타입으로부터 속성들을 상속받은 객체이다.
6. 배열 리터럴에서 빠진 부분이 존재할 경우, 해당 부분의 원소 값은 undefined가 된다.
배열 리터럴을 이용한 1차원 배열 생성, 생성자를 이용한 배열 생성
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// 배열 리터널을 이용한 1차원 배열 생성
var a1 = []; // 빈 배열
var a2 = [10, 20, 30]; // 크기가 3인 배열
var a3 = [10,20,30,];
var a4 = [10,20,,30];
console.log( a1.length ); // length : 배열 요소의 수
console.log( a2.length ); // 3
console.log( a3.length ); // 3. 마지막의 ,는 무시
console.log( a4.length ); // 4
// 10,20,undefined,30 (,다음에 값이 없으면 undefined)
console.log( a2[0] ); // 10 , 첨자는 0부터 시작
console.log( a2[2] ); // 30
console.log( a2[4] ); // undefined. 전체요소-1 보다 첨자가 크면 undefined
// Array() 생성자를 이용한 배열 만들기
var b1 = new Array(); // 빈 배열
var b2 = new Array(5); // 크기가 5인 배열. 생성자의 인자가 하나인 경우 요소 수를 나타냄.
// 요소의 값은 모두 undefined
var b3 = new Array(10,20); // 생성자의 인수가 2개 이상이면 요소의 초기값
console.log( b1.length ); // 0
console.log( b2.length ); // 5
console.log( b3.length ); // 2
console.log( b2[1] ); // undefined
console.log( b3[1] ); // 20
</script>
</head>
<body>
<h3>내장객체 - Array</h3>
</body>
</html>
배열 리터럴을 이용한 2차원 배열 생성, 생성자를 이용한 배열 생성
★ a[0].length : a배열 0행의 열수.
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// Array() 생성자를 이용한 2차원 배열 만들기
var a1 = new Array(2); // 행수
a1[0] = new Array(3); // 0행의 열수
a1[1] = new Array(3);
console.log( a1.length ); // 행수
console.log( a1[1].length ); // 1행의 열수
// 배열 리터널을 이용한 2차원 배열 만들기
var a2 = [[1,2,3], [4,5,6]];
console.log( a2.length ); // 행수
console.log( a2[0].length ); // 0행의 열수
console.log( a2[1][2] ); // 6
</script>
</head>
<body>
<h3>내장객체 - Array : 2차원 배열</h3>
</body>
</html>
배열 순회
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr = [10,20, ,30, 0];
// 배열의 요소를 처음부터 끝까지 순회
for(var i=0; i<arr.length; i++){
console.log(arr[i]);
}
console.log('--------------');
for(var i=0; i<arr.length; i++){
if(arr[i]) { // undefined, NaN, null, 0, 빈문자''는 거짓
console.log(arr[i]); // 10 20 30
}
}
console.log('--------------');
var arr2 = [10,20,30];
for(var n of arr2) { // EX6에 추가된 컬렉션
console.log(n); // 10 20 30
}
console.log('--------------');
for(var idx in arr2) { // 첨자만 출력
console.log(idx); // 0 1 2
}
console.log('--------------');
for(var idx in arr2) { // 첨자만 출력
console.log(arr2[idx]); // 10 20 30
}
</script>
</head>
<body>
<h3>배열 - 순회</h3>
</body>
</html>for( var n of 배열명) 배열의 값을 꺼내올 때 유용함.
배열 요소 추가
더보기
1. 첨자를 이용해서 추가
2. push() 가장 뒤에 새로운 요소 추가
3. unshift() 가장 앞에 새로운 요소 추가
4. splice(start, deleteCount, 추가할요소...) 를 이용해 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr1 = [10,20];
console.log( arr1.length ); // 2
console.log( arr1 ); // [10,20]
// 뒤에 하나의 요소를 추가
arr1[2] = 30;
console.log( arr1.length ); // 3
console.log( arr1 ); // [10,20,30]
arr1[4] = 50;
console.log( arr1.length ); // 5
console.log( arr1 ); // [10,20,30,empty,50], 콘솔에서는 undefined는 empty로 표시
console.log( arr1[3] ); // undefined
arr1[arr1.length] = 60; // 가장 뒤에 요소 추가
console.log(arr1.join()); // join() : 배열의 모든 요소를 연결 하나의 문자열로 만듦
// 10,20,30,,50,60
arr1[3] = 30; // 특정 요소의 값 변경
console.log(arr1.join());
// push() : 가장 뒤에 새로운 요소 추가
var arr2 = [10,20];
arr2.push(30); // 뒤에 새로운 요소를 하나 이상 추가하고 길이 반환
console.log(arr2.join()); // 10,20,30
arr2.push(40, 50);
console.log(arr2.join()); // 10,20,30,40,50
// unshift() : 가장 앞에 새로운 요소 추가
var arr3 = [30,40];
var len = arr3.unshift(10, 20); // 맨 앞에 새로운 요소를 하나 이상 추가하고 길이 반환
console.log("길이:" + len);
console.log(arr3.join());
</script>
</head>
<body>
<h3>배열 - 요소 추가(가장 앞, 가장 뒤)</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr1 = [10,20,30];
/*
- splice(start [, deleteCount[, item1, item2]])
start : 변경을 시작할 배열 위치
deleteCount : start 부터 deleteCount 개수만큼 원소 삭제
item1, item2, ... : start 인덱스에 item을 추가
*/
// 가장 앞에 추가
arr1.splice(0, 0, 'a', 'b');
console.log(arr1.join()); // a,b,10,20,30
// 뒤에 추가
var arr2 = [10,20,30];
arr2.splice(arr2.length, 0, 'a', 'b');
console.log(arr2.join()); // 10,20,30,a,b
// 중간에 추가
var arr3 = [10,20,30];
arr3.splice(1, 0, 'a', 'b');
console.log(arr3.join()); // 10,a,b,20,30
// 삭제하고 추가
var arr4 = [10,20,30,40,50];
arr4.splice(1, 2, 'a', 'b');
console.log(arr4.join()); // 10,a,b,40,50
</script>
</head>
<body>
<h3>배열 : 요소 추가(중간)</h3>
</body>
</html>
배열에 들어있는 요소 삭제
더보기
1. pop() : 맨 뒤에 있는 요소 삭제 후 요소 반환. 배열의 길이 줄어듦.
2. shift() 처음 요소를 삭제하고 삭제된 요소를 반환. 길이도 줄어듦
3. delete() 첨자에 해당되는 요소를 삭제하고, 그 첨자에 공간에는 undefined를 할당. 길이는 줄어들지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr1 = [10,20,30,40,50];
console.log(arr1.join());
// length 속성을 이용한 마지막 요소 삭제
arr1.length = arr1.length - 1;
console.log(arr1.join());
//length 속성을 이용한 모든 요소 삭제
arr1.length = 0;
console.log(arr1.length);
console.log(arr1.join());
// pop() 메소드를 이용한 마지막 요소 삭제
var arr2 = [10,20,30,40,50];
var a = arr2.pop(); // 마지막 요소를 삭제하고 삭제된 요소를 반환 길이도 줄어듬
console.log(arr2.length); // 4
console.log(arr2.join()); // 10,20,30,40
console.log(a); // 50
// shift() 메소드를 이용한 처음 요소 삭제
var arr3 = [10,20,30,40,50];
var b = arr3.shift(); // 처음 요소를 삭제하고 삭제된 요소를 반환. 길이도 줄어듬
console.log( arr3.length ); // 4
console.log( arr3.join() ); // 20, 30, 40,50
console.log(b); // 10
// delete() 메소드를 이용한 요소 값 없애기
var arr4 = [10,20,30,40,50];
delete(arr4[1]); // arr4[1]의 요소의 값을 없애고 undefined를 할당. 배열의 길이는 줄지 않음
console.log(arr4.length);
console.log(arr4[1]); // undefined
</script>
</head>
<body>
<h3>배열 - 삭제</h3>
</body>
</html>
배열 메소드
더보기
1. indexOf (): 배열에서 요소를 검색해 인덱스를 반환한다. 없으면 -1 반환.
2. join() - 배열의 요소를 연결해 하나의 문자열로 만든다.
3. reverse() - 배열의 순서를 반전 시킨다.
주요 정적 메소드
isArray() 인자가 Array인지 판별
of() 인자의 수나 유형에 관계없이 가변 인자를 갖는 새로운 Array 인스턴스를만든다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr1 = [10,20,30,20,40];
var n;
n = arr1.indexOf(20);
console.log('20의 인덱스 : ' + n); // 1
n = arr1.lastIndexOf(20);
console.log('뒤에서 부터 검색한 20의 인덱스 : ' + n); // 3
n = arr1.indexOf(50);
console.log("50의 인덱스 : " + n); // 없으면 -1
// join() : 배열의 요소를 연결해 하나의 문자열로 만든다.
n = arr1.join();
console.log(n);
var arr2 = [10,20,30,40,50];
var a = arr2.reverse(); // 배열의순서를 반전 시킴
console.log( arr2.join() ); // 50 40 30 20 10
console.log( a.join() ); // 50 40 30 20 10
</script>
</head>
<body>
<h3>배열 - 메소드</h3>
</body>
</html>
배열 - 정렬
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// sort() : 기본적으로 문자의 유니코드 코드포인터값에 따라 정렬함
var arr1 = ["BBA", "BC", "CC", "ABC"];
arr1.sort(); // 유니코드 값의 사전식 배열
console.log(arr1.join()); // ABC,BBA,BC,CC
var arr2 = [55, 7 ,10, 35 ,40];
arr2.sort(); // 유니코드 값의 사전식 배열
console.log(arr2.join()); // 10,35,40,55,7
var arr3 = ["BBA", "BC", "CC", "ABC"];
arr3.sort(function(a, b){ // 오름차순 정렬 : 문자열은 arr3.sort(); 만 해도 오름차순 정렬
if(a>b) return 1;
else if(a<b) return -1;
else return 0;
});
console.log(arr3.join()); // ABC,BBA,BC,CC
var arr4 = ["BBA", "BC", "CC", "ABC"];
arr4.sort(function(a, b){ // 내림차순 정렬
if(a>b) return -1;
else if(a<b) return 1;
else return 0;
});
console.log( arr4.join() ); // CC,BC,BBA,ABC
var arr5 = [55, 7 ,10, 35 ,40];
arr5.sort(function(a,b){ // 오름차순
return a-b; // 정렬하는 기준 점을 찹아줌
});
console.log( arr5.join() ); // 7,10,35,40,55
var arr6 = [55, 7 ,10, 35 ,40];
arr6.sort(function(a,b){ // 내림차순
return -(a-b);
});
console.log( arr6.join() ); // 55,40,35,10,7
</script>
</head>
<body>
<h3>배열 : 정렬</h3>
</body>
</html>
forEach
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr = [1,2,3,4,5];
var s = 0;
arr.forEach(function(item){ // 순서대로 가져옴
s += item;
});
console.log(s);
var arr2 = [10,20,30,40,50];
arr2.forEach(function(item, index){ // item:각요소값, index:첨자
console.log(index+":"+item);
});
</script>
</head>
<body>
<h3>forEach</h3>
</body>
</html>
map, filter
더보기
filter() : 조건에 만족한 요소만으로 새로운 배열 작성
map() : 배열의 각 요소에 대하여 순차적으로 주어진 함수를 실행한 반환 값으로 새로운 배열을 반환
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr = [1,2,3,4,5,6,7,8,9,10];
// arr의 배열 내용중 홀수 값을 갖는 새로운 배열 작성
var arr2 = []; // 빈 배열 선언
/*
for(var i=0; i<arr.length; i++){
if(arr[i] % 2){ // 짝수일 때는 거짓
arr2.push(arr[i]);
}
}
*/
arr.forEach(function(item){ // forEach를 쓰는 습관 갖기
if(item % 2){
arr2.push(item);
}
});
console.log(arr2);
// filter() : 조건에 만족한 요소만으로 새로운 배열 작성 - 홀수
var arr3 = arr.filter(function(item,index){
return item%2; // 조건이 참인 경우에만 해당 item을 배열에 추가
});
console.log(arr3);
// 인덱스가 5이상인 요소만 arr4라는 이름의 배열에 추가
var arr4 = arr.filter(function(item, index) {
return index >= 5
});
console.log(arr4);
console.log('------------------');
// map() : 배열의 각 요소에 대하여 순차적으로 주어진 함수를 실행한 반환 값으로 새로운 배열을 반환
var a = [1,2,3,4,5];
var a2 = [];
for(let i = 0; i<a.length; i++) {
a2.push(a[i] * 2);
}
console.log( a2.join() ); // 2,4,6,8,10
var a3 = a.map(function(item){
return item * 2;
});
console.log( a3.join() ); // 2,4,6,8,10
var a4 = a.map((item) => item * 2 );
console.log( a4.join() ); // 2,4,6,8,10
var a5 = a.map((item, index) => index%2==0 ? item : item * 2 );
console.log( a5.join() ); // 1 4 3 8 5
</script>
</head>
<body>
<h3>map, filter</h3>
</body>
</html>'쌍용강북교육센터 > 9월' 카테고리의 다른 글
| 0930_Javascript : 내장 객체 - JSON (0) | 2021.10.01 |
|---|---|
| 0929_Javascript : 내장객체 - Set, Map (0) | 2021.10.01 |
| 0928_Javascript : 내장객체 - Date (0) | 2021.09.28 |
| 0927_Javascript : 내장객체 - String (0) | 2021.09.28 |
| 0927_Javascript : 예외처리 (0) | 2021.09.28 |