(JS) splice() (2019/9/26)

-개념

기존 배열의 값을 삭제, 추가, 변경 등을 할 수 있다.

array.splice(start, deleteCount, add)

1.start

배열의 값을 삭제, 추가, 변경하고 싶은 시작점이다. 인덱스 번호로 선택한다.

 

2.deleteCount

배열의 값을 삭제하고 싶은 개수.

 

3.add

배열에 추가하고 싶은 값

 

 

-사용방법

1. 기존 배열에 바로 값 추가하기

let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
cafe.splice(0, 0, 'soldout');
console.log(cafe);
//["soldout", "Americano", "Latte", "Espresso", "smoothie"] 출력

cafe.splice(0, 0, 'soldout');

cafe배열 값에서 인덱스 번호 0번째부터 시작해서 0개를 삭제하고 cafe배열에서 0인 덱스에 'soldout'문자열을 추가한다.(시작 인덱스 번호 앞에 'soldout'이라는 문자열을 추가한다.)

 

2. 다른 변수 선언해서 값 추가하기

let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
let order = cafe.splice(0, 0, 'soldout');
 
console.log(cafe);
//["soldout", "Americano", "Latte", "Espresso", "smoothie"] 출력
console.log(order);
//[] 출력

let order = cafe.splice(0, 0, 'soldout')

변수 cafe에 값을 삭제 없이 0번 인덱스 번호 앞에 'soldout'문자열을 추가하기 때문에 변수 order에는 아무 값도 없는 빈 배열이 된다.

 

3. 다수의 값 넣기

let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
let order = cafe.splice(1, 0, 'soldout', 'onSale');
 
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. 기존 배열에 바로 삭제하기

let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
cafe.splice(1, 1);
console.log(cafe);
// ["Americano", "Espresso", "smoothie"] 출력

cafe.splice(1, 1)

변수 cafe에 1번째 인덱스 번호부터 시작하여 1개를 삭제한다. 1번째 인덱스를 포함해서 1개니깐 'Latte'가 삭제된다.

변수 cafe에는 'Latte'문자열만 빠지고 기존 배열을 유지한다. 여기서 중요한 건 변수 cafe에서 삭제된 자리에는 공백이 아니라 다음 값들이 한 칸씩 앞으로 당겨서 채워진다.

 

5. 다른 변수 선언해서 삭제하기

let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
let order = cafe.splice(1, 1);
 
console.log(cafe);
// ["Americano", "Espresso", "smoothie"] 출력
console.log(order);
// ["Latte"] 출력

let order = cafe.splice(1, 1)

변수 cafe에 1번째 인덱스 번호부터 시작하여 1개를 삭제한다. 1번째 인덱스를 포함해서 1개니깐 'Latte'가 삭제된다.

이후 변수 order에 배열로 담긴다.

 

6. 제거하고 추가하기

let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
let order = cafe.splice(1, 1, 'soldout', 'onSale');
 
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. 원하는 인덱스 번호 이후 값을 모두 삭제하기

let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie'];
let order = cafe.splice(1);
 
console.log(cafe);
// ["Americano"] 출력
console.log(order);
// ["Latte", "Espresso", "smoothie"] 출력

let order = cafe.splice(1)

변수 cafe에 1번째 인덱스 번호를 포함해서 이후 모든 값을 삭제한다. 변수 order에는 삭제된 'Latte', 'Espresso', 'smoothie' 이 들어간다.

 

 

-응용

1. 반복문과 splice()

let numbering = [1,2,3,4,5,6,7,8,9,10];
let saveing = [];
 
for(let i = 0; i < 4; i++){
  let getthe = numbering.splice(i,1)[0];
  saveing.push(getthe);
}
 
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을 가져올 수 있다.