Introdução
O indexOf é utilizado para encontrar um valor dentro de uma string ou array, caso o valor não seja encontrado, ele retorna -1.
É uma função que pode ser encaixada junto com qualquer lógica que precise comparar algum valor, seja dentro de um array ou dentro de uma string.
Um exemplo prático de onde essa função pode ser utilizada, é em filtros na tela, onde o usuário digita um valor e o sistema retorna uma nova lista somente com os valores que combinam com o que o usuário escreveu.
Sintaxe
Sua sintaxe básica é dessa forma:
array.indexOf(elementoDePesquisa, [pontoInicial = 0]) //para array
string.indexOf(elementoDePesquisa, [pontoInicial = 0]) //para string
O primeiro parâmetro é obrigatório, e ele é o valor no qual se deseja encontrar dentro da string/array, esse valor pode ser um número ou uma string.
O segundo parâmetro não é obrigatório, é um número e caso passado, indicará o indexOf qual o índice por onde ele deve começar a busca do valor passado no primeiro parâmetro.
Caso o pontoInicial seja passado e ele seja maior ou igual o tamanho da string, então o retorno será -1, porque não será encontrado nada.
Buscar número ou string em um array
Para realizar a busca de um número dentro do array de números é simples, basta passar o número desejado para o primeiro parâmetro da função. Por exemplo, caso queira achar onde está o número 10 no array:
let numeros = [5, 10, 15];
console.log(numeros.indexOf(10)); //1
Note que o que aparecerá no console será o número 1, porque ele está na segunda posição do array, e como o array começa em 0, a segunda posição é 1.
Outro ponto importante é que ele retorna a posição na qual o número se encontra, e não o número.
Para buscar uma string dentro de um array, a sintaxe é a mesma, porém em vez do número, é passada a string para a busca:
let frutas = ["Pera", "Laranja", "Maça"];
console.log(frutas.indexOf("Maça")); //2
Nesse caso, o resultado impresso no console será 2, porque a palavra Maça está na terceira posição do array.
Buscar valor em um texto
Para buscar o valor em um texto, o raciocínio e a sintaxe é a mesma só muda o tipo de onde está sendo buscado.
Uma string é um array de caracteres, então quando um valor for achado, será retornado o index onde a string inicia.
let texto = "um texto para teste";
console.log(texto.indexOf("para")); //9
No exemplo acima, será impresso 9 porque há 9 caracteres antes da palavra “para” dentro do texto, contando os espaços.
Caso a busca fosse feita pela palavra teste, o resultado seria 15, seguindo o mesmo raciocínio.
Utilizando a posição inicial da consulta
Em determinadas situações, pode ser que você não deseja encontrar a primeira ocorrência na string, mas sim a segunda, e para isso é necessário utilizar o segundo parâmetro.
Por exemplo, vamos supor que eu tenha uma string onde aparece a palavra “teste” duas vezes, porém só quero saber o index do início da segunda vez que teste aparece:
let texto = "um texto para teste, vamos ver se o teste da certo";
console.log(texto.indexOf("teste")); //14
No caso acima, será mostrado 14 porque está pegando a primeira palavra “teste”. E para pular ela, precisamos informar o segundo parâmetro com um número maior que 14, para que a função comece a buscar a partir dele e encontre somente a segunda palavra “teste”:
let texto = "um texto para teste, vamos ver se o teste da certo";
console.log(texto.indexOf("teste", 15)); //36
Depois de passar o segundo parâmetro, o resultado será 36, pois é onde inicia a segunda palavra “teste”.
Caso seja passado no segundo parâmetro o número 100, o retorno será -1, pois não irá achar a palavra “teste” na string, mesmo que ela apareça duas vezes.
Filtrar dados de um array
Talvez o exemplo mais clássico de uso no mundo real seja para fazer filtros.
Vamos supor que tenha uma lista de cores, e queira retornar somente as cores desejada pelo usuário, o usuário precisará fazer esse filtro e o sistema reagir de acordo com as letras que ele selecionar.
Para fazer isso precisa utilizar o indexOf em conjunto com o filter:
let filtro = "Ve"; //simula a entrada de dados do usuário
let cores = ["Vermelho", "Verde", "Azul", "Amarelo"];
let coresFiltrado = cores.filter((cor) => {
//se as letras do filtro não estiverem na palavra será retornado -1
//e não entrará na lista das cores que correspondem a busca do usuário
if (cor.indexOf(filtro) !== -1) {
return cor;
}
});
console.log(coresFiltrado); //(2) ["Vermelho", "Verde"]
Dessa forma é possível realizar filtros em qualquer lista, seja um array mais simples, arrays de objetos, vai funcionar da mesma maneira.
Vídeo sobre o assunto
Gravei um vídeo sobre o indexOf, mostrando todos esses exemplos na prática, veja neste link
Código fonte
Além do botão, para notificações é muito comum colocar em ícones de sino.
Todo o código fonte dos exemplos mostrados estão no meu CodeSandbox
Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.
Conclusão
O indexOf é um método muito útil do Javascript, normalmente utilizado para filtros ou em conjunto com alguma outra função, certamente irá encaixar em alguma lógica sua quando estiver desenvolvendo, até o próximo post 🙂
Referências
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf