[JavaScript] 배열

배열 - 여러 개의 값을 순차적으로 나열한 자료구조 (자바스크립트에선 객체 타입)

 

기본형 

let student = ['Jack','Maria','James','John'];

배열이 가지고 있는 값은 요소이며, 각 요소는 자신의 위치를 나타내는 0 이상의 정수를 고유번호로 가짐 (index)

 

배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있음

let arr = [
	‘민욱’, // 문자
	5, // 숫자
	false, // boolean
	{
		name : ‘Mike’,
		age : 30,
	} // 객체
	function(){
		console.log(‘Test’);
	} // 함수
];

 

배열은 요소의 개수를 세는 length 프로퍼티를 갖고 있고, for 문을 통해 순차적으로 요소에 접근할 수 있다/ length : 배열의 길이

 

let days = [‘월’, ‘화’, ‘수’];

for(let index = 0; index < days.length; index++){
	console.log(days[index]) // 0 ~ 2 까지 반복
}

days.length // 3

 

배열은 객체랑 비슷하게 사용할 수 있다. (유사 배열 객체)

let array = {
    '0' : 'a' ,
    '1' : 15 ,
    length: 2
};
console.log(array[1]); // 15

배열의 생성 방법 및 참조 ( 배열 리터럴에 요소를 생략하면 희소 배열이 생성 )

 

배열 리터럴 , Array 생성자 함수 , Array.of() , Array.from

let day = [‘월’,’화’,’수’]; // 생성 배열 리터럴 ['월','화','수'] (length : 3)
const arr = new Array(20); // 생성 Array 생성자 함수 [empty * 20] (length : 20)
Array.of(5, 2, 4); // 생성 Array.of() [5,2,4] (length : 3)
Array.from({length: 3, 0: 'a' , 1: 'b' , 2: 'c'}) // 생성 Array.from() ['a','b','c'] (length : 3)

console.log(day[0]); // 참조 -> 월
console.log(arr[15]); // 참조 -> undefined (존재하지 않는 요소에 접근하면 undefined가 반환)

배열 추가 및 삭제 외 기능들

 

push() - 배열 끝에 추가

pop() - 배열 끝 요소 제거

shift() - 배열 앞에 제거

unshift() - 배열 앞에 추가

concat() - push, unshift와 유사( 반환값을 변수에 할당받아야 함 )

let days = [‘월’,’화’];
days.push(‘수’) // [‘월’,’화’,’수’] push() 여러 요소를 한번에 추가 가능
days.pop() // [‘월’,’화’] pop() 하나씩 삭제
days.unshift(‘일’) // [‘일’,’월’,’화’] unshift() 여러 요소를 한번에 추가 가능
days.shift() // [‘월’,’화’] shift() 하나씩 삭제
let days1 = days.concat(‘수’,’목’) // [’월’,’화’,'수','목']

delete() - 배열 요소의 삭제

splice() - 배열의 중간에 요소를 추가하거나 제거하는 경우 사용 [원본 변경]

const arr = [1,2,3,4,5]
const arr2 = arr.splice(1, 2, 6, 7); // 인덱스 1부터 2개의 요소를 제거하고 6과 7을 삽입 (제거 후 삽입)
// arr => [1,6,7,4,5]
// arr2 => [2,3]
delete arr2[1]; // 인덱스 1 삭제
// arr2 => [2,empty]

slice() - 인수로 전달된 범위의 요소를 복사하여 배열로 반환

includes() - 배열 요소가 존재하는지 확인

 

let arr[1,2,3,4];

let arr2 = arr.slice(0, 2); // [1,2] (arr[0]부터 < arr[2]이전까지 복사하여 반환 [원본은 변경x])
let arr3 = arr.slice(2) // [3,4] (arr[2]부터 전부 반환)
let arr4 = arr.slice(-1) // [4] (음수의 경우 배열의 끝부터 시작 [인수가 없으면 배열 그대로 복사])
let arr5 = arr.slice(-2) // [3,4]

console.log(arr.includes(1)); // true

indexOf() - 배열 인덱스 찾기

let arr = [1, 2, 4, 4, 6];

console.log(arr.indexOf(4)); // 2 (배열 arr에서 요소 4를 검색하여 먼저 검색된 요소의 인덱스 반환)
console.log(arr.indexOf(8)); // -1 (요소가 없으면 -1 출력)
console.log(arr.indexOf(6,1)); // 4 (두 번째 인수는 검색을 시작할 인덱스, 생략하면 처음부터 시작)

join() - 배열 연결 [모든 요소를 문자열로 변환 후 연결한 문자열을 반환함]

reverse() - 배열 뒤집기

 

const arr = [1,2,3,4,5];
arr.join(); // 인수가 없을 경우 콤마로 연결 '1,2,3,4,5'
arr.join(''); // 빈 문자열로 연결 '12345'
arr.join('+'); // + 로 연결 '1+2+3+4+5'
arr.reverse(); // [5,4,3,2,1]