[JavaScript] 내장 객체 - Array

자바스크립트 내장 객체에는 웹 문서의 계층 구조와 상관 없이 나타낼 수 있는 객체가 있다.

Array 객체와 Date 객체가 대표적이다. 

 

Array 객체 

일련의 값들을 저장할 수 있는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체

배열의 각 요소는 배열의 이름과 인덱스로 접근하여 사용 

타입이 고정적 ❌  같은 배열에 있는 원소의 타입이 서로 다를 수 있음 

크기가 동적 배열을 생성하거나 크기가 변경되어도 크기를 다시 변경할 필요 없음 

 

 

Array 객체 인스턴스 만들기

Array() 생성자를 이용한 배열 생성 

var b1 = new Array();
var b2 = new Array(5); //크기가 5인 배열. 모든 요소는 undefined 값을 가짐
var b3 = new Array(3, 5); // 생성자의 인자가 두개 이상이면 초기값. 크기가 2임

 

배열의 선언과 초기화

var a = [ 10, 20, 30 ];

 

concat	기존 배열에 요소를 추가해 새로운 배열 만듦
every	배열의 모든 요소가 주어진 함수에 대해 참이면 trUe를 반환하고 그렇지 않으면 false를 반환
filter	배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만듦
fortach	배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만듦
indexof	주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾음
join	배열 요소를 문자열로 합니다. 이때 구분자를 지정
push	배열의 맨 끝에 새로운 요소를 추가한 후 새로운 Length를 반환
unshift	배열의 시작 부분에 새로운 요소를 추가
pop	배열의 마지막 요소를 꺼내 그 값을 결과로 반환
shift	배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환
splice	배열에 요소를 추가하거나 삭제
slice	배열에서 특정한 부분만 잘라냄
reverse	배열의 배치 순서를 역순으로 바꿈
sort	배열 요소를 지정한 조건에 따라 정렬
toString	배열에서 지정한 부분을 문자열로 반환. 이때 각 요소는 쉼표(,)로 구분

 

배열의 순회

1) for문을 이용한 순회

var arr = [2, 4, 6, , 8];
for(var i-0; i<arr.length; i++){
	if (a[i]) {
		console.log(a[i]); // 10 20 40 
}

배열의 원소를 사용하기 전에 null, undefined, 빈 원소가 있는지 확인하고 제외해줘야 함 

 

2) for ~ of문을 이용한 순회

for (let n of a){ // ES6 추가된 컬렉션 반복 구문 
	console.log(n); // 10 20 30
}

for~of문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문

 

<script type="text/javascript">
		var a = [ 10, 20, , 40, 0 ];

		// 배열  요소 처음부터 끝까지 
		for (let i = 0; i < a.length; i++) {
			console.log(a[i]); // 10 20 undefined 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('-----------');

		for (let n in b){ // 첨자만 반환 
			console.log(n); // 0 1 2
		}
		
		
		console.log('-----------');

		for (let n in b){ 
			console.log(b[n]); // 10 20 30 
		}
		
		
</script>

 

요소 삭제

마지막 요소 삭제

배열의 length 속성 값을 1 감소하면 마지막 요소가 삭제됨 

a.length = a.length - 1;

 

 

모든 요소 삭제

arr.lengh = 0;

배열의 length 속성 값을 0으로 설정하여 모든 요소가 삭제됨 

 

pop() 메소드 

배열의 마지막 요소를 제거하고 그 요소를 반환하며, 배열의 길이도 줄어듦

var arr = [2, 4, 6];
var n = arr. shift();
console.log(arr); // [4, 6] 
console.log(n); // 2

 

delete 연산자를 이용해 삭제 

delete로 배열의 요소를 삭제하면 배열의 길이는 변하지 않으며 undefined 할당

var arr = [2, 4, 6];
delete(arr[0]); 
console.log(arr[0]);

 

splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경

var arr = [2,4,6,8]; 
arr.splice(1, 0, 3); // 추가
console.log(arr); // [2,3,4,6,8]

arr.splice(4, 1, 9); // 4번째 인덱스의 1개의 요소를 9로 변경 
console.log(arr); // [2,3,4,6,9]

start: 배열의 변경을 시작할 인덱스, 배열의 길이보다 큰 값이면 배열의 길이로 설정

delete: 선택사항. 제거할 요소의 수 

 

indexOf()

배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 존재하지 않으면 -1을 반환 

 

lastIndexOf()

지정된 요소가 배열에서 발견되리 수 있는 마지막 인덱스를 반환. 존재하지 않으면 -1을  반환 

 

join() 

배열의 모든 요소를 연결해 하나의 문자열로 만듦

 

reverse()

배열의 순서를 반전

 

sort()

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환 

 

forEach()

배열을 순회하며 배열의 각 요소에 대하여 인자로 주어진 콜백 함수를 실행함