Artigo original: Four Different Ways to Search an Array in JavaScript

Tradução realizada em português europeu

Em JavaScript, existem diferentes métodos que podes utilizar para procurar por um item num array. O método que escolheres depende do teu caso de utilização específico.

Por exemplo, queres obter todos os itens num array que obedecem a uma determinada condição? Queres verificar se algum item obedece à condição? Queres verificar se um valor em específico está presente no array? Ou queres encontrar o índice do valor no array?

Para todos estes casos, os métodos Array.prototype do JavaScript são o suficiente. Neste artigo, vamos discutir quatro métodos que podemos utilizar para procurar por um item num array. Esses métodos são:

  1. Filter
  2. Find
  3. Includes
  4. IndexOf

Vamos discutir cada um deles.

Array.filter()

Podemos utilizar o método Array.filter() para encontrar elementos num array que obedecem a uma determinada condição. Por exemplo, se quisermos obter todos os itens num array de números que sejam maiores do que 10, podemos fazer o seguinte:

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.filter(element => element > 10);

console.log(greaterThanTen) //[11, 20]

A sintaxe para utilizar o método array.filter() é a seguinte:

let newArray = array.filter(callback);

onde

  • newArray é o novo array que é devolvido
  • array é o array em que o método filter é chamado
  • callback é a função de callback que é aplicada a cada elemento do array

Caso nenhum item no array obedeça à condição, é devolvido um array vazio. Podes saber mais sobre esse método aqui (texto em inglês).

Existem casos onde não precisamos de todos os elementos que obedecem a uma determinada condição. Precisamos apenas de um elemento que obedece à condição. Nesse caso, precisas do método find().

Array.find()

Podemos utilizar o método Array.find() para encontrar o primeiro elemento que obedece a uma determinada condição. Tal como o método filter, este recebe uma função de callback como argumento e devolve o primeiro elemento que obedece à condição da função de callback.

Vamos utilizar o método find no array do nosso exemplo acima.

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.find(element => element > 10);

console.log(greaterThanTen)//11

A sintaxe para o array.find() é

let element = array.find(callback);

A função de callback é a função que é executada em cada valor no array e recebe três argumentos:

  • element - o elemento onde está a ser feita a iteração (obrigatório)
  • index - o índice/posição do elemento atual (opcional)
  • array - o array onde o método find foi chamado (opcional)

Nota que, caso nenhum item no array corresponda à condição, a função devolve um undefined.

Se, no entanto, quiseres verificar se um determinado elemento está num array, como fazes isto?

Array.includes()

O método includes() determina se um array inclui um determinado valor e devolve true ou false, conforme apropriado.

Então, no exemplo acima, se quisermos verificar se 20 é um dos elementos no array, podemos fazer isto:

const array = [10, 11, 3, 20, 5];

const includesTwenty = array.includes(20);

console.log(includesTwenty)//true

Vais reparar numa diferença entre este método e os outros métodos que consideramos. O método aceita um valor em vez de uma função de callback como argumento. Aqui está a sintaxe para o método includes:

const includesValue = array.includes(valueToFind, fromIndex)

Onde

  • valueToFind é o valor que estás à procura no array (obrigatório), e
  • fromIndex é o índice ou posição no array onde queres iniciar a procura pelo elemento (opcional)

Para compreender o conceito de índice, vamos visitar o nosso exemplo novamente. Se quisermos verificar se um array contém o valor 10 em outras posições sem ser no primeiro elemento, podemos fazer isto:

const array = [10, 11, 3, 20, 5];

const includesTenTwice = array.includes(10, 1);

console.log(includesTenTwice)//false

Array.indexOf()

O método indexOf() devolve o primeiro índice onde um determinado elemento pode ser encontrado no array. Ele devolve -1 se o elemento não existir no array.

Vamos observar de novo o nosso exemplo. Vamos encontrar o índice de valor 3 no array.

const array = [10, 11, 3, 20, 5];

const indexOfThree = array.indexOf(3);

console.log(indexOfThree)//2

A sintaxe é semelhante à do método includes.

const indexOfElement = array.indexOf(element, fromIndex)

Onde

  • element é o elemento que estás à procura no array (obrigatório), e
  • fromIndex é o índice ou posição no array onde queres iniciar a pesquisa pelo elemento (opcional)

É importante notar que ambos os métodos, includes e indexOf, utilizam igualdade rigorosa ( '===' ) para procurar no array. Se os valores forem de tipos diferentes (por exemplo, '4' e 4), serão devolvidos false e -1, respetivamente.

Resumindo

Com estes métodos de array, não é necessário utilizares um ciclo para procurar num array. Dependendo das tuas necessidades, podes decidir qual dos métodos se adequa melhor ao teu caso.

Aqui está um resumo de quando utilizar cada método:

  • Utiliza filter se quiseres encontrar todos os itens num array que obedecem a uma condição específica.
  • Utiliza find se quiseres verificar se pelo menos um item corresponde a uma condição específica.
  • Utiliza includes se quiseres verificar se um array contém um valor em particular.
  • Utiliza indexOf se quiseres encontrar o índice de um item em particular num array.

Queres receber notificações quando a autora publicar um novo artigo? Clica aqui.