가변 내장 함수 : push(),splice(),pop(),shift()
무결성 내장 함수 : concat(), slice()
문제를 풀다가 배열을 n의 길이를 갖는 배열로 묶으라는 문제가 나왔다.
예를들어, n이 2이면, 배열 [1,2,3,4,5,6]을 [[1,2],[3,4],[5,6]] 나눠야 한다.
이 코드는 맨 마지막에..
이땐 배열의 메소드(내장 함수)인 slice를 쓰면 된다.
1.slice
arr.slice(시작 인덱스, 끝 인덱스[포함하지 않는다, 필수도 아님])
slice는 인수로 전달된 요소들을 복사하여 배열로 반환하는 메소드이다. 반환배열은 새로운 배열이며 pop,shift와 같은 메소드와 달리 원본 배열을 변경하지 않는다는 특징이 있다.(배열을 크게 바꾸는 특성 때문인듯?)
slice는 최소 1개, 최대 2개의 인수가 필요하다. 배열로 반환받을 위치를 인덱스로 지정해주는 시작 인덱스, 끝 인덱스가 필요하다.
slice는 이 시작 인덱스(start) 끝 인덱스(end)까지의 요소를 복사하여 배열로 반환한다.
끝 인덱스는 선택으로, 이게 없으면 시작 인덱스부터 끝까지 반환한다.
slice는 원본 배열을 변경하지 않는다는 점을 주의하자!
(1) start (시작인덱스)
새로운 배열의 복사를 시작할 인덱스이다. slice는 이 시작 인덱스를 포함한다.
(2) end (끝 인덱스)
slice는 이 인덱스 전까지만 복사한다. 끝 인덱스는 필수가 아니다. 없으면
원본 배열의 끝까지 자동 복사한다.
let array = [1,2,3,4,5,6];
//console.log 생략
array.slice(2);
//[3,4,5,6] -- start2부터 끝까지 반환
array.slice(2,3);
//[3] --- start인덱스 2 부터 end인덱스 3 전까지 반환. 결국
//인덱스 2만 나옴
array.slice(-2);
//[5,6] --음수를 적으면 뒤에서 2개를 반환
array;
//[1,2,3,4,5,6]. 원본 배열은 변경되지 않음.slice 심화
만약 배열을 n개의 작은 배열로 나누고 싶다면? 다음과 같은
함수를 사용해 보자.
function solution(원본배열, size) {
const arr = [];
//새로운 배열을 담을 배열을 생성한다. 이 배열에 작은
//배열들을 push한다.
//반복문 for문 사용. 인덱스 0부터(start) size를 더한 끝 인덱스까지 나눈다. 이 배열들을 준비한 arr에 푸시한다.
for (let i = 0; i < data.length; i += size) {
arr.push(data.slice(i, i + size));
}
return arr;
}
// chunk([1, 2, 3, 4], 2) -> [ [1,2], [3,4] ]
2.splice
push. pop, shift, unshift는 모두 배열 시작이나 끝에 요소를 추가하거나 삭제하는 메소드였다. 만약 배열 중간을 변경시키고 싶다면? splice를 사용하면 된다. slice와 이름이 비슷하지만 사용법은 push,pop 이런것들과 더 비슷하다.
arr.splice( start, delete-count (옵션) , add(옵션))
상당히 복잡한 메소드이다.. 차근차근 해보자!
(1) start (시작인덱스)
우선 시작은 변경하고 싶은 지점의 인덱스이다. 이 인덱스는 필수이다. 만약 이 인덱스만 적으면 splice의 본 기능은 삭제이기 때문에, 이 인덱스부터 뒤에 있는 모든 요소들을 삭제한 배열을 반환한다.
splice는 slice와 달리 원본 배열을 변경하는 메소드이다!
let arr = [1,2,3,4,5,6];
console.log(arr.splice(3)); //[4,5,6]
//인덱스 3 까지만 남고 나머지 모든 요소들이 삭제되었다.
//이 삭제된 요소들을 반환한다.
console.log(arr); //[1,2,3]
//원본 배열이 변경되었다.splice는 제거된 요소를 반환한다!
(2) delete_number : 삭제하고 싶은 요소 개수 (옵션)
splice는 삭제, 추가가 동시에 가능한 메소드이다. 첫 인덱스부터 삭제할 요소의 개수를 적으면 해당 인덱스의 요소가 삭제된다.
let arr =[1,2,9,3,4];
arr.splice(2,1);
console.log(arr); //[1,2,3,4]만약 삭제는 안하고 배열 중간에 추가만 하고 싶다면? delete_number를 생략할 수는 없고 0을 적어야 한다.
(3) add : 추가하고 싶은 요소 그대로 적기. 개수 상관 없음
add는 시작인덱스에서 delete_number로 적은 개수만큼 삭제한 자리에서 적은 요소들이 들어간다. 예를 들어, [1,2,5,6]에서 2뒤에 3,4를 추가하고 싶다면? 삭제할 개수가 0이므로 (추가만 하니까)
arr.splice(2,0,3,4)라고 적으면 된다.
let arr = [1,2,5,6];
let splice_result = arr.splice(2,0,3,4);
console.log(splice_result);
//[]
console.log(arr);
//[1,2,3,4,5,6]
splice자체를 출력했더니(splice_result) 빈배열[]이 나왔다.
그 이유는 splice는 삭제된 배열을 반환하기 때문이다.
변경된 배열을 보고 싶다면 원본 배열을 출력하면 된다.
여기서 또 slice와의 차이점을 상기하자!
slice는 원본 배열을 변경하지 않지만, splice는 원본배열을 변경한다.
let arr = [1,2,10,20,5,6];
let splice_result = arr.splice(2,2,3,4);
console.log(splice_result);
//[10,20]
console.log(arr);
//[1,2,3,4,5,6]