> 웹 프론트엔드 > JS 튜토리얼 > JS 배열의 indexOf 메소드 분석(예제 포함)

JS 배열의 indexOf 메소드 분석(예제 포함)

不言
풀어 주다: 2018-11-15 17:48:22
앞으로
3083명이 탐색했습니다.

이 기사의 내용은 JS 배열의 indexOf 메소드 분석에 대한 것입니다(예제 포함). 이는 특정 참조 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

지난 이틀 동안 집에서 친구의 프로젝트를 도와주던 중, 프로젝트에서 배열의 indexOf 방식을 사용했는데, 아주 기분 좋은 글을 발견해서 방지하는 방법으로 정리했습니다. 링크가 손실되지 않습니다.

indexOf는 모두가 잘 알고 있을 것입니다. 특히 문자열에 하위 문자열이 포함되어 있는지 판단할 때 자주 사용되는 도구입니다. 이 기사에서는 최근에 발생한 문제를 기반으로 indexOf 메서드에 대해 예제를 사용하여 설명합니다. 이 글은 소소한 지식 포인트를 모아놓은 글이므로 깊이 있는 논의를 위한 주제는 아닙니다. 따라서 여기에서는 indexOf()의 두 번째 매개변수에 대한 설명은 생략하겠습니다.

문자열 유형의 사용

잘 알려진 문자열 사용법을 검토하세요. 예를 들어

let str = 'orange';
 
str.indexOf('o'); //0
str.indexOf('n'); //3
str.indexOf('c'); //-1
로그인 후 복사

여기서 0과 3은 각각 문자열에서 o와 n이 나타나는 위치입니다. 시작 인덱스는 0입니다. 그리고 -1은 일치하는 항목이 없음을 의미합니다.
누군가가 왜 -1이 null 또는 정의되지 않음이 아닌지 묻습니다. 규칙을 만든 사람에게 물어보세요! 무기력한 표정. null 或者 undefined。你去问制定规则的人啊!一脸无奈。
大家看到这里感觉没什么亮点啊,别急接着再来一个例子

let numStr = '2016';
 
numStr.indexOf('2'); //0
numStr.indexOf(2); //0
로그인 후 복사

看到这里有个小点就是 indexOf 会做简单的类型转换,把数字转换成字符串 '2' 然后再执行

Number 类型的使用

大家可能会想 number 类型有没有 indexOf 方法因为会做隐式转换嘛!明确告诉大家没有,上例子

let num = 2016;
 
num.indexOf(2); //Uncaught TypeError: num.indexOf is not a function
로그인 후 복사

非要对 number 类型使用 indexOf 方法嘞?那就转换成字符串咯,接着上例来写

//二逼青年的写法
num = '2016';
num.indexOf(2); //0
 
//普通青年的写法
num.toString().indexOf(2); //0
 
//文艺青年的写法
('' + num).indexOf(2); //0
로그인 후 복사

第一种写法简单直接,对于已知的较短的数字也不是不可行。但是 num 变量针对不同数据是变化的时候,怎么办呢?

第二种写法最为常用,但对比第三种写法长了一点。哈哈,其实都可以,代码洁癖的人喜欢第三种 √ 。

array 类型的使用

大家提起精神,大boss来了。
数组方法大家再熟悉不过了,却忽略了数组有 indexOf 这个方法(我个人感觉)。
干说不练瞎扯淡,遇到了什么问题,注意要点又在哪里?

let arr = ['orange', '2016', '2016'];
 
arr.indexOf('orange'); //0
arr.indexOf('o'); //-1
 
arr.indexOf('2016'); //1
arr.indexOf(2016); //-1
로그인 후 복사

这里没把例子拆的那么细,四个用例足以说明问题。

arr.indexOf(‘orange') 输出 0 因为 ‘orange' 是数组的第 0 个元素,匹配到并返回下标。
arr.indexOf(‘o') 输出 -1 因为此方法不会在每一个元素的基础上再次执行 indexOf 匹配。
arr.indexOf(‘2016') 输出 1 因为此方法从头匹配直到匹配到时返回第一个数组元素的下表,而不是返回全部匹配的下标。
arr.indexOf(2016) 모두들 여기서 흥미로운 내용을 볼 수 없습니다. 걱정하지 마세요. 여기에 또 다른 예가 있습니다

rrreee

여기에서 볼 수 있는 작은 점은 indexOf가 간단한 유형 변환을 수행한다는 것입니다. 숫자를 문자열 '2'로 변환한 다음 실행합니다.

숫자형 사용법

암시적 변환을 수행하기 때문에 숫자형에 indexOf 메소드가 있는지 궁금하실 겁니다! 확실히 말씀드리자면, 아니요, 위의 예 rrreee에서 number 유형에 indexOf 메서드를 사용해야 하나요? 그런 다음 문자열로 변환한 다음 위의 예에서

rrreee

라고 작성합니다. 첫 번째 작성 방법은 간단하고 직접적이며 알려진 더 짧은 숫자에는 불가능하지 않습니다. 하지만 num 변수가 다른 데이터에 대해 변경되면 어떻게 해야 할까요? 두 번째 글쓰기 방법이 가장 일반적으로 사용되지만, 세 번째 글쓰기 방법보다 조금 더 깁니다. 하하, 사실 둘 다 괜찮습니다. 코드에 집착하는 사람들은 세 번째 √ 를 선호합니다.

어레이형 사용법
  • 모두 힘내세요 대장님이 오십니다.

    모두가 배열 메서드에 매우 익숙하지만 배열에 indexOf 메서드가 있다는 사실을 무시합니다(개인적인 느낌).
  • 어떤 문제가 발생했고, 주의해야 할 핵심 사항은 무엇인가요?
  • rrreee

    여기에서는 예제를 자세히 설명하지 않습니다. 네 가지 사용 사례로 문제를 설명할 수 있습니다.

  • arr.indexOf('orange') 'orange'가 배열의 0번째 요소이고 인덱스가 일치하여 반환되므로 0을 출력합니다.
  • arr.indexOf('o') 이 메서드는 요소별로 indexOf 일치를 다시 수행하지 않기 때문에 -1을 출력합니다.

    arr.indexOf('2016') 출력 1 이 메서드는 일치하는 모든 인덱스를 반환하는 대신 일치 항목에 도달할 때까지 처음부터 첫 번째 배열 요소의 다음 목록을 반환하기 때문입니다.

    arr.indexOf(2016) Output -1 참고: 여기서는 암시적 유형 변환이 수행되지 않습니다.
이제 구덩이가 발견되었으니 그 바닥까지 파헤쳐 보는 편이 나을 것 같습니다. MDN 공식 웹사이트를 방문하여 알아보세요. 이 주제에 관심이 있는 친구는

Array.prototype.indexOf()

로 바로 이동할 수 있습니다. 🎜🎜더 자세히 알고 싶으신 분들을 위해 공식 설명이 있습니다. 🎜🎜indexOf()는 엄격한 동등성(=== 또는 삼중 등호 연산자에서 사용하는 것과 동일한 방법)을 사용하여 searchElement를 배열의 요소와 비교합니다.🎜🎜한 눈에 알 수 있듯이, 🎜엄격한 동등성(===)은 여기에 사용되었습니다🎜. 비슷한 판단을 내릴 때 좀 더 주의를 기울여 주시기 바랍니다. 숫자는 문자열로 변환되고 문자열은 숫자로 변환되지 않을 것이라고 생각하는 실수를 저지르지 마십시오. 🎜🎜🎜요약🎜🎜🎜이 글의 내용이 모두의 공부나 업무에 도움이 되었으면 좋겠습니다. 궁금한 점이 있으면 메시지를 남겨주세요. 🎜🎜🎜🎜String: indexOf는 숫자 0에 대해 유형 변환을 수행하고 이를 문자열 '0'으로 변환합니다. 🎜🎜🎜🎜Number: indexOf 메소드가 없습니다. 숫자형을 문자열로 변환해야 합니다. 세 가지 방법이 있습니다. 직접 문자열, 문자열 toString, 문자열 연결. 🎜🎜🎜🎜Array: 배열에도 indexOf 메소드가 있지만 유형 판단을 할 때는 엄격한 동등성, 즉 ===가 사용됩니다. 🎜🎜🎜🎜🎜

위 내용은 JS 배열의 indexOf 메소드 분석(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:https://segmentfault.com/a/1190000017001710
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿