Verifique se Array contém valor em JavaScript

1. Usando a função .indexOf() para verificar se a matriz contém valor em JavaScript
2. Usando a função .includes() para verificar se a matriz contém valor em JavaScript
3. Usando a função .find() para encontrar um elemento em um array em JavaScript
4. Usando a função .filter() para pesquisar elementos em um array em JavaScript
5. Usando o Loop for Simples para Pesquisar um Elemento
6. Observação

Freqüentemente, nos encontramos em uma situação de verificar se array contém valor em JavaScript. Mesmo que a funcionalidade de pesquisa possa ser codificada com sintaxes JavaScript básicas usando loops, é bom conhecer as funcionalidades embutidas disponíveis para pesquisa de array em JavaScript, seu uso, tipos de retorno e o comportamento. Isso torna nossa tarefa muito mais fácil, pois precisamos codificar menos. A funcionalidade será eficiente e menos sujeita a erros com funções integradas. Vejamos maneiras de pesquisar um elemento em um array.

Usando a função .indexOf() para verificar se a matriz contém valor em JavaScript

A função .indexOf() é uma função comumente usada em javascript. Ele funciona bem durante a pesquisa de um elemento em um array ou mesmo em uma string.

Sintaxe

indexOf(element, index)

Parâmetro

Leva o elemento, para pesquisar, como um parâmetro. E um parâmetro opcional que informa a função, o índice de onde a pesquisa deve ser iniciada (a partir de 0). Se fornecermos um valor negativo, isso significará pesquisar começando do final do array na posição especificada.

Valor de retorno

A função retorna o índice do elemento de pesquisa começando em 0 na matriz, se puder encontrar o elemento. Caso contrário, ele retornará -1, indicando que não foi possível encontrar o elemento. Se houver mais de uma correspondência em um array, a função .indexOf() retornará o índice da primeira correspondência.

Suporte de navegador

A função .indexOf() é compatível com todas as versões principais do navegador.

Uso

O uso da função indexOf() em um array é o seguinte.

let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.indexOf('Pear'));
console.log(fruits.indexOf('Tomato'))

Resultado:

2
-1

Para o recurso de pesquisa, verificamos se o tipo de retorno de .indexOf(searchText) é maior que -1. Nesse caso, o resultado da pesquisa deve ser true, senão false. Vejamos o mesmo exemplo discutido acima para verificar se um elemento existe no array.

function isFruit(fruitName) {
  let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
  if (fruits.indexOf(fruitName) > -1) {
    return true;
  } else {
    return false;
  }
}
isFruit('Pear');
isFruit('Cat');

Resultado:

true
false

Usando a função .includes() para verificar se a matriz contém valor em JavaScript

A função includes() do JavaScript verifica se um determinado elemento está presente em um array. Ele retorna um valor booleano. Portanto, é mais adequado em verificações de condição if.

Sintaxe

includes(keyword)
includes(keyword, index)

Parâmetro

A função leva dois parâmetros. Normalmente, usamos esta função na forma .includes(searchString). O parâmetro searchString é o elemento que desejamos pesquisar, e o parâmetro index refere-se ao índice do array a partir do qual pesquisar. O parâmetro index é opcional.

Valor de retorno

.includes() retorna true se o searchString é encontrado como um elemento do array. Se não for encontrada, a função retorna falso.

Suporte de navegador

A função .includes() funciona em quase todos os navegadores da web, exceto no Internet Explorer. Portanto, se o seu projeto for suportado no IE, você pode ter que ir para a função indexOf().

Uso

Vejamos como aplicar includes() em um array.

let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.includes('Pear'));
console.log(fruits.includes('Tomato'))

Resultado:

true
false

A função includes() pode ser usada diretamente em condições if, pois retorna um valor booleano como saída. O exemplo acima pode ser usado em if condicional da seguinte forma. Esteja ciente de que este código pode não funcionar no IE, pois includes() não é suportado nele.

function isFruit(fruitName) {
  let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
  if (fruits.includes(fruitName)) {
    return true;
  } else {
    return false;
  }
}
isFruit('Pear');
isFruit('Cat');

Resultado:

true
false

Usando a função .find() para encontrar um elemento em um array em JavaScript

Outra maneira de verificar se um elemento está presente em um array é usando a função .find(). Em comparação com as funções .indexOf() e .includes(), .find() recebe uma função como parâmetro e a executa em cada elemento do array. Ele retornará o primeiro valor que é satisfeito pela condição mencionada na função de parâmetro.

Sintaxe

.find((keyword) => {/* Some condition checks */})
    .find((keyword, index) => {/* Some condition checks */})

Parâmetro

A função Array.find() assume uma função como seu parâmetro de entrada. Normalmente, usamos funções de seta como parâmetros. E essas funções de seta podem conter verificações de condição como item => item > 21. Outro parâmetro opcional é o índice que representa o índice de iteração atual. O .find() executa a função de seta em cada elemento do array. Conseqüentemente, ele fornece o iterador como o argumento para a função de seta para ajudar nas verificações condicionais adicionais.

Valor de retorno

.find() é um pouco diferente das funções indexOf(), includes() do javascript. Ele retorna o valor do elemento se encontrado, caso contrário, a função retorna indefinido.

Suporte de navegador

Como a função .includes(), .find() funciona em quase todos os navegadores da web, exceto o Internet Explorer. Portanto, devemos ter certeza de que nosso projeto não é compatível com o IE antes de planejar o uso de tais funções para operações de Array.

Uso

Consulte o seguinte uso em um array.

let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.find(i => i > 20));
console.log(age.find(i => i > 21))

Resultado:

21
43

Podemos ficar um pouco surpresos com a saída de idade.find (i => i> 21), uma vez que retorna 43 em vez de 23, que era o próximo número superior a 21 na age variedade. Observe que a função .find() retorna o próximo elemento que satisfaz a condição mencionada na função de array em ordem cronológica. Para pesquisar um elemento com um bloco if, podemos usar o seguinte código.

function findPeerAge(myAge) {
  let age = [21, 43, 23, 1, 34, 12, 8];
  if (age.find(i => (i === myAge))) {
    return true;
  } else {
    return false;
  }
}
findPeerAge(23);
findPeerAge(40);

true
false

Usando a função .filter() para pesquisar elementos em um array em JavaScript

A função .filter() é usada principalmente em operações de processamento de array. Especialmente quando se trata de filtrar elementos, satisfazendo um critério, de um array. Ele retorna um array de elementos que satisfazem os critérios definidos na função passada como um argumento.

Sintaxe

Segue a mesma sintaxe de Array.find().

.filter((keyword) => {/* Some condition checks */})
    .filter((keyword, index) => {/* Some condition checks */})

Parâmetro

A função Array.filter() aceita uma função embutida ou função de seta como parâmetro. A função de seta manterá os critérios de filtro. A função .filter() executa a função de seta em cada elemento do array e retorna os elementos que satisfazem as condições mencionadas na função de seta. A função de seta terá a keyword como entrada e a iteração atual como index.

Valor de retorno

Ao contrário das funções de pesquisa de array que vimos até agora, o .filter() retorna um array contendo os elementos que satisfazem as condições mencionadas na função de seta. Se o elemento for encontrado, a matriz retornada conterá os elementos necessários, caso contrário, um array vazia será retornada pela função.

Suporte de navegador

A função .filter() é suportada por todos os navegadores, incluindo o Internet Explorer. Assim, você pode usar a função .filter() sem se preocupar com o suporte esperado do navegador.

Uso: o uso desta função é o seguinte

let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.filter(i => i > 20));
console.log(age.filter(i => i > 21));

Resultado:

[21, 43, 23, 34]
[43, 23, 34]

Como podemos ver no resultado, a função filter() retorna um array. Se tivermos que procurar um elemento em um array, podemos usar a função filter() conforme ilustrado no exemplo de código a seguir. Usamos o atributo .length do array retornado pela função filter() para determinar se ele pode encontrar o elemento ou não. Se a função retornar um array vazia, significa que não foi possível encontrar a palavra-chave de pesquisa.

function findAge(myAge) {
  let age = [21, 43, 23, 1, 34, 12, 8];
  if (age.filter(i => (i === myAge)).length) {
    return true;
  } else {
    return false;
  }
}
findAge(23);
findAge(40);

Resultado:

true
false

Usando o Loop for Simples para Pesquisar um Elemento

Podemos encontrar um elemento em um array com os métodos básicos de javascript, a condição if e o loop for. O código a seguir retornará verdadeiro se o elemento for encontrado, caso contrário, retornará falso. Se houver mais de uma ocorrência do mesmo elemento, a função retornará apenas a primeira correspondência.

function findAge(myAge, ageAry) {
  let elementFound = false;
  for (let i = 0; i < ageAry.length; i++) {
    if (ageAry[i] === myAge) {
      return true;
    }
  }
  return elementFound;
}
let srcArray = [21, 43, 23, 1, 34, 12, 8];
findAge(23, srcArray);
findAge(40, srcArray);
findAge(8, srcArray);
findAge(23, srcArray);

Resultado:

true
false
true
true

Observação

• As funções .indexOf(), .includes() procuram uma correspondência de elemento exata. Não podemos usá-lo para pesquisar strings parciais. Significa fornecer parte de um elemento, pois o parâmetro de pesquisa não funcionará.
• Podemos implementar a pesquisa de elemento parcial com as funções Array.filter() e Array.find(), pois elas nos permitem definir os critérios de pesquisa de forma personalizada.