Como fazer busca em Array - Métodos indexOf e lastIndexOf

Neste tutorial de JavaScript, vamos aprender como localizar qualquer elemento de um array através dos métodos indexOf e lastIndexOf.

Estudar Array pela Apostila JavaScript Progressivo

Obter meu certificado!

Como Achar Elementos de um Array

Tão importante quanto ordenar os elementos de um array, é fazer uma busca nele.

Imagine um site grande de e-commerce, como Extra ou Americanas.

Na seção de notebooks existem simplesmente centenas de marcas e modelos de máquina.

Imagina olhar um por um pra achar algum com aquela característica específica que você deseja? Não dá, o array com todo os produtos é gigantesco.

Então, uma ferramenta de busca é feita para você definir o que deseja (i7, 8 GB de RAM, HD de 2 TB etc), facilitando muito sua vida.

O processo de busca é chamado de searching, derivado da palavra search, que significa buscar, achar, localizar ou encontrar, e é isso que vamos aprender agora com dois métodos especiais.

Como Buscar um Elemento em Arrays: Método indexOf

Todo objeto do tipo Array possui um método próprio, nativo, o indexOf.

Para usá-lo, basta colocar um ponto após o nome do array, escrever indexOf e passar como argumento o elemento que você deseja buscar.

Por exemplo, se quisermos encontrar o número 10 em um array chamado vetor:

vetor.indexOf(10);

Se este elemento existir, esse método retorna o índice da primeira localização dele.

Se não existir, retorna -1.

Exemplo de uso do indexOf

No exemplo abaixo, criamos um array bem grande, de 20 elementos:

var vetor = [10, 2, 5, 4, 3, 1, 11, 99, 76, 54, 23, 29, 49, 86, 66, 55, 44, 33, 22, 88];

Exibimos esse vetor, então perguntamos ao usuário que número ele deseja localizar.

Ao apertar o botão Buscar, a função main() é acionada.

A main pega o número digitado e passa para função search, junto com o vetor.
Dentro dessa função, buscamos o número digitado através do método indexOf.

Se ele retornar algum índice maior ou igual a 0, é porque tal número existe no array e dissemos sua localização. Caso contrário, retornamos uma mensagem de índice inexistente.

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body >
  Vetor: <div id='vetor'></div><br />
  Numero a ser localizado: <input id="num" type="number"> <br />
  <button onclick="main()">Buscar</button><br />
  Resposta: <div id='resposta'></div>
 </body>
</html>

script.js:

function main()
{
 var vetor = [10, 2, 5, 4, 3, 1, 11, 99, 76, 54, 23, 29, 49, 86, 66, 55, 44, 33, 22, 88];
 var num = parseInt(document.getElementById("num").value);
 var resposta = document.getElementById('resposta');
 var vet = document.getElementById('vetor');

 vet.innerHTML = vetor;
 resposta.innerHTML = search(vetor,num)

}

function search (vetor, elemento)
{
 if(vetor.indexOf(elemento)>=0)
  return "Está no índice "+vetor.indexOf(elemento);
 else
  return "Não está no array"
}

Resultado:

Vetor:

Numero a ser localizado:

Resposta:

Como achar o último Índice - lastIndexOf

Você parou pra pensar: e se tiver o mesmo número, várias vezes, em vários índices?
O método indexOf só retorna o primeiro.

Ele encontra o primeiro e pronto, fecha, acaba.

Existe uma outra função, chamada lastIndexOf que faz o contrário, encontra o último.
Vamos colocar o número 10 ao fim do array.

Nosso código JS que detecta a última aparição do número fica:

function main()
{
 var vetor = [10, 2, 5, 4, 3, 1, 11, 99, 76, 54, 23, 29, 49, 86, 66, 55, 44, 33, 22, 10];
 var num = parseInt(document.getElementById("num").value);
 var resposta = document.getElementById('resposta');
 var vet = document.getElementById('vetor');

 vet.innerHTML = vetor;
 resposta.innerHTML = search(vetor,num)

}

function search (vetor, elemento)
{
 if(vetor.lastIndexOf(elemento)>=0)
  return "Está no índice "+vetor.lastIndexOf(elemento);
 else
  return "Não está no array"
}

Rode e teste! Veja a diferença!