slice( )/splice( )

slice( )/splice( )

slice( ) 메서드는 배열의 일부분(slice) 혹은 부분 배열(subarray)을 반환합니다
splice( ) 메서드는 배열의 기존 요소를 삭제 혹은 교체하거나 추가한 후 삭제한 배열 값을 반환합니다.

---

slice( ) 메서드

slice( ) 메서드는 객체 메서드와 동일합니다. 배열값에 해당되는 식별자를 지정하고 해당 배열값을 반환합니다.

문법
Array.slice(반환을 시작할 순서, 반환이 끝날 순서) //-1은 뒤에서 시작

const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.slice(2);

document.querySelector(".sample08_N1").innerHTML = "1";
document.querySelector(".sample08_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M1").innerHTML = "arrNum.slice(2)";
document.querySelector(".sample08_P1").innerHTML = result;

const result2 = arrNum.slice(2, 3);

document.querySelector(".sample08_N2").innerHTML = "2";
document.querySelector(".sample08_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M2").innerHTML = "arrNum.slice(2, 3)";
document.querySelector(".sample08_P2").innerHTML = result2;

const result3 = arrNum.slice(2, 4);

document.querySelector(".sample08_N3").innerHTML = "3";
document.querySelector(".sample08_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M3").innerHTML = "arrNum.slice(2, 4)";
document.querySelector(".sample08_P3").innerHTML = result3;

const result4 = arrNum.slice(2, 5);

document.querySelector(".sample08_N4").innerHTML = "4";
document.querySelector(".sample08_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M4").innerHTML = "arrNum.slice(2, 5)";
document.querySelector(".sample08_P4").innerHTML = result4;

const result5 = arrNum.slice(-2);

document.querySelector(".sample08_N5").innerHTML = "5";
document.querySelector(".sample08_Q5").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M5").innerHTML = "arrNum.slice(-2)";
document.querySelector(".sample08_P5").innerHTML = result5;

const result6 = arrNum.slice(-2, 5);

document.querySelector(".sample08_N6").innerHTML = "6";
document.querySelector(".sample08_Q6").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M6").innerHTML = "arrNum.slice(-2, 5)";
document.querySelector(".sample08_P6").innerHTML = result6;

결과보기

번호	기본값	메서드	리턴값

splice( ) 메서드

splice( ) 메서드는 배열의 식별자로 지정한 기존 배열 값을 삭제하며, 추가할 값이 있으면 해당 위치에 추가합니다.

문법
Array.splice(삭제를 시작할 순서, 삭제할 배열 수, 해당 위치에 교체되어 들어갈 배열 값)

arrNum = [100, 200, 300, 400, 500];
const result = arrNum.splice(2);

document.querySelector(".sample09_N1").innerHTML = "1";
document.querySelector(".sample09_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M1").innerHTML = "arrNum.splice(2)";
document.querySelector(".sample09_P1").innerHTML = result;
document.querySelector(".sample09_A1").innerHTML = arrNum;


arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.splice(2, 3);

document.querySelector(".sample09_N2").innerHTML = "2";
document.querySelector(".sample09_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M2").innerHTML = "arrNum.splice(2, 3)";
document.querySelector(".sample09_P2").innerHTML = result2;
document.querySelector(".sample09_A2").innerHTML = arrNum2;


arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.splice(2, 3, 'javascript');

document.querySelector(".sample09_N3").innerHTML = "3";
document.querySelector(".sample09_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M3").innerHTML = "arrNum.splice(2, 3, 'javascript')";
document.querySelector(".sample09_P3").innerHTML = result3;
document.querySelector(".sample09_A3").innerHTML = arrNum3;


arrNum4 = [100, 200, 300, 400, 500];
const result4 = arrNum4.splice(1, 1, 'javascript');

document.querySelector(".sample09_N4").innerHTML = "4";
document.querySelector(".sample09_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M4").innerHTML = "arrNum.splice(1, 1, 'javascript')";
document.querySelector(".sample09_P4").innerHTML = result4;
document.querySelector(".sample09_A4").innerHTML = arrNum4;


arrNum5 = [100, 200, 300, 400, 500];
const result5 = arrNum5.splice(1, 0, 'javascript');

document.querySelector(".sample09_N5").innerHTML = "5";
document.querySelector(".sample09_Q5").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M5").innerHTML = "arrNum.splice(1, 0, 'javascript')";
document.querySelector(".sample09_P5").innerHTML = result5;
document.querySelector(".sample09_A5").innerHTML = arrNum5;


arrNum6 = [100, 200, 300, 400, 500];
const result6 = arrNum6.splice(0, 4, 'javascript');

document.querySelector(".sample09_N6").innerHTML = "6";
document.querySelector(".sample09_Q6").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M6").innerHTML = "arrNum.splice(0, 4, 'javascript')";
document.querySelector(".sample09_P6").innerHTML = result6;
document.querySelector(".sample09_A6").innerHTML = arrNum6;

결과보기

번호	기본값	메서드	리턴값	결과값