Pront/Javascript
[Javascript] 배열과 Array()
soyeonisgood
2022. 9. 24. 17:27
Array()
- 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체
- 인덱스는 0부터 시작 (자바와 동일)
- 타입이 고정적이지 않음. 같은 배열 안의 원소 타입이 서로 다를 수 있다.
- 32비트 인덱스 사용
- 크기가 동적이다
- 배열을 생성하거나 크기 변경되어 다시 할당하더라도 배열의 크기 다시 선언할 필요 X
- 모든 배열은 객체
- 즉, 배열은 객체 프로토타입으로부터 속성들을 상속받은 객체
- 배열 리터럴에서 빠진 부분이 있다면, 해당 부분의 원소 값은 undefined.
Array() 주요 메소드
| join() | |
| concat() | 배열과 배열/값 매개변수를 이어붙여 새로운 배열 반환 |
| push() | 맨 끝에 하나 이상의 요소를 추가하고, 변경된 length를 반환 |
| pop() | 배열에서 마지막 요소를 뽑아내고(삭제), 그 요소를 반환 |
| unshift() | 맨 앞에 하나 이상의 요소를 추가하고, 배열의 변경된 length를 반환 |
| shift() | 배열에서 첫 번째 요소를 삭제하고, 그 요소를 반환 |
| splice() | 배열에서 요소를 추가하거나 삭제 |
| slice() | 배열의 일부를 추출히여 새 배열로 반환 |
| length() | 원소의 개수 |
| filter() | 지정한 필터 함수의 반환 결과가 true인 요소만 모아서 새로운 배열을 반환 |
| indexOf() | 값과 일치하는 제일 앞의 인덱스 반환. 없으면 -1 반환 |
| find() | 주어진 판별 함수를 만족하는 첫 번째 요소를 반환. 만족하는 요소가 없으면 undefined 반환 |
| forEach() | 배열의 각각의 요소에 대해 함수를 호출 |
| map() | 배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환 값을 모은 새로운 배열을 반환 |
| sort() | 요소를 정렬하고 그 정렬된 배열 반환 |
1차원 배열 생성
- 배열 리터럴, Array() 생성자 두 가지 방법으로 1차원 배열 생성 가능
- Array(a) : 인자가 하나이면 크기가 a인 배열 생성. 모든 요소 undefined
- Array(a,b): 인자가 두 개 이상이면 원소 a,b 를 가진 크기가 2인 배열 생성
// 배열 리터널을 이용한 1차원 배열 생성
var a1 = []; // 빈 배열
var a2 = [10,20,30];
var a3 = [10,20,30,];
var a4 = [10,20,,30];
console.log( a1.length ); // 0. length: 배열의 요소 수
console.log( a2.length ); // 3
console.log( a3.length ); // 3 (마지막 콤마(,) 무시)
console.log( a4.length ); // 4 (10,20,undefined,30)
console.log( a2[0] ); // 10. 배열의 첨자는 0부터
console.log( a2[2] ); // 30
console.log( a2[4] ); // unfined. 첨자가 요소수-1 보다 크면 undefined
// --------------------------------------------------------------------
// Array() 생성자를 이용한 배열 생성
var b1 = new Array();
var b2 = new Array(5); // 크기가 5인 배열. 모든 요소는 undefined 값 가짐
var b3 = new Array(3, 5); // 생성자의 인자가 두 개 이상이면 초기값. 크기가 2인 배열
console.log( b1.length ); // 0
console.log( b2.length ); // 5
console.log( b3.length ); // 2
console.log( b3[1] ); // 5
2차원 배열 생성
var a = new Array(2); // 행 수
a[0] = new Array(3); // 0행의 열 수
a[1] = new Array(3); // 1행의 열 수
console.log(a.length); // 2
console.log(a[0].length); // 3
// 배열 리터널을 이용한 2차원 배열
var b = [[1,2,3], [10,20,30]];
console.log(b.length); // 2
console.log(b[0].length); // 3
console.log(b[1][2]); // 30
배열 순회 (iterator)
- for문
- for ~ of
- for ~ in
var a = [10, 20, , 40, 0];
// 배열 요소 처음부터 끝까지
for(let i=0; i<a.length; i++){
console.log(a[i]); // 10 20 undefind 40 0
}
console.log('--------------------');
for(let i=0; i<a.length; i++){
if(a[i]){
console.log(a[i]); // 10 20 40
}
}
console.log('--------------------');
var b = [10,20,30];
for(let n of b) { // ES6 추가된 컬렉션 반복 구문
console.log(n); // 10 20 30
}
console.log('--------------------');
var b = [10,20,30];
for(let n in b) { // 첨자만 반환
console.log(n); // 0 1 2
}
console.log('--------------------');
var b = [10,20,30];
for(let n in b) { // 첨자만 반환
console.log(b[n]); // 10 20 30
}
console.log('--------------------');
Array() 주요 메소드 활용 예제
// 요소의 인덱스. 없으면 -1
n = a.indexOf(20);
console.log("20 인덱스: " + n); // 1
n = a.indexOf(120);
console.log("120 인덱스: " + n); // -1
n = a.lastIndexOf(20);
console.log("뒤부터 검색하여 20 인덱스: " + n); // 3
// join() : 배열의 요소를 연결하여 하나의 문자열로 만듬
n = a.join();
console.log( n ); // 10,20,30,20,40
var b = [10,20,30,40,50];
var c = b.reverse(); // 배열의 순서를 반전시킴
console.log( b.join() ); // 50,40,30,20,10
console.log( c.join() ); // 50,40,30,20,10
sort(): 정렬 (오름차순, 내림차순)
// sort(): 기본적으로 문자의 유니코드 코드 포인터값에 따라 사전식 배열
var a = ["BBA", "BC", "CC", "ABC"];
a.sort(); //
console.log( a.join() ); // ABC, BBA, BC, CC
var b = [55,7,10,35,40];
b.sort(); // 각 요소를 문자열로 변환하여 유니코드 값의 사전식 배열
console.log( b.join() ); // 10,35,40,55,7
var c = ["BBA", "BC", "CC", "ABC"];
// 오름차순 정렬. c.sort() 만 해도 오름차순은 동일한 결과가 나옴
// 자바스크립트는 문자열끼리 비교 가능 (자바 compareTo 와 비슷)
c.sort( function(x,y) {
if( x > y ) return 1;
else if( x < y ) return -1;
else return 0;
});
console.log( c.join() ); // ABC, BBA, BC, CC
var d = ["BBA", "BC", "CC", "ABC"];
// 내림차순 정렬.
d.sort( function(x,y) {
if( x > y ) return -1;
else if( x < y ) return 1;
else return 0;
});
console.log( d.join() ); // CC, BC, BBA, ABC
var e = [55,7,10,35,40];
// 숫자 오름차순
/*
e.sort(function(x, y) {
return x-y;
});
*/
// 화살표 함수로 표시
e.sort( (x,y) => x-y );
console.log( e.join() ); // 7, 10, 35, 40, 55
var f = [55,7,10,35,40];
// 숫자 내림차순
/*
f.sort(function(x, y) {
return -(x-y);
});
*/
f.sort( (x,y) => -(x-y) );
console.log( f.join() ); // 55, 40, 35, 10, 7
forEach()
- 배열을 순회하여 배열의 각 요소에 대해 인자로 주어진 콜백 함수 실행. 반환값은 undefined.
- 기존 배열을 가공하여 연산할 때 forEach 사용. (새로 가공 후 수정된 배열을 리턴 받을 땐 map() 사용)
- 기존 배열이 수정된다 !
- this를 전달 받을 수 있다
- 원본배열(this)을 변경하지 않지만, 콜백 함수는 원본배열(this) 변경 할 수는 있다
- break문 X. 중간에 순회 중단 불가.
- for문보다 성능은 느리지만 가독성 높고 간편.
var a = [1,2,3,4,5];
var s = 0;
a.forEach( function(item){
s += item;
});
console.log(s);
var b = [10,20,30,40,50];
b.forEach(function(item, index) {
console.log(item, index); // 10 0 20 1 30 2 40 3 50 4
});
// ------------------------------------------------------------------
var a = [1,2,3,4,5];
var b = [];
for(let i=0; i<a.length; i++) {
b.push(a[i]*2);
}
console.log( b.join() ); // 2,4,6,8,10
// 동일
b = []; // 배열 b 내용 지우기
a.forEach( item => b.push(item*2) );
console.log( b.join() ); // 2,4,6,8,10map()
- 배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환 값을 모은 새로운 배열을 반환.
- 배열을 순회하여 배열의 각 요소에 대해 인자로 주어진 콜백 함수 실행. 반환값으로 새로운 배열 생성하여 반환.
- 기존 배열 수정 X
- forEach()는 배열 순회하며 요소 값을 참조하여 연산.
- map()은 배열을 순회하며 요소 값을 다른 값으로 매핑.
var a = [1,2,3,4,5];
var b = [];
a.forEach( item => b.push(item*2) );
console.log( b.join() ); // 2,4,6,8,10
console.log(' ------------------- ');
// map()
// 배열의 각각의 요소에 대하여 순차적으로 주어진 함수를 실행한 반환값을 모아 새로운 배열을 반환
var c = a.map( item => item * 2);
console.log( c.join() ); // 2,4,6,8,10
console.log(' ------------------- ');
var d = a.map ( (item, index) => index%2 === 0 ? item : item*2 );
console.log( d.join() ); // 1, 4, 3, 8, 5
filter()
- 주어진 함수의 테스트를 통과하는 모든 요소를 모아서 새로운 배열로 반환
- 즉, 배열을 순회하며 각 요소에 대해 인자로 주어진 콜백 함수의 실행 결과가 true인 배열 요소의 값만 추출하여 새로운 배열로 반환
- if문 대체 가능
var a = [1,2,3,4,5,6,7,8,9,10];
// a 배열 요소의 값 중 홀수만 가지고 새로운 배열 만들기
var b = [];
/*
for(let i=0; i<a.length; i++) {
if( a[i]%2 ) {
b.push(a[i]);
}
}
*/
/*
a.forEach(function(item) {
if(item%2) {
b.push(item);
}
});
*/
// a.forEach( item => { if(item%2) b.push(item); } );
// 조건에 만족하는 요소만으로 새로운 배열 작성 - filter()
/*
b = a.filter(function(item, index) {
return item%2;
});
*/
b = a.filter( item => item%2 );
console.log( b.join() ); // 1 3 5 7 9