[Js] 배열과 메서드 정리

김효인·2021년 6월 20일

Javascript로 알고리즘 공부를 하다보니, 다양한 메서드를 알아두면 좋을것 같아 정리해봅니다 : )

요소 추가, 제거 메서드

가장 기본적인 메서드 중 하나인것 같습니다.
1. arr.push(...items) 맨 끝에 요소 추가
2. arr.pop() 맨 끝 요소 제거
3. arr.shift() 맨 앞 요소 제거
4. arr.inshift(...items) 맨 앞에 요소 추가

1. splice

배열에서 요소를 하나만 지우고 싶다면 어떻게 할까요?

arr.splice(index[,deleteCount, elem1,...,elemN])

첫번째 매개변수는 조작을 가할 첫번째 요소를 가리키는 인덱스 입니다. 두번째 매게변수는 deleteCount 로, 제거하고자 하는 요소의 개수를 나타냅니다. elem1, ..., elemN은 배열에 추가할 요소를 나타냅니다.

let arr = ["i","love","js"];
arr.splice(1,1) //인덱스 1부터 요소 한개를 제거
alert(arr); //["i","js"]
let arr = ["I", "study", "JavaScript", "right", "now"];

// 처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체합니다.
arr.splice(0, 3, "Let's", "dance");

alert( arr ) // now ["Let's", "dance", "right", "now"]

splice는 삭제된 요소로 구성된 배열을 반환하기도 합니다.

let arr= ["i","love","js"];
let remove = arr.splice(0,2);
alert(remove); i와 love 삭제
let arr = ["I", "study", "JavaScript"];

// 인덱스 2부터
// 0개의 요소를 삭제합니다.
// 그 후, "complex"와 "language"를 추가합니다.
arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

2. slice

arr.slice는 arr.splice와 유사하지만 훨씬 간단합니다.

arr.slice([start], [end])

이 메서드는 start 인덱스부터 end를 제외한 end인덱스까지 요소를 복사한 새로운 배열을 반환합니다.

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (인덱스가 1인 요소부터 인덱스가 3인 요소까지를 복사(인덱스가 3인 요소는 제외))

alert( arr.slice(-2) ); // s,t (인덱스가 -2인 요소부터 제일 끝 요소까지를 복사)

3.concat

arr.concat은 기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할때 사용할 수 있습니다.

arr.concat(arg1, arg2...)
let arr = [1, 2];

// arr의 요소 모두와 [3,4]의 요소 모두를 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4]) ); // 1,2,3,4

// arr의 요소 모두와 [3,4]의 요소 모두, [5,6]의 요소 모두를 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6

// arr의 요소 모두와 [3,4]의 요소 모두, 5와 6을 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6![](https://velog.velcdn.com/images%2Fhi980506%2Fpost%2F2e0af6bc-2622-4e92-834b-3437c9a116c6%2Fimage.png)
profile
내가 보려고 만든 velog

0개의 댓글