티스토리 뷰

1. 개념
indexOf , lastIndexOf - 앞,뒤에서 검색해서 값 찾기
indexOf(검색할 값 , 시작위치) - 앞에서부터 검색할 값을 찾기 시작하는 속성
여기서 시작할 위치가 생략이 될 경우에는 시작위치의 값을 0으로 인식하여 처음부터 검색을 시작
일치하는 결과값이 없을 경우에는 -1로 결과를 리턴

lastIndexOf(검색할 값 , 시작위치) - 끝에서부터 검색할 값을 찾기 시작
lastIndexOf는 말 그대로 검색을 앞에서가 아니라 뒤에서부터 찾기 시작함
여기서도 시작위치가 생략이 되었다고 하면 맨 끝에서부터 검색을 시작
2. 태그
indexOf , lastIndexOf
javascript 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<script>
var str = "이체할 금액 300원 , 이체한 금액 300원" ;

// 결과 : 7
console .log(str. indexOf ( "3" ));
// 결과 : 21
console .log(str. indexOf ( "3" , 10 ));
// 결과 : 21
console .log(str. lastIndexOf ( "3" ));
// 결과 : 7
console .log(str. lastIndexOf ( "3" , 10 ));
// 결과 : -1
console .log(str. lastIndexOf ( "5" ));
</script>
</html>
설명
console .log(str. indexOf ( "3" ));
indexOf를 사용해서 맨 앞에 3을 입력했습니다.
그리고 그 뒤에 아무런 값을 입력하지 않았습니다.
시작할 위치에는 아무런 값이 없게 설정을 했습니다.
이 의미는 str에서 3이라는 문자를 찾는데 맨 처음부터 시작해서 발견하면 그 위치값을 리턴해라 라는 의미입니다.
검색할 값 뒤에 아무런 값이 없기 때문에 맨 처음부터 검색을 시작하고 찾을 값은 3이기 때문에 결과값으로 7을 반환하게 됩니다.
console .log(str. indexOf ( "3" , 10 ));
두번째 예제는 처음과 똑같이 3이라는 값을 검색하는 것입니다.
그런데 시작위치를 10이라는 값을 주게 되었습니다.
이렇게 되면 3이라는 문자를 찾는데 10 이후부터 그 값을 찾으라는 것입니다.
앞에 있는 이체할 값 300원에서의 3은 시작할 위치가 10이전이기 때문에 찾기 않게 되고 뒤에 있는 이체한 값의 3을 검색하게 됩니다.
왜냐하면 시작할 위치를 10으로 설정해 주었기 때문입니다.
그래서 결과 값으로 앞에서부터 21번째 위치에 있는 3의 결과값을 반환하게 됩니다.
console .log(str. lastIndexOf ( "3" ));
lastIndexOf는 indexOf와는 반대로 뒤에서부터 검색을 시작하게 됩니다.
그래서 뒤에 있는 값을 아무런 값을 넣지 않았을 때에 맨 뒤부터 시작을 하게 되기 때문에 결과값을 반환하게 됩니다.
하지만 결과값은 뒤에서부터 몇번째 위치라는 것을 말해주는 것이 아니라 맨 앞에서부터 위치를 반환해 주기 때문에 21을 반환하게 됩니다.
즉, 값은 뒤에서부터 찾기 시작하지만 결과값은 동일하게 맨 앞에서부터 위치의 값을 반환하게 되는 것입니다.
console .log(str. lastIndexOf ( "3" , 10 ));
시작할 위치를 10으로 세팅해 주게 되면 뒤에서 부터 탐색을 시작할 때 그 위치를 설정해 주게 되는 것입니다.
즉 lastIndexOf라고 해서 찾을 값을 3을 찾는데 뒤에서부터 10번째 위치에서 부터 앞으로 찾기 시작하라는 것입니다.
그래서 검색을 이체한 금액 3이라는 것 앞에서부터 검색을 시작하게 됩니다.
이렇게 시작한 검색은 이체할 금액 3이라는 3의 위치를 검색하게 되고, 그 결과값은 앞에서부터 7번째 위치라는 것을 반환하게 됩니다.
console .log(str. lastIndexOf ( "5" ));
마지막으로 5라는 값을 검색하라고 하면 일치하는 값이 없기 때문에 -1을 반환하게 됩니다.
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday