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.

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

Método indexOf

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

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

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

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

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.

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

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.

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.

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

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

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.

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

Assista ao vídeo:

Código fonte JavaScript (completo)

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.