indexOf( )/lastIndexOf( )/includes( )

indexOf( ) / lastIndexOf( ) / includes( )

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.
lastIndexOf( ) 메서드는 반대로 기준을 끝에서 시작합니다.
includes( ) 메서드는 찾을 값이 배열 값에 포함되어 있을 때 불린(true/false)으로 반환합니다.

---

indexOf( ) / lastIndexOf( ) 메서드

객체 메서드와 동일하게 찾는 배열값을 식별자로 반환해주는 메서드입니다. 똑같이 배열값을 찾을 때 사용되며 값이 없으면 -1을 반환하는 것도 똑같습니다.
lastIndexOf ( ) 메서드는 찾는 기준점이 끝에서 시작합니다.

문법
Array.indexOf(찾는 배열값)
Array.indexIndexOf(찾는 배열값)

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;

결과보기

번호	기본값	메서드	리턴값

includes( )

includes( ) 메서드 역시 배열 값을 찾는 메서드이지만 불린 값으로 나타내주는 차이점이 있습니다.

　 문법
Array.includes(찾는 배열값)

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 = arrNum5.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;

결과보기

번호	기본값	메서드	리턴값