Como usar o método filter para filtrar arrays em JavaScript
O método `filter` em JavaScript é uma função nativa que permite filtrar os elementos de um array de acordo com critérios específicos.
Publicado em 8 de agosto de 2023
Glossário
O que é o método filter em JavaScript?
O método filter é uma função nativa do JavaScript que permite filtrar os elementos de um array de acordo com determinados critérios. Ele cria um novo array com todos os elementos que passam em um teste específico fornecido por uma função de callback. Essa função callback é executada uma vez para cada elemento do array e deve retornar um valor booleano para determinar se o elemento atual deve ser incluído no novo array filtrado.
O método filter torna o processo de filtragem de arrays muito mais fácil e eficiente. Antes da introdução desse método, era necessário percorrer manualmente o array e verificar cada elemento individualmente, o que resultava em código mais complexo e propenso a erros. Com o filter, podemos simplificar esse processo e obter um array filtrado em poucas linhas de código.
Como usar o método filter para filtrar arrays em JavaScript
Para usar o método filter em JavaScript, primeiro criamos um array que desejamos filtrar. Em seguida, chamamos a função filter no array desejado, passando uma função de callback que definirá as condições de filtragem. Essa função de callback recebe como parâmetro cada elemento do array e retorna true ou false com base nas condições que queremos utilizar para filtrar.
Aqui está um exemplo básico de como usar o método filter:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6, 8, 10]
Nesse exemplo, temos um array de números e usamos o método filter para filtrar apenas os números pares. A função de callback verifica se o número é divisível por 2 e retorna true para os números pares e false para os ímpares. O resultado é um novo array contendo apenas os números pares.
Podemos utilizar diferentes condições de filtragem com base nas necessidades específicas de cada situação. A função de callback pode ser complexa e envolver várias verificações e comparações para determinar se um determinado elemento deve ser incluído no novo array filtrado.
Exemplos práticos de uso do método filter em JavaScript
Vamos ver mais alguns exemplos práticos de uso do método filter em JavaScript:
Filtrar elementos com base em uma propriedade específica do objeto:
const produtos = [
{ nome: 'Camiseta', preco: 30 },
{ nome: 'Calça', preco: 50 },
{ nome: 'Sapato', preco: 100 },
{ nome: 'Jaqueta', preco: 80 }
];
const produtosCaros = produtos.filter(function(produto) {
return produto.preco > 50;
});
console.log(produtosCaros);
// [{ nome: 'Calça', preco: 50 }, { nome: 'Sapato', preco: 100 }, { nome: 'Jaqueta', preco: 80 }]
Nesse exemplo, temos um array de objetos representando produtos. Utilizamos o método filter para filtrar apenas os produtos com preço maior que 50. A função de callback verifica a propriedade preco de cada objeto e retorna true ou false com base na condição definida.
Filtrar strings com base em um critério específico:
const palavras = ['casa', 'carro', 'computador', 'caneta', 'cadeira'];
const palavrasComC = palavras.filter(function(palavra) {
return palavra.startsWith('c');
});
console.log(palavrasComC); // ['casa', 'carro', 'computador', 'caneta', 'cadeira']
Nesse exemplo, usamos o método filter para filtrar apenas as palavras que começam com a letra “c”. A função de callback verifica se cada palavra começa com a letra “c” usando o método startsWith e retorna o resultado.
Diferença entre o método filter e outras formas de filtrar arrays em JavaScript
É importante entender a diferença entre o método filter e outras formas de filtrar arrays em JavaScript, como o map e o reduce. Embora esses métodos compartilhem alguns conceitos e funcionalidades, cada um tem seu propósito específico.
- O método
filterretorna um novo array contendo apenas os elementos que passam em um determinado teste, sem modificar o array original. - O método
mapretorna um novo array contendo os resultados de uma função que é aplicada a todos os elementos do array original. É útil quando queremos transformar cada elemento do array de alguma forma. - O método
reducereduz o array a um único valor, aplicando uma função callback em cada elemento. É útil quando queremos obter um único valor a partir de uma soma, média, concatenação, entre outros.
Em resumo, o método filter é focado em filtrar elementos de um array com base em condições específicas. Ele retorna um novo array contendo apenas os elementos que atendem aos critérios estabelecidos pela função de callback. É uma ferramenta poderosa para selecionar e organizar dados em JavaScript.
Conclusão
O método filter em JavaScript é uma excelente opção quando precisamos filtrar elementos de um array com base em determinados critérios. Ele simplifica o processo de filtragem, resultando em código mais legível e eficiente. Através do uso desse método, podemos criar arrays filtrados de forma rápida e elegante.
Espero que este artigo tenha te ajudado a entender como usar o método filter para filtrar arrays em JavaScript. Experimente aplicar esse conhecimento em seus projetos e aproveite os benefícios dessa funcionalidade poderosa.
Exemplos práticos de uso do método filter em JavaScript
Filtrando números primos:
Vamos supor que queremos filtrar apenas os números primos de um array de números. Podemos utilizar o método filter em conjunto com uma função de verificação dos números primos. Veja o exemplo abaixo:
const numeros = [2, 3, 4, 5, 6, 7, 8, 9, 10];
const numerosPrimos = numeros.filter(function(numero) {
for (let i = 2, sqrt = Math.sqrt(numero); i <= sqrt; i++) {
if (numero % i === 0) {
return false;
}
}
return numero !== 1;
});
console.log(numerosPrimos); // [2, 3, 5, 7]
Nesse exemplo, utilizamos o método filter para filtrar os números primos do array. A função de callback percorre cada número e verifica se ele é divisível por algum número além de 1 e ele mesmo. Caso seja divisível por algum número diferente desses, o número é considerado não primo e o retorno da função é false, indicando que ele não deve ser incluído no novo array. Apenas os números que passarem por todas as iterações do loop serão incluídos no array final, resultando em um array contendo apenas números primos.
Filtrando produtos em estoque:
Suponha que você tenha um array de objetos que representam produtos em seu estoque. Cada objeto possui as propriedades nome, preco e estoque. Podemos utilizar o método filter para filtrar apenas os produtos que estão em estoque. Veja o exemplo abaixo:
const produtos = [
{ nome: 'Camiseta', preco: 30, estoque: 10 },
{ nome: 'Calça', preco: 50, estoque: 0 },
{ nome: 'Sapato', preco: 100, estoque: 5 },
{ nome: 'Jaqueta', preco: 80, estoque: 2 }
];
const produtosEmEstoque = produtos.filter(function(produto) {
return produto.estoque > 0;
});
console.log(produtosEmEstoque);
// [
// { nome: 'Camiseta', preco: 30, estoque: 10 },
// { nome: 'Sapato', preco: 100, estoque: 5 },
// { nome: 'Jaqueta', preco: 80, estoque: 2 }
// ]
Nesse exemplo, utilizamos o método filter para filtrar apenas os produtos que possuem um valor maior que zero na propriedade estoque. A função de callback verifica se o valor de estoque é maior que zero e retorna verdadeiro para os produtos em estoque e falso para aqueles que não estão disponíveis. O resultado é um novo array contendo apenas os produtos em estoque.
Diferença entre o método filter e outras formas de filtrar arrays em JavaScript
Diferenças entre filter e forEach:
Embora tanto o método filter quanto o método forEach sejam métodos de array em JavaScript, eles possuem propósitos diferentes.
O método filter é utilizado para criar um novo array com todos os elementos que passam por uma determinada condição, definida por uma função de callback. Ele retorna um novo array com os elementos filtrados, sem afetar o array original. Já o método forEach percorre cada elemento de um array e executa uma função de callback para cada um desses elementos. Ele não cria um novo array e não realiza filtragem.
Em resumo, a principal diferença entre eles é que o filter retorna um novo array com os elementos filtrados, enquanto o forEach apenas executa uma função para cada elemento do array.
Diferenças entre filter, map e reduce:
Além do método filter, existem outros métodos de array em JavaScript que podem ser utilizados para manipulação e transformação de arrays, como map e reduce. Cada um desses métodos possui funcionalidades distintas.
O método map é utilizado para mapear todos os elementos de um array em um novo array com base em uma função de callback. Ele retorna um novo array com os resultados das chamadas da função de callback para cada elemento do array original. O map é útil quando desejamos transformar ou obter um novo array com elementos modificados.
Já o método reduce é utilizado para reduzir todos os elementos de um array a um único valor. Ele aplica uma função de callback que acumula os valores e retorna o resultado final. O reduce é útil quando desejamos obter um único valor a partir de uma operação de soma, concatenação, média, entre outras.
Por outro lado, o método filter é focado em criar um novo array com elementos que passam por uma determinada condição, definida por uma função de callback. Ele retorna um novo array contendo apenas os elementos que atendem aos critérios estabelecidos.
Conclusão
O método filter é uma poderosa ferramenta disponível em JavaScript para filtrar elementos de um array com base em determinados critérios. Ele simplifica o processo de filtragem, resultando em código mais legível e eficiente. Além disso, é importante compreender a diferença entre o método filter e outras formas de filtrar arrays, como o forEach, map e reduce, para escolher a abordagem mais adequada para cada situação.
Neste artigo, exploramos diferentes exemplos práticos de uso do método filter em JavaScript, desde filtrar números primos até filtrar produtos em estoque. Além disso, destacamos as diferenças entre o método filter e outras formas de filtrar arrays. Esperamos que essas informações possam ajudá-lo a utilizar o método filter de forma eficiente em seus projetos e obter resultados desejados.
A Awari é a melhor plataforma para aprender sobre programação no Brasil.
Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.
Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.
Aprenda uma nova língua na maior escola de idioma do mundo!
Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa.
+ 400 mil alunos
Método validado
Aulas
Ao vivo e gravadas
+ 1000 horas
Duração dos cursos
Certificados
Reconhecido pelo mercado
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Curso Técnico Desenvolvedor de Sistemas: Aprenda a criar soluções tecnológicas
Um curso técnico desenvolvedor de sistemas é uma formação...
Curso Desenvolvedor Web em Curitiba: Aprenda a Programar e Construa sua Carreira
Curso Desenvolvedor Web Curitiba: Aprenda a programar, construa uma...
Curso Técnico de Desenvolvedor de Software: Aprenda as habilidades necessárias para se tornar um profissional de sucesso na área de desenvolvimento de software.
Resumo: Descubra os benefícios de fazer um curso técnico...
