Blog

Postado em em 21 de fevereiro de 2024

Aprenda a Filtrar Dados no JavaScript

Aprenda como filtrar dados no JavaScript! Esse processo é muito importante e útil para que possamos separar, analisar e validar as informações.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Aprenda a Filtrar Dados no JavaScript

Na aula de hoje, quero te mostrar como filtrar dados no JavaScript! O processo de filtragem de informações é crucial, não apenas no JavaScript, mas em qualquer linguagem. Ele nos permite separar, analisar e validar os dados com os quais estamos trabalhando.

A filtragem proporciona opções para detalhar as informações sem a necessidade de lidar com toda a base de dados, focando apenas nos dados necessários.

Então, vem comigo que vou te mostrar como filtrar dados no JavaScript de forma fácil, para que você possa acessar apenas as informações desejadas sempre que precisar!

Filtrar Dados no JavaScript – Filtrando Alunos Aprovados

Dentro do JavaScript, temos o método filter que é utilizado para selecionar elementos dentro de um array que atendam a uma determinada condição.

Esse método irá avaliar cada elemento do array conforme a condição estabelecida e, após a filtragem, retornará os elementos que satisfazem essa condição.

Para visualizarmos esse método na prática, vamos utilizar um exemplo semelhante ao da aula passada quando abordamos o método map no JavaScript. Vamos ter um array com as notas dos alunos e definiremos a média 6 como nota mínima para a aprovação.

const listaNotas = [7.5, 2.5, 7, 4, 3, 5, 7, 2, 8, 2.6, 4, 5.5];

const notasAprovadas = listaNotas.filter(nota => nota >= 6);

console.log(listaNotas);
console.log(notasAprovadas);

Dentro do método filter, definimos o critério da filtragem dos dados. Nesse caso, estamos utilizando uma expressão booleana que irá retornar true caso a nota do aluno seja maior ou igual a 6 e false caso contrário.

Executando esse código, teremos a exibição do array listaNotas, com todas as notas, e do notasAprovadas, contendo apenas as notas que são maiores ou iguais a 6.

Array filtrado

Segundo Exemplo para Filtrar Dados no JavaScript

O método filter é muito versátil e pode ser aplicado em diversos cenários além de apenas números em arrays.

Podemos, por exemplo, utilizar o método filter para selecionar os alunos com média igual ou superior a 6, a partir de uma lista de objetos com duas notas distintas.

const listaNotasCompletas = [
    {nota1: 8, nota2: 7},
    {nota1: 4, nota2: 8},
    {nota1: 5, nota2: 4},
    {nota1: 7, nota2: 6},
    {nota1: 9, nota2: 9.5},
    {nota1: 10, nota2: 0},
];

const mediasAlunosAprovados = listaNotasCompletas.filter(
    (notasAluno) => (notasAluno.nota1 + notasAluno.nota2)/2 >= 6
);

console.log(listaNotasCompletas);
console.log(mediasAlunosAprovados);

Nesse caso, estamos criando um array de objetos, onde cada objeto representa um aluno e tem duas propriedades: nota1 e nota2, representando cada uma das notas.

Para filtrar os alunos aprovados, estamos definindo dentro do método filter uma função que calcula a média dos alunos, somando as duas notas e dividindo por 2. Se a média for maior ou igual a 6, a função retorna true, caso contrário, retorna false.

Executando esse código, podemos visualizar as duas listas: uma com todas as notas e a outra apenas com os alunos com média maior do que 6.

Array inicial
Array de objetos filtrado

Conclusão – Aprenda a Filtrar Dados no JavaScript

Na aula de hoje, você aprendeu como utilizar o método filter para filtrar dados no JavaScript! Esse é um processo fundamental, tanto para o JavaScript quanto para qualquer outra linguagem, pois nos permite separar, analisar e validar os dados trabalhados.

Você pôde ver esse método em ação através de um exemplo para filtrar as notas e as médias dos alunos, identificando quem foi aprovado ou reprovado com base nesse critério. No entanto, o método filter é muito versátil e pode ser aplicado em diferentes situações.

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!


Quer aprender mais sobre JavaScript com um minicurso básico gratuito?

Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador