Encontre o índice do objeto no array JavaScript

1. Use o método findIndex() para encontrar o índice do objeto em um array em JavaScript
2. Use a biblioteca lodash para encontrar o índice do objeto na matriz JavaScript

Este artigo explorará o método findIndex() e o uso de lodash para localizar o índice do objeto dentro do array JavaScript.

Use o método findIndex() para encontrar o índice do objeto em um array em JavaScript

ES6 adicionou um novo método chamado findIndex() ao Array.prototype, que retorna o primeiro elemento em um array que passa no teste fornecido. O método findIndex() retorna o índice do elemento que satisfaz uma função de teste ou -1 se nenhum elemento passou no teste. O findIndex() é melhor para matrizes com tipos não primitivos (por exemplo, objetos) para encontrar o índice de um item.

Fornecemos um retorno de chamada como o primeiro parâmetro em Array.prototype.findIndex(). Este método é útil se o índice das matrizes não for primitivo. Podemos usar este método se o índice do array for mais do que apenas valores. Depois de retornar o primeiro elemento que corresponde à condição especificada, findIndex() para de verificar o array para os itens restantes no array.

A sintaxe para findIndex() é mostrada abaixo.

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

Opcionalmente, index e arr podem ser passados ​​para a função de retorno de chamada. A opção index aponta para o índice do elemento atual na matriz, enquanto arr é o objeto do array ao qual o elemento atual pertence. O findIndex() retorna -1 se a condição especificada na matriz não corresponder.

Suponha que temos a seguinte matriz com tipos primitivos e gostaríamos de encontrar o índice do item que tem mais de 18 anos. Então, podemos usar findIndex() para encontrar o índice do primeiro item que corresponda à condição Especificadas.

Código de exemplo:

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

Produção:

3

Como o primeiro item que corresponde à condição especificada tem um índice de 3, pois está acima de 18, obtemos o valor do índice como 3.

Agora podemos usar a mesma lógica para encontrar o índice do objeto que corresponde à condição que especificamos com o método findIndex(). Podemos usar findIndex() para encontrar o índice de uma pessoa que obteve nota B.

Código de exemplo:

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)

Produção:

2

Aqui, o findIndex() é usado com o array Result, que contém nossos dados na forma de objetos JavaScript. Implementamos a função de seta, que também foi introduzida no ES6 como uma função de retorno de chamada com o método findIndex(). Passamos elemento para a função de retorno de chamada, que contém o valor atual do objeto no array que percorremos.

Use a biblioteca lodash para encontrar o índice do objeto na matriz JavaScript

Podemos usar a biblioteca leve lodash, tornando o JavaScript mais fácil, eliminando o incômodo de trabalhar com matrizes, números, objetos, strings e muito mais. Podemos baixar o arquivo lodash.js do site oficial e carregá-lo no topo do nosso site, conforme mostrado abaixo.

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

Podemos instalá-lo localmente como npm i --save lodash ou yarn add lodash. Com tudo configurado, podemos usar o método _.findIndex(). A sintaxe é mostrada abaixo.

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

Aqui, os argumentos array indicam o array que precisamos processar. A opção [predicate=_.identity] é a função chamada por iteração. A terceira opção [fromIndex=0] é opcional e pode ser usada para definir o ponto de partida para iniciar a iteração.

Usamos o array criado no método acima para a demonstração do método lodash.

Exemplo de código:

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

Produção:

2