자바스크립트의 배열의 splice 메서드를 사용하면 배열의 조작을 유연하게 할 수 있다. 배열의 특정위치에 기존의 값을 삭제하면서 값을 추가할 수 있기도 하며, 특정위치에 값만 추가할 수 있다. 유연하기 때문에 배열의 값을 사용하고자 한다면 자주 사용될 것이란 생각이다.
자바스크립트 배열 값 추가 splice 사용법
자바스크립트 배열을 조작하기 위해 여러가지 메서드가 존재하는 것을 알게 되었다.
이번에도 추가하는 메서드가 하나가 있다.
splice 메서드이다.
splice 메서드는 자바스크립트 배열의 특정위치에 값을 넣을 수도 있고, 기존에 있던 값을 삭제할 수도 있다.
유연한 성능을 가지고 있으며 기존의 값을 삭제시 남아 있던 empty 같은 값들 또한 존재하지 않는다.
사용법
splice 메서드는 값을 추가하는 용도로 사용되지만 인자값에 따라 기존의 배열의 값을 삭제할 수 있다.
사용법만 보자.
추가될 값은 몇개가 되든 상관이 없다.
다만, 인덱스의 위치지정을 하는 것과 두번째 인자값의 삭제할 갯수이다.
추가될 값은 생략이 가능하다.
첫번째 인자값으로 위치를 지정하고, 삭제할 갯수를 0으로 지정한다면 기존의 값이 삭제없이 값을 추가할 수 있다.
splice(위치지정, 삭제갯수, [추가될 값, 추가될 값, ~~] )샘플코드
위의 사용법을 기준으로 자바스크립트 예제를 만들어 본다.
위치만 지정했을 경우와 값을 추가하는 것까지 다뤄본다.
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트</h2>
<div id="cont">
<p id="ret1"></p>
<p id="ret2"></p>
<p id="ret3"></p>
<p id="ret4"></p>
</div>
<script>
let vText;
let vComp = ["현대자동차","기아자동차","쌍용자동차","쉐보레"];
console.log(typeof(vComp), vComp);
document.querySelector("#ret1").innerHTML = vComp;
console.log("----------");
vComp.splice(0,1);
console.log(typeof(vComp), vComp);
document.querySelector("#ret2").innerHTML = vComp;
console.log("----------");
let vCompAdd1 = "혼다";
let vCompAdd2 = "스즈키";
vComp.splice(1,0, vCompAdd1, vCompAdd2);
console.log(typeof(vComp), vComp);
document.querySelector("#ret3").innerHTML = vComp;
console.log("----------");
vCompAdd1 = "재규어";
vCompAdd2 = "애스턴마틴";
vComp.splice(1,2, vCompAdd1, vCompAdd2);
console.log(typeof(vComp), vComp);
document.querySelector("#ret4").innerHTML = vComp;
console.log("----------");
</script>
</body>
</html>splice 메서드를 사용하면서 첫번째와 두번째 인자값만 사용하기도 하고
여러개의 값을 추가하기도 하였다.
원본배열을 먼저 만들고 출력을 해 본다.
splice 메서드에 추가될 값들 없이 첫번째와 두번째 인자값을 넣을 경우 값이 삭제되는 것을 알 수 있다.
두번째 인자값이 0 인 경우 삭제없이 값이 추가되는 것을 볼 수 있다.
모든 값이 설정된 경우 기존의 자바스크립트 배열에 있는 값이 삭제되고 추가로 값이 들어가는 것을 볼 수 있다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 문자열 배열 정렬 Sorting Javascript Sring Array (0) | 2021.12.31 |
|---|---|
| 자바스크립트 배열의 요소 값 삭제하기 slice 메서드 (0) | 2021.12.29 |
| 자바스크립트 배열 합치기 Merging Javascript Array (0) | 2021.12.27 |
| 자바스크립트 배열 값 수정 삭제 (0) | 2021.12.26 |
| javasciprt array unshift shift 자바스크립트 배열에 값의 추가 삭제 (0) | 2021.12.25 |
댓글