Função do filtro de matriz JavaScript
Neste post, entenderemos o conceito de JavaScript filtro() função. O que é uma filtro() função, e como podemos usá -lo para ajudar a simplificar o código JavaScript e concluir as tarefas com eficiência e mais rapidamente.
O que é filtro função em javascript
JavaScript filtro() A função para a matriz é usada para filtrar os dados com base na condição ou teste fornecido.
- O filtro() A função leva o elemento de uma matriz um por um e aplica a condição em cada elemento.
- O filtro() A função mantém os elementos que passam a condição em uma matriz diferente e retornam a matriz resultante depois de iterar toda a matriz.
- Esse filtro() A função da matriz não afeta a matriz original.
Vamos explorar mais para entender a sintaxe e sua funcionalidade, juntamente com alguns exemplos.
Sintaxe da função do filtro em JavaScript
variedade.filtro (function_name, thisValue);Array's filtro() A função exige uma função como uma função de retorno de chamada com três argumentos. A sintaxe da função de retorno de chamada e a sequência dos argumentos serão assim:
function function_name (valor, índice, array)condição de retorno;
Na função de volta de chamada de filtro() método:
- O primeiro parâmetro é o atual valor do elemento da matriz durante a iteração.
- O segundo parâmetro é o parâmetro opcional que é a corrente índice do elemento da matriz durante a iteração.
- Por fim, também podemos passar o variedade para si mesmo para a função de retorno de chamada por ter algumas funcionalidades personalizadas dentro da função de retorno de chamada.
Também podemos passar "ThisValue" para a função, onde a palavra -chave "isto" se refere ao bloco/objeto pai.
Agora usaremos alguns exemplos para ver suas implementações da vida real.
Observação: Usaremos o console do navegador para demonstrar exemplos realizados neste post. Para abrir o console do navegador:
- Use o F12 Chave no Chrome e outros navegadores à base de cromo.
- Usar Ctrl + Shift + K teclas de atalho do teclado para mozilla.
- Usar Opção + ⌘ + c Teclas de atalho do teclado no Safari (se o menu do desenvolvedor não aparecer, abra as preferências pressionando ⌘ +, e em Avançado Verificação da guia “Mostrar desenvolver menu na barra de menus”).
Como usar o filter () função em javascript
O melhor exemplo para entender o filtro() A função é filtrar alguns números de uma matriz de números com base na condição fornecida.
Exemplo 1:
Suponha que tenhamos uma variedade de números e queremos obter números maiores do que algum número específico:
VAR números = [23,16,38,5,10,19]O primeiro método para obter a gama desejada de números é percorrer toda a matriz e colocar uma condição dentro do loop para verificar se o número passa no teste fornecido (maior que 18 ou não). Se o número passar no teste, ele será adicionado/anexado a uma nova matriz. O código do loop for para filtrar os números é fornecido abaixo:
varFilteredArray = [];para (leti = 0; i18)
filtraDArray.push (números [i])
console.log (filterLeDArray);
No código acima, primeiro colocamos um loop sobre a matriz de "números" e depois colocamos uma condição usando a instrução IF e, se o elemento da matriz passar a condição, ela será anexada/empurrada para a variável "filtragem".
Embora tenhamos o alcance desejado como saída. Mas, por que não usar uma maneira inteligente e fácil de obter a matriz filtrada usando o filtro() Método da matriz, onde não precisamos mutações as variáveis como “filtraDArray.”
Uso da função filter ()
O filtro() Função para obter os números maiores que 18 serão assim:
varFilteredArray = números.filtro (getadults);functionGetadults (n)
retornar n> 18;
console.log (filterLeDArray);
No código acima, você pode ver que passamos pela primeira vez a função "Getadults" para o filtro() Função e, na definição da função "Getadults", acabamos de verificar se o número é maior que 18 ou não e se essa condição retornar TRUE, retornará esse elemento da matriz.
Depois que a função "filtro" verificar todos os números na matriz "números", ela armazenará o resultado final na variável "filtraDArray".
Por fim, acabamos de consolar a variável "filtraDArray" para verificar se nosso filtro() função funcionou bem ou não.
Você pode verificar olhando na captura de tela fornecida acima que o filtro() A função retornou todos os números maiores que 18.
Outra maneira mais curta e mais fácil de escrever filtro() função é fazer a função de retorno de chamada de filtro() função uma função de seta:
A sintaxe de escrever a função de retorno de chamada dentro do filtro() Os parênteses da função serão assim:
varFilteredArray = números.filtro ((n) =>retornar n> 18
);
console.log (filterLeDArray);
Tudo bem, este foi o exemplo simples em que temos apenas uma variedade de números; E a variedade de objetos. Vamos tentar esse também.
Exemplo 2:
Suponha que tenhamos uma lista de alunos em uma matriz e queremos obter a lista dos alunos cujas taxas estão acima de US $ 8000:
Var alunos = [ID: 1,
Nome: "John,"
Idade: 12,
Taxa: 8500
,
ID: 2,
Nome: "Bob",
Idade: 15,
Taxa: 4500
,
ID: 3,
Nome: "Steve",
Idade: 10,
Taxa: 7500
,
ID: 4,
Nome: "Harry",
Idade: 13,
Taxa: 10500
,
ID: 5,
Nome: "Tom",
Idade: 14,
Taxa: 9000
,
ID: 6,
Nome: "Ron",
Idade: 11,
Taxa: 6000
,
]
O filtro() Função para obter a lista filtrada de alunos assim:
Varfilteredstudents = estudantes.filtro ((aluno) =>ReturnStudent.Taxa> 8000
);
console.log (estudentes filtrados);
Agora, a única diferença nesse código é que um único objeto é passado como um valor para a função de retorno de chamada e, dentro da definição da função de retorno de chamada, colocamos uma condição e retornamos o objeto em que a taxa do aluno é maior que US $ 8000.
Ao olhar para a captura de tela anexada acima, você pode ver que as taxas dos alunos são maiores que US $ 8000 e são exibidas como uma saída. Então é assim que podemos acessar os objetos de uma matriz no filtro() função.
Conclusão
Neste post, aprendemos o que um filtro() A função é e como podemos usá -la para ajudar a simplificar o código JavaScript.
Aprendemos que o filtro() Função filtra os elementos da matriz com base na condição fornecida. O filtro() A função leva o elemento de uma matriz um por um, pega uma função de retorno de chamada aplicada a todos os elementos da matriz e retorna a nova matriz filtrada.
Esta postagem é sobre JavaScript's filtro() função e seu uso. Contém alguns exemplos básicos que ajudam a entender filtro() função facilmente.