[Array] JS - splice() 메서드 ★ - 배열값 (제거/추가)된 원본배열 반환 (= splice메서드 = 스플라이스메서드)

1. array.splice() 예제 - 배열값 (추가/제거)된 원본 배열 반환
2. array.splice() 정의
3. array.splice() 구문
4. array.splice() 예제 - 3번째 요소 1개 제거 후, 2개 요소 추가
5. array.splice() 예제 - 3번째 요소부터 2개 요소 제거

array.splice() 예제 - 배열값 (추가/제거)된 원본 배열 반환 

 

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

var code = ["HTML", "CSS", "PHP", "SQL"];

document.getElementById("demo").innerHTML = code;

function homzzang() {

  code.splice(2, 0, "JS", "JQ");

  document.getElementById("demo").innerHTML = code;

}

</script>

 

결과값: HTML,CSS,JS,JQ,PHP,SQL

array.splice() 정의

 

배열값 (추가/제거)된 원본 배열 반환.

 

---

 

1.

원래 배열을 변경.

2. cf.

array.slice() 메서드 - (start <= index < end) 구간의 배열요소 선택. (※ 원본 배열 변경 X)

3.

• ECMAScript1 (ES1: JavaScript 1997)
• 모든 브라우저 지원.

 

4. MDN splice() 예제보기

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

 

array.splice() 구문

 

array.splice(index, howmany, item1, ....., itemX)

 

---

[매개변수]

index

필수. 배열값 추가/제거할 색인번호. 

• 배열 끝부터 위치 지정하려면 음수 사용. (예: -1: 맨 끝)

 

howmany

선택. 제거할 배열값 개수. 

• 0으로 설정하면 제거 X

 

item1, ..., itemX

선택. 추가할 배열값.

 

---

[반환값]

 

배열값이 (제거/추가)된 원본 배열 반환.

 

array.splice() 예제 - 3번째 요소 1개 제거 후, 2개 요소 추가

 

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

var code = ["HTML", "CSS", "PHP", "SQL"];

document.getElementById("demo").innerHTML = code;

function homzzang() {

  code.splice(2, 1, "JS", "JQ");

  document.getElementById("demo").innerHTML = code;

}

</script>

 

결과값: HTML,CSS,JS,JQ,SQL

array.splice() 예제 - 3번째 요소부터 2개 요소 제거

 

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

var code = ["HTML", "CSS", "PHP", "SQL"];

document.getElementById("demo").innerHTML = code;

function homzzang() {

  code.splice(2, 2);

  document.getElementById("demo").innerHTML = code;

}

</script>

 

결과값: HTML,CSS