indexOf와 findIndex 함수의 차이점

JavaScript는 클라이언트 측과 서버 측 모두에서 사용할 수 있는 동적 프로그래밍 언어입니다. JavaScript는 대화형 웹 페이지를 만드는 데 사용됩니다. React JS, Angular JS, Node JS 등과 같은 많은 프레임워크가 있습니다. JavaScript는 지정된 요소의 색인을 가져오는 몇 가지 방법을 제공합니다. indexOf 및 findIndex가 이러한 메소드입니다.

JavaScript의 indexOf 함수

JavaScript의 indexOf 함수를 사용하면 배열에서 요소를 검색하고 해당 배열에서 처음 발견된 인덱스를 반환할 수 있습니다. 요소를 찾을 수 없으면 -1이 반환됩니다. 이 메소드의 구문은 다음과 같습니다:

으아아아

여기서 array는 indexOf 메소드를 실행하기 위한 요소들의 목록입니다. Element는 검색할 요소를 나타내며, index는 검색할 요소의 시작 위치를 의미합니다.

예

월 이름 배열을 고려해 보겠습니다. indexOf 메소드를 사용하여 "Mar" 달의 인덱스를 찾습니다

으아아아

출력

으아아아

제공되는 출력 인덱스는 "2"입니다. 검색 요소가 배열에 없으면 "-1"이 출력으로 반환됩니다.

으아아아

월 배열에 요소가 존재하지 않으므로 indexOf 함수는 "-1"을 반환합니다.

findIndex 함수 JavaScript

JavaScript의 array.findIndex() 함수는 함수에 지정된 조건이 충족되면 배열에 있는 첫 번째 요소의 인덱스를 반환하는 데 사용됩니다. 이 요소는 함수 호출 중에 사용자에 의해 전달됩니다. 해당 요소가 배열에 없으면 -1이 반환됩니다.

findIndex 메서드의 구문은 다음과 같습니다.

으아아아

여기서 "arr"은 findIndex 함수가 실행되는 배열을 나타냅니다.

findIndex 메소드에는 다음 매개변수가 있습니다:

• func - 조건을 지정하는 콜백 함수입니다. 다음 매개변수를 사용합니다:

  • o 요소 - 배열의 현재 요소입니다

  • o index - 현재 요소의 인덱스, 선택사항

  • o arr - 이 메서드가 실행되는 배열도 선택 사항임을 나타냅니다.

• thisArg - 선택적 값입니다

findIndex 메소드는 "return" 키워드를 사용하는 것과 "inline" 함수를 사용하는 두 가지 방법으로 사용할 수 있습니다. 여기서 하나의 함수를 다른 함수에 전달하는 것을 "콜백 함수"라고 합니다.

“반품” 키워드를 사용하세요

빨간색, 녹색, 파란색, 노란색, 주황색과 같은 색상 세트가 있다고 가정해 보겠습니다. 우리는 노란색 인덱스를 원합니다.

예

으아아아

Output

다음과 같은 출력이 생성됩니다.

으아아아

여기서 "yellow" 요소가 인덱스 위치 "3"에 나타나기 때문에 "3"이 출력됩니다.

인라인 함수 사용

위에 언급된 동일한 프로그램을 다음과 같이 작성할 수도 있습니다.

예

으아아아

Output

다음과 같은 출력이 생성됩니다.

으아아아

주어진 배열의 두 번째 위치에 "blue" 요소가 나타나기 때문에 "2"가 출력됩니다.

indexOf와 findIndex 함수의 차이점

indexOf와 findIndex 메소드 사이에는 두 가지 주요 차이점이 있습니다.

첫 번째 차이점

"indexOf 메소드는 요소를 매개변수로 사용합니다. findIndex 메소드에서는 콜백 함수가 매개변수로 전달됩니다."

아래 예에서는 이에 대해 설명합니다.

으아아아

Output

다음과 같은 출력이 생성됩니다.

으아아아

두 경우 모두 첫 번째 인덱스에 "banana" 요소가 나타나기 때문에 출력은 "1"로 제공됩니다. indexOf 메소드에서는 검색하려는 요소가 매개변수로 전달되고 함수는 배열의 각 요소를 비교하여 해당 요소가 발견된 첫 번째 위치를 반환합니다.

findIndex에서 이 메소드는 배열의 각 요소를 배열에서 지정된 요소를 확인하는 함수로 보냅니다. 요소가 발견되면 "True"인 부울 값이 반환되고 findIndex 메소드는 해당 특정 인덱스를 반환합니다.

두 경우 모두 값이나 요소가 배열에 없으면 두 메서드 모두 "-1"을 출력으로 반환합니다.

두 번째 차이점

indexOf 메소드는 간단한 요소의 색인을 얻는 데 적합합니다. 그러나 이 방법은 객체와 같이 더 복잡한 것의 인덱스를 찾을 때 제대로 작동하지 않습니다. 이는 "참조 평등" 때문입니다.

참조 동등성에 따라 비교 중인 두 개체가 정확히 동일한 개체를 참조하는 경우에만 비교가 true를 반환합니다. JavaScript에서는 두 개의 동일한 객체가 동일한 객체를 참조하지 않는 한 동일하지 않습니다.

예

다음 예를 통해 이를 이해해 보겠습니다.

으아아아

Output

다음과 같은 출력이 생성됩니다.

으아아아

첫 번째 indexOf 함수에서는 객체가 동일하더라도 주어진 배열에서 찾을 수 없으므로 "-1"을 반환합니다.

마지막으로 사용한 indexOf 메소드에서는 실제 참조를 전달하면 객체의 인덱스를 반환합니다. findIndex 메소드는 주어진 배열의 모든 키와 값 쌍을 확인하여 특정 객체에 대한 올바른 인덱스를 찾아 반환합니다.

결론

indexOf 및 findIndex 메소드는 모두 지정된 요소의 첫 번째 인덱스를 반환합니다. indexOf 메소드는 인덱스가 반환될 요소를 매개변수로 사용하고, findIndex 메소드는 함수를 매개변수로 사용합니다. 그러나 두 함수 모두 "-1"을 출력으로 반환합니다.

위 내용은 indexOf와 findIndex 함수의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!