JS - 배열을 삭제,삽입,수정할 때 강력한 메서드 splice()

자바스크립트의 배열 메서드 중 splice() 메서드는 삭제, 삽입, 대체의 세 가지 기능을 수행 할 수 있다.

 

- 삭제 : splice 메서드를 이용해 배열 데이터를 원하는 만큼 삭제할 수 있다. splice 메서드의 첫번째 매개변수로, 삭제할 데이터의 인덱스를 넣고, 두번째 매개변수에 첫번째 매개변수에 들어간 인덱스부터 삭제할 개수를 넣는다.

let colors = ["red", "green", "blue"]
let removed = colors.splice(0,1); // 제거한 데이터의 배열이 반환됨

alert(colors); // green, blue
alert(removed); // red

 

 

- 삽입 : 매개변수를 세 개 이상 넘기면 배열에 데이터를 삽입할 수 있다. 첫번째 매개변수에는 삽입할 위치(인덱스), 두번째 인덱스에는 0 (아무것도 삭제하지 않을것이기 떄문), 세번째 매개변수에는 삽입할 데이터를 순서로 넘기면 된다.

 

removed = colors.splice(1, 0, "yellow", "orange"); // 인덱스1에 데이터 2개 추가

alert(colors); // green,yellow,orange,blue
alert(removed); // undefined (삭제한 데이터가 없으므로 revmoed에 빈배열이 반환됨)

 

- 대체 : 삽입과 삭제기능을 조합하여 원하는 데이터를 다른 데이터로 대체할 수 있다. 삽입할 데이터와 삭제할 데이터 숫자가 정확히 일치하지 않아도 된다. 예를들어, splice(2, 1, "red", "green")은 인덱스 2의 데이터를 삭제한 다음 문자열 "red"와 "green"을 인덱스 2에 삽입한다.

 

removed = colors.splice(1, 1, "red", "purple"); // 데이터 2개를 추가하고 1개 제거

alret(colors); // green, red, purple, orange, blue
alret(removed); // yellow