As matrizes JavaScript têm um poderoso conjunto de ferramentas de métodos para que os desenvolvedores classifiquem, filtrem e manipulem dados. Na maioria das vezes, no entanto, você precisa encontrar dados dentro de uma matriz e, embora certamente possa realizar essa tarefa com loops e iterações, o JavaScript fornece muitos métodos para localizar dados específicos em suas matrizes.
Neste tutorial, você aprenderá como pesquisar e localizar dados em arrays JavaScript usando o método indexOf(), lastIndexOf(), find(), findLast(), includes(), some()e every() métodos.
| Método de pesquisa | Descrição |
|---|---|
|
indexOf(), lastIndexOf() |
procura um valor primitivo e retorna seu índice |
|
findIndexOf(), findLastIndexOf() |
procura um elemento com uma função de teste e retorna seu índice |
|
encontrar(), encontrarúltimo() |
procura um elemento com uma função de teste e retorna o próprio elemento |
| inclui() | testa se o array inclui um valor primitivo |
| alguns() | testa se o array possui algum elemento que corresponda a uma função de teste |
| todo() | testa se todos os elementos na matriz correspondem a uma função de teste |
Encontrar o índice de um elemento
Uma das coisas mais comuns que um desenvolvedor precisa encontrar é o índice de um determinado elemento. Com o índice de um elemento, você pode acessar, atualizar ou remover diretamente um elemento. A capacidade de encontrar o índice de um elemento é uma recurso fundamental, e o JavaScript fornece vários métodos que pesquisam um array e retornam o índice do elemento desejado.
O indexOf() e lastIndexOf() Métodos
Os primeiros métodos são os mais simples: indexOf() e lastIndexOf(). Esses métodos procuram um valor ou objeto específico com uma matriz e retornam o índice da primeira ocorrência desse valor ou objeto. Se o elemento não for encontrado no array, esses métodos retornam -1. Esses dois métodos funcionam melhor com arrays que contêm valores simples (por exemplo, strings e números).
Usando indexOf()
A sintaxe para indexOf() é o seguinte:
1 |
array.indexOf(searchElement[, fromIndex]); |
Aqui o searchElement é o elemento que você deseja procurar e fromIndex é um parâmetro opcional que especifica o índice no qual iniciar a pesquisa. Se você não fornecer fromIndexa pesquisa começa no índice 0. Por exemplo, considere o seguinte código:
1 |
const fruit = ['orange', 'apple', 'grape', 'apple']; |
2 |
|
3 |
fruit.indexOf('apple'); // output: 1 |
4 |
fruit.indexOf('mango'); // output: -1 |
5 |
fruit.indexOf('apple', 2)); // output: 3 |
6 |
fruit.indexOf('orange', 1); // output: -1 |
Este código define um array chamado fruite contém quatro valores de string que nomeiam três tipos diferentes de frutas (observe que apple é listado duas vezes em índices 1 e 3).
Primeiro, procuramos a string apple. Porque o fromIndex parâmetro não for especificado, a pesquisa começa no início da matriz no índice 0 e retorna o valor de 1.
Em seguida, procuramos o valor mango. Isso retorna -1 porque essa string não foi encontrada.
A terceira chamada para indexOf() procura por apple mais uma vez, mas desta vez a busca começa no índice de 2. Portanto, o resultado é 3 porque a próxima ocorrência de apple está no índice 3.
A quarta chamada para indexOf() procura por orangemas a pesquisa começa no índice 1. O resultado é -1 porque orange não ocorre no ou após o índice 1.
Usando lastIndexOf()
O lastIndexOf() método é semelhante a indexOf(), mas inicia a pesquisa no final do array. Ele também possui uma sintaxe semelhante, conforme mostrado abaixo:
1 |
array.lastIndexOf(searchElement[,fromIndex]); |
Considere o seguinte:
1 |
fruit.lastIndexOf('apple'); // output: 3
|
2 |
fruit.lastIndexOf('mango'); // output: -1
|
3 |
fruit.lastIndexOf('apple', 2)); // output: 1
|
Neste código, a primeira linha procura por apple. Como a pesquisa começa e o fim da matriz, o resultado é 3. A terceira linha de código procura por apple de novo. Desta vez, no entanto, ele começa a pesquisar no índice 2 e resulta no valor de 1 porque lastIndexOf() procura ao contrário.
O indexOf() e lastIndexOf() Os métodos são incrivelmente úteis, mas, como mencionado anteriormente, funcionam melhor com valores simples. A razão para isso é porque eles procuram o valor exato passado como o searchElement. Se você deseja pesquisar um objeto ou se precisa encontrar um valor que corresponda a um determinado critério, o findIndex() e findLastIndex() métodos são tipicamente melhores opções.
O findIndex() e findLastIndex() Métodos
O findIndex() e findLastIndex() métodos são semelhantes em conceito ao indexOf() e lastIndexOf() métodos em que eles pesquisam uma matriz desde o início e o final de uma matriz, respectivamente. No entanto, em vez de passar um valor exato para pesquisar, você passa uma função que testa os elementos da matriz. Vamos começar com findIndex().
Usando findIndex()
O findIndex() O método encontra o índice do primeiro elemento em uma matriz que satisfaça a função de teste. Ele itera por cada elemento da matriz e chama a função de teste fornecida com cada elemento. Aqui está a sintaxe do método:
1 |
array.findIndex(testingFunction); |
A função de teste aceita os três argumentos a seguir:
-
element: o elemento atualmente sendo testado (obrigatório) -
index: o índice do elemento atualmente sendo testado (opcional) -
array: a matriz ofindmétodo foi chamado (opcional)
O findIndex() método retorna o índice do primeiro elemento para o qual a função de teste retorna trueou -1 se tal elemento não for encontrado. Ele para de iterar no array assim que a função de teste retorna true.
O exemplo a seguir demonstra o findIndex() método:
1 |
const numbers = [10, 20, 30, 40]; |
2 |
|
3 |
function isNumberGreaterThan25(number) { |
4 |
return number > 25; |
5 |
}
|
6 |
|
7 |
numbers.findIndex(isNumberGreaterThan25); // output: 2 |
Este exemplo cria uma matriz de números: [10, 20, 30, 40]. Também define o isNumberGreaterThan25() função que aceita um number parâmetro e retorna true se o número for maior que 25. Ele então usa o findIndex() método para encontrar o índice do primeiro elemento na matriz para o qual o isNumberGreaterThan25() função retorna true. O findIndex() método passa cada elemento da matriz para isNumberGreaterThan25() e retorna o índice do primeiro elemento que satisfaz a condição – que é 2 nesse caso.
Usando findLastIndex()
Como você pode esperar, o findLastIndex() método é muito parecido com findIndex(). Sua sintaxe, vista a seguir, é quase idêntica à findIndex(). A única diferença, é claro, é o nome do método:
1 |
array.findLastIndex(testingFunction); |
O findLastIndex() O método pesquisa o array de trás para frente, começando no último elemento do array. Por exemplo:
1 |
const numbers = [10, 20, 30, 40]; |
2 |
|
3 |
function isNumberGreaterThan25(number) { |
4 |
return number > 25; |
5 |
}
|
6 |
|
7 |
numbers.findLastIndex(isNumberGreaterThan25); // output: 3 |
Este código define o mesmo numbers matriz e isNumberGreaterThan25() função, mas então chama findLastIndex() para encontrar o índice do último elemento na matriz para o qual o isNumberGreaterThan25() função retorna true. Neste caso, o resultado é 3 porque o primeiro elemento testado é 40no índice 3, e isso satisfaz a condição.
Encontrando Elementos
Embora encontrar o índice de um elemento possa ser útil, às vezes você precisa encontrar o próprio elemento. Felizmente, os arrays JavaScript fornecem os dois métodos a seguir:
-
find(): retorna o primeiro elemento que satisfaz a função de teste fornecida. -
findLast(): pesquisa o array na ordem inversa e retorna o elemento que satisfaz a função de teste.
Sua sintaxe:
1 |
array.find(testingFunction); |
2 |
array.findLast(testingFunction); |
Esses métodos são quase idênticos aos findIndex() e findLastIndex() métodos, respectivamente. A única diferença é que eles retornam o valor ou objeto real que satisfaz a função de teste, não o índice desse elemento. Por exemplo, considere o seguinte código:
1 |
const Unid = [ |
2 |
{ id: 1, name: 'book', price: 40, }, |
3 |
{ id: 2, name: 'laptop', price: 1000 }, |
4 |
{ id: 3, name: 'phone', price: 600 } |
5 |
];
|
6 |
|
7 |
const book = items.find(function(item) { |
8 |
return item.id === 1; |
9 |
}); // book object |
10 |
|
11 |
const lessThan10 = items.findLast(function(item) { |
12 |
return item.price < 10; |
13 |
}); // undefined |
Este código define um array de itemsonde cada item é um objeto com id, namee price propriedades. Nós usamos o find() e findLast() métodos para procurar objetos que satisfaçam certas condições e armazenar o resultado em variáveis.
No primeiro exemplo, usamos o find() método para encontrar o objeto que tem um id igual a 1. A função de teste retorna true se o id propriedade do objeto atual é igual a 1, que interrompe a iteração e retorna o objeto atual. Nesse caso, o primeiro objeto do array tem um id propriedade de 1então o find() O método retorna o objeto “livro”.
O segundo exemplo usa o findLast() método para encontrar o último objeto no items matriz que tem um price menor que 10. Nesse caso, nenhum dos objetos do array satisfaz a condição, então o findLast() método retorna undefined.
Testando se os elementos existem
O último conjunto de métodos não retorna um índice ou um elemento. Em vez disso, eles retornam um valor booleano que indica se existe um elemento na matriz.
O includes() Método
O primeiro e mais simples método é includes(). Ele simplesmente aceita o valor que você deseja buscar, conforme imagem abaixo:
1 |
array.includes(searchElement); |
O includes() método retorna true se a matriz contiver o searchElement; caso contrário, ele retorna false. O código a seguir demonstra isso:
1 |
const fruit = ['apple', 'banana', 'cherry']; |
2 |
|
3 |
fruit.includes('banana'); // true |
4 |
fruit.includes('orange'); // false |
Esse código cria uma matriz de frutas e usamos o includes() método para verificar se o array inclui um determinado elemento ou não. No primeiro exemplo, verificamos se o array inclui a string banana–cujo resultado é true. No segundo exemplo, verificamos se o array inclui a string orange. Ele não existe na matriz; portanto, ele retorna false.
Como indexOf() e lastIndexOf()o includes() O método é adequado para valores simples. Se você precisar trabalhar com objetos mais complexos ou precisar definir critérios de pesquisa por meio de uma função de teste, considere usar o some() método.
O some() Método
Nós usamos o some() método para verificar se pelo menos um elemento na matriz satisfaz a função de teste fornecida. Ele itera por cada elemento da matriz e chama a função de teste com cada elemento. Ele retorna true se a função de teste retornar verdadeiro para pelo menos um elemento, caso contrário false.
Sua sintaxe é semelhante à find() e outros métodos find, conforme mostrado aqui:
1 |
array.some(testingFunction); |
Além disso, a função de teste usa os mesmos parâmetros e deve retornar os mesmos valores dos métodos find. Por exemplo:
1 |
const numbers = [10, 20, 30, 40]; |
2 |
|
3 |
function isEven(number) { |
4 |
return number % 2 === 0; |
5 |
}
|
6 |
|
7 |
function isOdd(number) { |
8 |
return number % 2 !== 0; |
9 |
}
|
10 |
|
11 |
numbers.some(isEven); // true |
12 |
numbers.some(isOdd); // false |
Neste exemplo, definimos um array chamado numbers e duas funções, isEven() e isOdd()que retorna true se o número fornecido for par ou ímpar, respectivamente. Usamos então o some() método para verificar se a matriz numbers inclui pelo menos um número par ou ímpar.
No primeiro exemplo, passamos o isEven() funcionar como a função de teste. O some() método para de iterar assim que o isEven() função retorna true, que neste código é o primeiro elemento da matriz. Portanto, o some() método retorna true.
No segundo exemplo, passamos o isOdd() funcionar como a função de teste. Nesse caso, a matriz não contém números ímpares. Portanto, o some() método retorna false.
O every() Método
Você pode usar o every() método para verificar se todos os elementos na matriz satisfazem a função de teste fornecida. Ele itera por cada elemento da matriz e chama a função de teste com cada elemento. Ele retorna true se a função de teste retornar verdadeiro para todos os elementos.
Como você deve ter adivinhado, a sintaxe é familiar:
1 |
array.every(testingFunction); |
Usando o every() também é uma reminiscência dos vários métodos que discutimos até agora. Por exemplo:
1 |
const numbers = [10, 20, 30, 40]; |
2 |
|
3 |
function isMultipleOfTen(number) { |
4 |
return number % 10 === 0; |
5 |
}
|
6 |
|
7 |
numbers.every(isMultipleOfTen); // true |
Este código cria um array de números e define uma função chamada isMultipleOfTen(). Se o número passou para isMultipleOfTen() é um múltiplo de 10, ele retorna true. Caso contrário, ele retorna false. Usamos então o every() método para verificar se todos os elementos do array são múltiplos de 10. Nesse caso, todos os elementos do array são múltiplos de 10, então o every() método retorna true.
Conclusão
As matrizes são uma ferramenta poderosa que permite aos desenvolvedores trabalhar facilmente com vários valores e fornecem uma ampla variedade de métodos úteis e eficientes que facilitam a pesquisa e a localização dos dados necessários para trabalhar em seu código.
O indexOf(), lastIndexOf(), findIndex(), findLastIndex(), find(), findLast(), includes(), some()e every() Os métodos são todos úteis para pesquisar arrays com base em diferentes critérios, como o valor de um elemento, o índice de um elemento ou se pelo menos um ou todos os elementos satisfazem uma determinada condição. Usando esses métodos adequadamente, você pode tornar seu código mais eficiente, legível e sustentável, além de aprimorar a funcionalidade de seus aplicativos JavaScript.
