O Em Busca do Código é um site em formato de plataforma de ensino a distância (EAD), totalmente aberta e gratuita.

Aprendendo e ensinando, essa é a minha regra para mim.

Publicado dia 05 de março de 2017.

Compre um adesivo do Em Busca do Código.

Publicidade

Publicidade

Publicidade

Buscar elemento de um array em JavaScript. Dica 14

Nesta dica nós vemos como buscar um determinado elemento de um array em JavaScript.

O código fonte HTML inicial é o código fonte abaixo.

<!DOCTYPE html>
<html>
    <head>
        <title>indexof e lastIndexOf</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>indexof e lastIndexOf</h1>
        <script src="busca.js"></script>
    </body>
</html>

E seguindo o padrão deste curso em formato de dicas, a seguir temos o código fonte JavaScript inicial.

var array1 = new Array("oi","teste","em","Busca","do","código","teste","codigo");

document.write("<h1>"+ array1.join(" - ") +"</h1>");

Método indexOf

Para busca um elementos de um array em JS eu vou criar uma variável e chama-la de busca.

var busca =

Publicidade

Agora é necessário informar o array que quero busca o elemento e sem seguida declaro o método indexOf.

var busca = array1.indexOf();

Mas precisamos informar o que nós queremos buscar, e eu faço isso dentro do parênteses e entre aspas duplas.

var busca = array1.indexOf("Busca");

Agora falta nós mostrarmos o valor buscado em nosso navegador, eu estou utilizando document.write, mas você pode usar alert, console.log...

document.write("<h1>Índice: "+busca+"</h1>");

Vendo o resultado deste código fonte em nosso navegador nós vemos que o que apareceu foi o índice do elemento e não o elemento em si, e como é mais legal aparecer o elemento buscado, vamos alterar um pouquinho nosso document.write.

document.write("<h1>Índice: "+busca+", valor buscado: "+array1[busca]+"</h1>");

O método indexOf é case sensitive e para deixar isso bem claro, agora buscaremos a palavra busca, só que agora com letra minúscula.

var busca02 = array1.indexOf("busca");
document.write("<h1>Índice: "+busca02+", valor buscado: "+array1[busca02]+"</h1>");

Publicidade

Ao buscar com indexOf algo que não exista, o índice informado no resultado dessa busca será -1, e como não existe array com índice -1 em JavaScript o seu valor será indefinido. Teste e veja o resultado.

Em nosso array exemplo vemos duas vezes a palavra código, só que, um com e outra sem acento. Inseri este exemplo para vermos que existe diferenciação entre buscar algo com e sem acento. Mas vamos ao exemplo.

var busca03 = array1.indexOf("codigo");
document.write("<h1>Índice: "+busca03+", valor buscado: "+array1[busca03]+"</h1>");

var busca04 = array1.indexOf("código");
document.write("<h1>Índice: "+busca04+", valor buscado: "+array1[busca04]+"</h1>");

Para facilitar o entendimento neste caso especifico, inseri o resultado que aparecerá no navegador aqui mesmo. Caso ainda fique com dúvida, assista ao vídeo.

Índice: 7, valor buscado: codigo
Índice: 5, valor buscado: código

O método indexOf busca o elemento a partir do primeiro índice, o índice 0 (zero). E com este exemplo vemos que existe diferença entre buscar palavras com ou sem acento utilizando o método indexOf.

Em nosso array exemplo vemos que o elemento do índice 1 tem o mesmo valor que o elemento do índice 6. Esse exemplo foi inserido para nós vermos nosso próximo método.

Método lastIndexOf

Publicidade

Agora vamos buscar a palavra teste duas vezes, uma utilizando o método indexOf e outra lastIndexOf.

var busca05 = array1.indexOf("teste");
document.write("<h1>indexOf: "+busca05+", valor buscado: "+array1[busca05]+"</h1>");

var busca06 = array1.lastIndexOf("teste");
document.write("<h1>lasIndexOf: "+busca06+", valor buscado: "+array1[busca06]+"</h1>");

A diferença está no índice que será mostrado, indexOf começa a buscar a partir do elemento de índice 0 (zero), já lastIndexOf começa a busca de trás para frente, a partir do último elemento. Segue o resultado que aparecerá em seu computador.

indexOf: 1, valor buscado: teste
lasIndexOf: 6, valor buscado: teste

Caso tenha ficado alguma dúvida não hesite em assistir o vídeo.

Publicidade

Assista ao vídeo:

Código fonte JavaScript (completo)

var array1 = new Array("oi","teste","em","Busca",
                       "do","código","teste","codigo");

document.write("<h1>"+ array1.join(" - ") +"</h1>");

var busca = array1.indexOf("Busca");
document.write("<h1>Índice: "+busca+
               ", valor buscado: "+array1[busca]+"</h1>");

var busca02 = array1.indexOf("busca");
document.write("<h1>Índice: "+busca02+
               ", valor buscado: "+array1[busca02]+"</h1>");

var busca03 = array1.indexOf("codigo");
document.write("<h1>Índice: "+busca03+
               ", valor buscado: "+array1[busca03]+"</h1>");

var busca04 = array1.indexOf("código");
document.write("<h1>Índice: "+busca04+
               ", valor buscado: "+array1[busca04]+"</h1>");

var busca05 = array1.indexOf("teste");
document.write("<h1>indexOf: "+busca05+
               ", valor buscado: "+array1[busca05]+"</h1>");

var busca06 = array1.lastIndexOf("teste");
document.write("<h1>lasIndexOf: "+busca06+
               ", valor buscado: "+array1[busca06]+"</h1>");

Dica

O array é seu, o código fonte é seu, não hesite em brincar com ele. Mude o nome da variável, os valores do array. Obs: Reparou que utilizei o join diretamente no array?

Espero que esta dica tenha sido útil.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.