(JS) splice() (2019/9/26)
-개념
기존 배열의 값을 삭제, 추가, 변경 등을 할 수 있다.
array.splice(start, deleteCount, add)
1.start
배열의 값을 삭제, 추가, 변경하고 싶은 시작점이다. 인덱스 번호로 선택한다.
2.deleteCount
배열의 값을 삭제하고 싶은 개수.
3.add
배열에 추가하고 싶은 값
-사용방법
1. 기존 배열에 바로 값 추가하기
|
1
2
3
4
|
let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
console.log(cafe);
//["soldout", "Americano", "Latte", "Espresso", "smoothie"] 출력
|
cafe.splice(0, 0, 'soldout');
cafe배열 값에서 인덱스 번호 0번째부터 시작해서 0개를 삭제하고 cafe배열에서 0인 덱스에 'soldout'문자열을 추가한다.(시작 인덱스 번호 앞에 'soldout'이라는 문자열을 추가한다.)
2. 다른 변수 선언해서 값 추가하기
|
1
2
3
4
5
6
7
|
let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
console.log(cafe);
//["soldout", "Americano", "Latte", "Espresso", "smoothie"] 출력
console.log(order);
//[] 출력
|
let order = cafe.splice(0, 0, 'soldout')
변수 cafe에 값을 삭제 없이 0번 인덱스 번호 앞에 'soldout'문자열을 추가하기 때문에 변수 order에는 아무 값도 없는 빈 배열이 된다.
3. 다수의 값 넣기
|
1
2
3
4
5
6
7
|
let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
console.log(cafe);
//["Americano", "soldout", "onSale", "Latte", "Espresso", "smoothie"]
console.log(order);
//[] 출력
|
let order = cafe.splice(1, 0, 'soldout', 'onSale')
변수 cafe의 1번째 인덱스 번호에 삭제 없이 'soldout', 'onSale' 문자열을 추가한다. 이번에도 삭제가 없기 때문에 변수 order에는 빈 배열이 출력된다.
4. 기존 배열에 바로 삭제하기
|
1
2
3
4
|
let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
console.log(cafe);
// ["Americano", "Espresso", "smoothie"] 출력
|
cafe.splice(1, 1)
변수 cafe에 1번째 인덱스 번호부터 시작하여 1개를 삭제한다. 1번째 인덱스를 포함해서 1개니깐 'Latte'가 삭제된다.
변수 cafe에는 'Latte'문자열만 빠지고 기존 배열을 유지한다. 여기서 중요한 건 변수 cafe에서 삭제된 자리에는 공백이 아니라 다음 값들이 한 칸씩 앞으로 당겨서 채워진다.
5. 다른 변수 선언해서 삭제하기
|
1
2
3
4
5
6
7
|
let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
console.log(cafe);
// ["Americano", "Espresso", "smoothie"] 출력
console.log(order);
// ["Latte"] 출력
|
let order = cafe.splice(1, 1)
변수 cafe에 1번째 인덱스 번호부터 시작하여 1개를 삭제한다. 1번째 인덱스를 포함해서 1개니깐 'Latte'가 삭제된다.
이후 변수 order에 배열로 담긴다.
6. 제거하고 추가하기
|
1
2
3
4
5
6
7
|
let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
console.log(cafe);
// ["Americano", "soldout", "onSale", "Espresso", "smoothie"] 출력
console.log(order);
// ["Latte"]
|
let order = cafe.splice(1, 1, 'soldout', 'onSale')
변수 cafe에 1번째 인덱스 번호부터 시작하여 1개를 삭제하고 'soldout', 'onSale' 문자열을 넣는다. 변수 order에는 삭제된 'Latte'문자열만 들어간다.
7. 원하는 인덱스 번호 이후 값을 모두 삭제하기
|
1
2
3
4
5
6
7
|
let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
console.log(cafe);
// ["Americano"] 출력
console.log(order);
// ["Latte", "Espresso", "smoothie"] 출력
|
let order = cafe.splice(1)
변수 cafe에 1번째 인덱스 번호를 포함해서 이후 모든 값을 삭제한다. 변수 order에는 삭제된 'Latte', 'Espresso', 'smoothie' 이 들어간다.
-응용
1. 반복문과 splice()
|
1
2
3
4
5
6
7
8
9
10
11
|
let numbering = [1,2,3,4,5,6,7,8,9,10];
let saveing = [];
for(let i = 0; i < 4; i++){
}
console.log(saveing);
// [1, 3, 5, 7] 출력
|
let getthe = numbering.splice(i,1)[0]
반복문으로 인해 인덱스 번호 0 ~ 3까지 1개씩 삭제시켜 변수 getthe에 담긴다. 이후 getthe는 saveing빈 배열에 push 되어 담긴다.
여기서, numbering.splice(i,1)으로 값을 뽑아낼 때(삭제시킬 때) 각각 개별적인 배열로 뽑힌다. [1] [3] [5] [7] 이런 식으로 뽑힌다. 난 변수 getthe에 뽑아낸(삭제시킨) 값이 배열 형태가 아닌 단순한 숫자였으면 좋겠다.
그래서 numbering.splice(i,1) 뒤에 [0]을 넣어서 단순 숫자만 집어넣는다.
각각 배열 형태로 된 [1] [3] [5] [7]에 각 배열의 0번째 인덱스 번호의 값을 가지고 온다. 그럼 단순 숫자 1,3,5,7을 가져올 수 있다.