728x90
배열 Method[slice(), splice(), indexOf(), lastIndexOf(), includes()]
배열은 다양한 메서드를 제공합니다. 오늘은 slice(), splice(), indexOf(), lastIndexOf(), includes()메서드에 대해 알아보겠습니다.
1. slice()
slice()메서드는 배열 요소를 다른 요소로 변경하여 배열로 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
* script
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;
2. splice()
splice()메서드는 배열 요소를 다른 요소로 변경하여 배열로 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 | 결과값 |
|---|---|---|---|---|
* script
const 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;
const 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;
const 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;
const 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;
const 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;
const 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;
3. indexOf() / lastIndexOf() / includes()
indexOf()메서드는 배열 요소를 검색할 때 사용하며 숫자로 반환합니다. lastIndexOf()메서드는 배열 요소를 끝에서 검색하여 숫자로 반환합니다. includes()메서드는 배열 요소를 검색하여 불린(true, false)으로 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
* script
const arrNum = [100, 200, 300, 400, 500];
const arrIndex = arrNum.indexOf(200);
document.querySelector(".sample10_N1").innerHTML = "1";
document.querySelector(".sample10_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M1").innerHTML = "arrNum.indexOf(200)";
document.querySelector(".sample10_P1").innerHTML = arrIndex;
const arrNum2 = [100, 200, 300, 400, 500];
const arrIndex2 = arrNum2.indexOf(300);
document.querySelector(".sample10_N2").innerHTML = "2";
document.querySelector(".sample10_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M2").innerHTML = "arrNum.indexOf(300)";
document.querySelector(".sample10_P2").innerHTML = arrIndex2;
const arrNum3 = [100, 200, 300, 400, 500];
const arrIndex3 = arrNum3.indexOf(600);
document.querySelector(".sample10_N3").innerHTML = "3";
document.querySelector(".sample10_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M3").innerHTML = "arrNum.indexOf(600)";
document.querySelector(".sample10_P3").innerHTML = arrIndex3;
const arrNum4 = [100, 200, 300, 400, 200];
const arrIndex4 = arrNum4.lastIndexOf(200);
document.querySelector(".sample10_N4").innerHTML = "4";
document.querySelector(".sample10_Q4").innerHTML = "[100, 200, 300, 400, 200]";
document.querySelector(".sample10_M4").innerHTML = "arrNum.lastindexOf(200)";
document.querySelector(".sample10_P4").innerHTML = arrIndex4;
const arrNum5 = [100, 200, 300, 400, 200];
const arrIndex5 = arrNum5.includes(200);
document.querySelector(".sample10_N5").innerHTML = "5";
document.querySelector(".sample10_Q5").innerHTML = "[100, 200, 300, 400, 200]";
document.querySelector(".sample10_M5").innerHTML = "arrNum.includes(200)";
document.querySelector(".sample10_P5").innerHTML = arrIndex5;
const arrNum6 = [100, 200, 300, 400, 200];
const arrIndex6 = arrNum6.includes(600);
document.querySelector(".sample10_N6").innerHTML = "6";
document.querySelector(".sample10_Q6").innerHTML = "[100, 200, 300, 400, 200]";
document.querySelector(".sample10_M6").innerHTML = "arrNum.includes(600)";
document.querySelector(".sample10_P6").innerHTML = arrIndex6;
728x90
반응형
'Javascript' 카테고리의 다른 글
| [javascript]find(), findIndex(), filter(), map(), Array.from() (2) | 2022.09.27 |
|---|---|
| [javascript]concat(), reduce(), reduceRight() (1) | 2022.09.27 |
| [javascript]unshift(), shift(), reverse(), sort() (1) | 2022.09.27 |
| [javascript]startsWith() / endsWith() (1) | 2022.09.27 |
| [javascript]클래스 (3) | 2022.09.20 |
댓글