JavaScript 배열에서 객체 색인 찾기

1. findIndex() 메서드를 사용하여 JavaScript에서 배열의 개체 인덱스 찾기
2. lodash 라이브러리를 사용하여 JavaScript 배열에서 객체 색인 찾기

이 기사에서는 findIndex() 메서드와 lodash를 사용하여 JavaScript 배열 내에서 객체의 인덱스를 찾는 방법을 살펴봅니다.

findIndex() 메서드를 사용하여 JavaScript에서 배열의 개체 인덱스 찾기

ES6은 제공된 테스트를 통과하는 배열의 첫 번째 요소를 반환하는 Array.prototype에 findIndex()라는 새로운 메서드를 추가했습니다. findIndex() 메서드는 테스트 기능을 충족하는 요소의 인덱스를 반환하거나 테스트를 통과한 요소가 없으면 -1을 반환합니다. findIndex()는 항목의 인덱스를 찾기 위해 기본이 아닌 유형(예: 개체)이 있는 배열에 가장 적합합니다.

Array.prototype.findIndex()의 첫 번째 매개변수로 콜백을 제공합니다. 이 방법은 배열의 인덱스가 기본이 아닌 경우에 유용합니다. 배열 인덱스가 값 이상인 경우 이 방법을 사용할 수 있습니다. 지정된 조건과 일치하는 첫 번째 요소를 반환한 후 findIndex()는 배열의 나머지 항목에 대한 배열 검사를 중지합니다.

findIndex() 구문은 아래와 같습니다.

array.findIndex(function(currentValue, index, arr))

선택적으로 index 및 arr을 콜백 함수에 전달할 수 있습니다. index 옵션은 배열에서 현재 요소의 인덱스를 가리키는 반면 arr은 현재 요소가 속한 배열 객체입니다. findIndex()는 배열에 지정된 조건이 일치하지 않으면 -1을 반환합니다.

다음과 같은 기본 유형의 배열이 있고 18세 이상인 항목의 인덱스를 찾고 싶다고 가정합니다. 그런 다음 findIndex()를 사용하여 지정한 조건과 일치하는 첫 번째 항목의 색인을 찾을 수 있습니다.

예제 코드:

const ages = [3, 10, 17, 23, 52, 20];
let index = ages.findIndex(age => age > 18);
console.log(index);

출력:

3

지정된 조건과 일치하는 첫 번째 항목은 18보다 크므로 인덱스가 3이므로 인덱스 값을 3으로 얻습니다.

이제 동일한 논리를 사용하여 findIndex() 메서드로 지정한 조건과 일치하는 객체의 인덱스를 찾을 수 있습니다. findIndex()를 사용하여 B 등급을 받은 사람의 인덱스를 찾을 수 있습니다.

예제 코드:

const Result =
    [
      {
        name: 'John',
        grade: 'A',
      },
      {
        name: 'Ben',
        grade: 'C',
      },
      {
        name: 'Anthony',
        grade: 'B',
      },
      {
        name: 'Tim',
        grade: 'B-',
      },
    ]

    const index = Result.findIndex((element) => element.grade === 'B');
console.log(index)

출력:

2

여기에서 findIndex()는 Result 배열과 함께 사용되며, 이 배열은 JavaScript 개체의 형태로 데이터를 보유합니다. 우리는 ES6에서 findIndex() 메소드를 사용하여 콜백 기능으로 도입된 화살표 기능을 구현했습니다. 루프를 통해 배열에서 객체의 현재 값을 보유하는 콜백 함수에 요소를 전달했습니다.

lodash 라이브러리를 사용하여 JavaScript 배열에서 객체 색인 찾기

가벼운 라이브러리 lodash를 사용하여 배열, 숫자, 객체, 문자열 등을 사용하는 번거로움을 없애 JavaScript를 더 쉽게 만들 수 있습니다. 공식 웹사이트에서 lodash.js 파일을 다운로드하여 아래와 같이 웹사이트 상단에 로드할 수 있습니다.

<script src="lodash.js"> </script>

npm i --save lodash 또는 yarn add lodash로 로컬에 설치할 수 있습니다. 모든 설정이 완료되면 _.findIndex() 메서드를 사용할 수 있습니다. 구문은 아래와 같습니다.

_.findIndex(array, [predicate = _.identity], [fromIndex = 0])

여기에서 인수 array는 처리해야 하는 배열을 나타냅니다. [predicate=_.identity] 옵션은 반복당 호출되는 함수입니다. 세 번째 옵션 [fromIndex=0]은 선택 사항이며 반복을 시작할 시작점을 설정하는 데 사용할 수 있습니다.

lodash 방법의 데모를 위해 위의 방법으로 만든 배열을 사용합니다.

코드 예:

var index = _.findIndex(Result, {grade: 'B'})
console.log(index);

출력:

2