12. 배열 메소드

1. 원소의 추가

배열에서 원소를 추가하고 싶을 때는 push()와 unshift()를 사용한다.

push(새 값)는 뒤에 새로운 값을 추가하고, unshitf(새 값)는 앞에 새로운 값을 추가한다.

 

2. 원소의 삭제

배열에서 원소를 삭제하고 싶을 때는 pop()과 shift()를 사용한다.

pop()은 맨 뒤의 값을 삭제하고, shift()는 맨 앞의 값을 삭제한다.

 

3. splice(idx, n[, add_item list])

=> idx = 삭제할 원소의 위치(순번), n = 삭제할 원소의 개수, add_item list = 삭제 후 추가할 원소의 목록

splice()는 배열의 원소를 지정한 개수만큼 삭제한다.

let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr1);

arr1.splice(3, 2, 11, 12, 13);
console.log(arr1); // 1, 2, 3, 11, 12, 13, 6, 7, 8, 9

 

4. concat(합칠 배열)

concat()은 두 개의 배열을 합쳐 새로운 배열은 만든다. concat을 사용할 때는 새로운 배열을 선언해주고 대입하면서 사용해야 한다.

ex) let arr3 = arr1.concat(arr2)

let arr2 = ["a", "b", "c"];
let arr3 = ["100", "200", "300"];
let arr4 = arr2.concat(arr3);

console.log(arr4); // ['a', 'b', 'c', '100', '200', '300']

 

5. indexOf()/lastIndexOf(n)

=> n = 검색 시작 위치 지정.

둘 모두 찾고자 하는 원소의 위치(순번)값을 알려주지만 lastIndexOf()는 indexOf()와 달리 원소의 검색을 뒤에서부터 처리하고, 순번은 앞에서부터 알려준다는 데에서 차이가 있다. 또한 같은 값을 가진 index가 여러 개 있어도 앞에 있는 index만을 가르쳐준다. 만약 같은 값끼리 가진 index값을 알고 싶다면 반복문을 사용해보자.

let foods = ["김밥", "갈비탕", "육계장", "칼국수", "갈비탕", "돈까스"];

console.log(foods.indexOf("갈비탕")) // 1
console.log(foods.indexOf("갈비탕", 2)); // 4
console.log(foods.lastIndexOf("갈비탕")); //4

 

6. includes()

includes()는 배열에 찾고자 하는 원소가 있으면 true, 없으면 false를 반환한다.

let foods = ["김밥", "갈비탕", "육계장", "칼국수", "갈비탕", "돈까스"];

console.log(foods.includes("칼국수")); // true
console.log(foods.includes("참치회")); // false

 

7. sort()/reverse()

sort()는 배열을 오름차순으로 정렬하는 메소드이고, reverse()는 배열을 역순으로 재배치하는 메소드이다.

let arr5 = [6, 3, 4, 1, 5, 8, 0];

console.log(arr5); // 6, 3, 4, 1, 5, 8, 0
console.log(arr5.sort()); // 0, 1, 3, 4, 5, 6, 8
console.log(arr5); // 0, 1, 3, 4, 5, 6, 8
console.log(arr5.reverse()); // 8, 6, 5, 4, 3, 1, 0
console.log(arr5); // 8, 6, 5, 4, 3, 1, 0

 

8. join([구분자])/split([구분자])

join()은 배열을 문자열로 변환해주고, split()는 문자열을 배열로 변환해준다.

let foods2 = ["김밥", "갈비탕", "육계장", "칼국수", "갈비탕", "돈까스", "칼국수", "갈비탕", "돈까스"];
              
let str = foods2.join(" ");

console.log(str); // 김밥 갈비탕 육계장 칼국수 갈비탕 돈까스 칼국수 갈비탕 돈까스
console.log(foods2); // '김밥', '갈비탕', '육계장', '칼국수', '갈비탕', '돈까스', '칼국수', '갈비탕', '돈까스'

let foods3 = str.split(" ");

console.log(foods3.length); // 9

 

9. slice(idx[, e_idx])

=> idx = 추출할 시작 위치(순번), e_idx = 추출할 마지막 위치(순번)

slice()는 배열의 특정 부분을 추출하여 새 배열로 생성한다. idx부터 e_idx 전까지 추출하는 것으로 e_idx번째 위치는 포함되지 않으니 주의해야 한다. 또한 원래의 배열에는 이상이 없으며, e_idx를 생략할 경우 시작 위치부터 끝까지 추출한다.

let arr6 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let n_a6 = arr6.slice(3, 6);

console.log(n_a6); // 4, 5, 6
console.log(arr6); // 1, 2, 3, 4, 5, 6, 7, 8, 9