티스토리 뷰

문법

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

[start]

- 배열의 변경을 시작할 인덱스이다.

- 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다.

- 음수인 경우 배열의 끝에서부터 요소를 세어나간다.

  

 

[deleteCount]

- 배열에서 제거할 요소의 수

- 값을 생략하거나 배열의 갯수보다 많거나 같으면 모든 요소를 제거한다.

- deleteCount가 0 이하라면 어떤 요소도 제거하지 않는다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.

 

[item1, item2, ...]

- 배열에 추가할 요소

- 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 한다.

 

[반환 값]

- 제거한 요소를 담은 배열

- 하나의 요소만 제거한 경우 길이가 1인 배열을 반환한다.

- 아무 값도 제거하지 않았으면 빈 배열을 반환한다.


예제

[start]

// 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다.
let arr = [1, 2, 5];
arr.splice(10, 3, 6, 7, 8); // (6) [1, 2, 5, 6, 7, 8]

// 음수인 경우 배열의 오른쪽 끝에서부터 요소를 세어나간다.
// -0은 0과 같다.
// 음수는 오른쪽 끝부터 -1, -2, -3 ...
let arr = [1, 2, 3, 4, 5];
arr.splice(-1, 3) // 오른쪽에서 3개를 지우겠다는 의미에서 사용했다.
arr; // (4) [1, 2, 3, 4] 그런데 끝에 "5"만 삭제됐다.

// 음수는 start값부터 오른쪽으로 삭제된다.
let arr = [1, 2, 3, 4, 5];
arr.splice(-3, 3) // 오른쪽 끝부터 -1, -2, -3, 3을 기준으로 오른쪽에 3개를 지운다.
arr; // (2) [1, 2]

 

[deleteCount]

// 값을 생략하거나, 값이 array.length - start보다 크면 start부터의 모든 요소를 제거한다.
let arr = [1, 2, 5];
arr.splice(1, ); // [1]

let arr = [1, 2, 5];
arr.splice(1, 10); // [1]


// deleteCount가 0 이하라면 어떤 요소도 제거하지 않는다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.
let arr = [1, 2, 5];
arr.splice(2, 0) // 아무 일도 일어나지 않음.
arr.splice(2, 0, 3, 4) // (5) [1, 2, 3, 4, 5]

 

[반환 값]

let arr = [1, 2, 5];
let remove = arr.splice(-1, 1);
remove; // [5]
arr; // (2) [1, 2]

[공부 좌표]

splice

Array.prototype.splice()

'이론 > JS' 카테고리의 다른 글

[JS] Element.closest()  (0) 2021.02.23
[JS] 화살표 함수  (0) 2021.02.19
[JS] className, classList  (0) 2021.02.18
[JS] this, event.currentTarget, event.target의 차이  (0) 2021.02.18
[JS] 버블링, 캡처링  (0) 2021.02.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함