indexOf()
배열과 문자열에서 사용할 수 있는 매서드로, 지정된 원소의 인덱스를 반환해 준다.
배열에 해당 인덱스가 없다면 -1이 반환된다.
구문
arr.indexOf(찾을 원소)
arr.indexOf(찾을 원소, 검색을 시작할 위치)
사용예시
주요 기능과는 다르게 배열에 특정 원소가 있는지 없는지를 판단할 때 자주 쓰인다 -_-;;
물론 Array.includes()가 있긴 한데.. 음.. 왜 내가 공부할 때는 includes()를 안 썼지?
어쨌든.. 배열에 내가 원하는 값이 없을 경우 -1을 리턴해주는 특징을 이용해서 주로
해당 배열에 내가 찾는 원소가 있는지 없는지를 판단할 수 있다.
const someArr = ["banana", "apple", "orange"];
someArr.indexOf("banana");
// 0
someArr.indexOf("pineApple");
// -1
if(someArr.indexOf("pineApple") === -1){
console.log("pineApple은 someArr에 존재하지 않습니다.");
}
//pineApple은 someArr에 존재하지 않습니다.
검색을 시작할 위치 사용
이거는 포스트 쓸라고 mdn 찾다 보니까 알게 된 건데, 역시 자바스크립트는 해도 해도 모르는 게 너무 많은 것 같다.
해당 위치 이후부터 검색을 시작할 수 있는 부분인 듯?
const someArr = [1,2,3,1,2,3,1,2,3];
someArr.indexOf(1);
//0
someArr.indexOf(1,1); // 1번째 원소인 2부터 탐색 시작
//3음수인 경우 뒤에서 부터 검색한다고 한다.
-1이면 뒤에서 1번째까지, -2면 뒤에서 2번째까지, -3이면 뒤에서 3번째까지..
별로 응용할만한 건 바로 안 떠오른다. 그냥 알아만 두자.
const someArr = [1,2,3,1,2,3,1,2,3];
someArr.indexOf(1);
//0
someArr.indexOf(1,-1);
//-1
someArr.indexOf(1,-2);
//-1
someArr.indexOf(1,-3);
//6
someArr.indexOf(1,someArr.length * -1);
//-1
요소의 모든 항목 찾기
while문과 조합해서, 배열 내에서 내가 원하는 원소의 모든 위치를 탐색할 수 있다.
const someArr = ['a', 'b', 'a', 'c', 'a', 'd'];
const target = 'a';
let targetIndexs = [];
let idx = someArr.indexOf(target);
while (idx != -1) {
targetIndexs.push(idx);
idx = someArr.indexOf(target, idx + 1);
}
console.log(targetIndexs);
// [0, 2, 4]시작할 인덱스를 넣는 방식으로, 처음에 찾게 된 첫 번째 원소의 인덱스에 + 1을 해준걸 색인 위치로 잡아준다.
위의 결과를 하나씩 보면 처음 idx는 첫번째 a, 0이 나온다. while 문으로 들어가서, idx가 0이므로 반복문이 시작된다.
targetIndexs에 idx를 넣는다 [0] 그리고 idx는 someArr에서 "a"를 찾는데 이때 검색 시작점은 idx + 1, 1이 된다.
두 번째 원소인 b부터 a를 찾아보면 idx는 2가 된다. 2는 -1이 아니므로 다시 반복문이 돌아간다.
2가 targetIndexs에 넣어지고, [0, 2] someArr에서 2+1, 3번째 원소인 c부터 다시 "a"를 찾으면 4가 나온다.
다시, 4를 targetIndexs에 넣어주고 [0, 2, 4] 4+1, 5번째 원소인 d부터 찾는데 이후 "a"는 없으므로 -1이 나오고
반복문이 종료된다.
이런 식으로 배열 내 모든 "a"의 인덱스를 담는 배열을 얻을 수 있다.
사실 map()과 filter(), 혹은 reduce()를 쓰면 더 편하게 할 수 있다.
const someArr = ['a', 'b', 'a', 'c', 'a', 'd'];
const target = 'a';
someArr.map((el, idx) => el === target ? idx : null).filter(el => el !== null);
// [0, 2, 4]
someArr.reduce((acc, cur, idx) => {
if(cur === target) acc.push(idx);
return acc;
}, [])
// [0, 2, 4]
배열 내 중복값 제거
filter()와 조합해서 배열의 중복값을 제거할 수 있다.
const someArr = [1,2,1,1,1,1,2,2,2,3,3,1,1,1,2,3,4];
someArr.filter((el, idx, arr) => arr.indexOf(el) === idx)
//[1, 2, 3, 4]filter()의 세 번째 매개변수 원본 배열에서 현재 원소의 인덱스를 indexOf로 찾은 후,
filter()의 두 번째 매개변수인 현재 진행되는 인덱스가 같을 경우에만 리턴해주면 중복값이 제거된다.
lastIndexOf()
이거는 콘솔에 테스트하면서 indexOf()를 찍어보다 옆에 나와서 한번 해본 건데
indexOf의 뒤에서부터 버전이라고 생각하면 될 듯.
마지막 인덱스를 반환해 준다.
const someArr = [1,2,3,1,2,3,1,2,3,1,2,3];
someArr.indexOf(1);
//0
someArr.lastIndexOf(1);
//9이것도 추후에 응용방법이나 사용처가 나오면 추가해 보자.
아. 마찬가지로 얘도 색인을 시작할 위치를 넣어 줄 수 있다.
