indexOf() / lastIndexOf() / includes(), find() / findIndex()

indexOf() / lastIndexOf() / includes(), find() / findIndex()

indexOf() / lastIndexOf() / includes(), find() / findIndex() 메서드에 대해 알아 봅시다.

---

indexOf() / lastIndexOf() / includes()

indexOf() 메서드는 배열 요소를 검색할 때 사용,lastIndexOf() 메서드는 배열 요소 끝에서 검색할 때 사용, includes() 메서드는 배열 요소가 있는지 없는지 검색합니다.

번호	기본값	메서드	리턴값

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 = "arrNum2.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 = "arrNum3.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 = "arrNum4.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 = "arrNum5.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 = "arrNum6.includes(600)";
document.querySelector(".sample10_P6").innerHTML = arrIndex6; 

find() / findIndex()

find() 메서드는 배열 요소 검색할 때 사용하며 반환은 숫자로 합니다 ,findIndex() 메서드는 배열 요소 검색할 때 사용하며 반환은 요소로 합니다.

번호	기본값	메서드	리턴값

const arrNum = [100, 200, 300, 400, 500];
// const result = arrNum.find(function (element){
//     return element === 300;
// });

// const result = arrNum.find((element) => {
//     return element === 300;
// });

// const result = arrNum.find(element => {
//     return element === 300;
// });

const result = arrNum.find( e => e === 300);

document.querySelector(".sample11_N1").innerHTML = "1";
document.querySelector(".sample11_Q1").innerHTML = "[100, 200, 300, 400, 200]";
document.querySelector(".sample11_M1").innerHTML = "arrNum.find( e => e === 300)";
document.querySelector(".sample11_P1").innerHTML = result; 

const result2 = arrNum.find( e => e === 600);

document.querySelector(".sample11_N2").innerHTML = "2";
document.querySelector(".sample11_Q2").innerHTML = "[100, 200, 300, 400, 200]";
document.querySelector(".sample11_M2").innerHTML = "arrNum.find( e => e === 600)";
document.querySelector(".sample11_P2").innerHTML = result2; 

const arrText = ['javascript', 'jquery', 'react'];
const result3 = arrText.find(el => el === 'javascript');

document.querySelector(".sample11_N3").innerHTML = "3";
document.querySelector(".sample11_Q3").innerHTML = "['javascript', 'jquery', 'react']";
document.querySelector(".sample11_M3").innerHTML = "arrText.find(el => el === 'javascript')";
document.querySelector(".sample11_P3").innerHTML = result3; 

const result4 = arrText.findIndex(el => el === 'javascript');

document.querySelector(".sample11_N4").innerHTML = "4";
document.querySelector(".sample11_Q4").innerHTML = "['javascript', 'jquery', 'react']";
document.querySelector(".sample11_M4").innerHTML = "arrText.findIndex(el => el === 'javascript')";
document.querySelector(".sample11_P4").innerHTML = result4; 

const result5 = arrText.findIndex(el => el === 'html');

document.querySelector(".sample11_N5").innerHTML = "5";
document.querySelector(".sample11_Q5").innerHTML = "['javascript', 'jquery', 'react']";
document.querySelector(".sample11_M5").innerHTML = "arrText.findIndex(el => el === 'html')";
document.querySelector(".sample11_P5").innerHTML = result5;