자바스크립트의 배열의 요소인 값을 삭제할 때 slice 메서드를 사용할 수 있다. 하지만, 차이가 있다. slice 메서드를 사용하면 삭제할 값을 제외한 나머지 값들이 새롭게 배열로 만들어 진다. 원본 배열에는 변화는 없다. 새롭게 만들어진 배열은 새로운 배열 변수에 넣어 사용할 수 있다.
자바스크립트 배열의 요소 값 삭제하기
자바스크립트의 배열의 요소를 삭제하는 것 중 slice 메서드가 있다.
삭제라고는 했지만 삭제는 아니다.
다만, 원본 배열의 값을 삭제하고 새로운 배열을 만드는 역할을 한다.
slice 메서드를 사용하여 요소 값이 삭제된 배열을 새롭게 만들 뿐
원본 배열에는 변함이 없다.
slice 메서드 사용
slice 메서드를 사용하는 방법은 간단하다.
인자값이 2개가 주어진다.
첫번째 인자값은 인덱스 위치이고, 두번째 인자값은 갯수이다.
지정한 인덱스부터 갯수만큼 삭제된 배열을 새롭게 만든다.
두번째 인자값은 생략할 수 있다.
newArray = Array.slice(인덱스, [갯수])샘플 코드
위의 사용법으로 간단한 자바스크립트 예제를 만들어 본다.
slice 메서드를 사용한 후 원본배열에 변화가 있는지 확인한다.
<!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("----------");
vSlice = vComp.slice(1);
console.log(typeof(vSlice), vSlice);
document.querySelector("#ret2").innerHTML = vSlice;
console.log("----------");
vSlice = vComp.slice(1,3);
console.log(typeof(vSlice), vSlice);
document.querySelector("#ret3").innerHTML = vSlice;
console.log("----------");
console.log(typeof(vComp), vComp);
document.querySelector("#ret4").innerHTML = vComp;
console.log("----------");
</script>
</body>
</html>원본 배열을 만들고 slice 메서드를 사용해 보았다.
인자값을 하나만 주기도 하고 2개를 주기도 했다.
사용후 원본 배열의 변화가 있는지 확인해 본다.
출력문의 배열변수가 무엇인지 비교하면 쉽게 파악할 수 있다.
결과화면을 보자.
가장 처음의 원본배열과 가장 마지막에 출력한 원본배열의 변화가 없음을 알 수 있다.
반응형
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 숫자 배열 정렬 Sorting Javascript Number Array (0) | 2022.01.02 |
|---|---|
| 자바스크립트 문자열 배열 정렬 Sorting Javascript Sring Array (0) | 2021.12.31 |
| 자바스크립트 배열 값 추가 splice 사용법 (0) | 2021.12.28 |
| 자바스크립트 배열 합치기 Merging Javascript Array (0) | 2021.12.27 |
| 자바스크립트 배열 값 수정 삭제 (0) | 2021.12.26 |
댓글