If you're seeing this message, it means we're having trouble loading external resources on our website. Show Se você está atrás de um filtro da Web, certifique-se que os domínios *.kastatic.org e *.kasandbox.org estão desbloqueados.
Utilizar estruturas de repetições para encontrar um determinado conteúdo em uma array, além de ser mais trabalhoso, dificulta a manutenção do código. Isso ocorre em função do aumento de linhas para desenvolver a função de retorno dos dados desejados. Felizmente, temos uma alternativa para facilitar essa tarefa: o método JavaScript filter(). Como o próprio nome sugere, ele tem a função de filtrar o conteúdo de uma array. Faz parte de um conjunto de recursos disponíveis na linguagem JavaScript para a manipulação desse tipo de objeto. Por isso, é importante entender como funciona para saber como utilizá-lo em diferentes situações. Para que você conheça um pouco mais sobre esse recurso, fizemos este post em que vamos mostrar:
Vamos lá? Boa leitura! O que é e como funciona o método JavaScript filter()?O método filter() é um recurso que permite fazer a filtragem de elementos com apenas poucas linhas de comandos. Isso facilita o entendimento e a manutenção do código pelas pessoas que desenvolvem softwares. Na prática, ele faz a leitura dos elementos da array em busca de um valor de referência passado por meio de uma função callback. Ao fazer o teste em cada elemento, o método retorna um ou mais conteúdos que atendam à especificação indicada na função callback e armazena o resultado em uma nova variável do tipo array. Portanto, o resultado será o de todos os elementos que satisfaçam a condição do filtro. Vale ressaltar que a array original não sofre nenhum tipo de alteração pelo método filter(). Como é a sintaxe?Antes de explicar a sintaxe do método filter(), vamos falar rapidamente sobre o que significa uma função callback. Na prática, ela é uma função de retorno, ou seja, ela executa uma ação para que seu resultado seja utilizado em uma outra função anterior. Se você quiser saber um pouco mais sobre o assunto, dê uma olhada nesses exemplos práticos de sua utilização. É importante entender esse conceito, pois a sintaxe do método filter() utiliza uma função callback. Veja como é o comando: var novaArray = arrayOriginal.filter(function(valorAtual, indice, varArray), thisArgumento))No qual:
Quais os 5 exemplos mais interessantes do método filter() na prática?Nada melhor que exemplos práticos para visualizar o que diz a teoria. Por isso, confira, a seguir, algumas formas de utilizar o método filter(). Exemplo 1Vamos imaginar uma variável do tipo array com uma sequência numérica de um a dez, e precisamos separar todos os elementos pares. Confira o código. var numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; function buscarNumerosPares (value) { if (value % 2 == 0) return value; } var numerosPares = numeros.filter(buscarNumerosPares); console.log(numerosPares);Na primeira linha do código foi feita a declaração da variável array com os elementos necessários. A seguir, declaramos uma função callback, chamada buscarNumerosPares, que recebe cada elemento da array e faz um teste para identificar os números pares. Isso é feito por meio da divisão de cada elemento por dois e, caso o restante da operação seja zero, significa que o número avaliado é par. Vale ressaltar que o operador % utilizado no código retorna o valor restante da divisão entre o elemento por dois. Caso ele seja zero, identifica o número avaliado como par. Na próxima linha, finalmente, utilizamos o método filter(). Primeiro, declaramos uma variável do tipo array chamada numerosPares para armazenar o retorno do processamento. O comando numeros.filter(buscarNumerosPares) faz a chamada à função callback correspondente, por meio do envio de cada elemento da variável números. Existem outras formas de escrever esse mesmo código. Veja o algoritmo, a seguir. var numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var retorno = numeros.filter(pares => (pares %2)== 0); console.log(retorno);Perceba que, nesse exemplo, fazemos a declaração da variável de retorno e já atribuímos a ela o resultado do método filter(). Para isso, utilizamos a arrow function, que é uma forma mais simples de utilizar funções. Dessa forma, o que vier depois da declaração => é entendido como uma função. A saída para os dois códigos acima é a mesma. /*Saída: Array(5) [2, 4, 6, 8, 10] */Exemplo 2No exemplo a seguir, buscaremos na variável do tipo array quais estados se iniciam com a letra S. Confira o código. var estados = ["São Paulo", "Minas Gerais", "Rio de Janeiro", "Rio Grande do Norte", "Santa Catarina", "Acre"]; function retornaEstado (value){ if (value.charAt(0) == "S") return value; } var resultado = estados.filter(retornaEstado); console.log(resultado);Em primeiro lugar, declaramos a variável estados com cinco elementos com as iniciais variadas. A seguir, fizemos uma função chamada retornaEstado, que lê o primeiro caractere de cada elemento em busca da letra S. Perceba que para ler o primeiro caractere, utilizamos o método charAt(), que retorna o caractere de uma string, de acordo com o índice referenciado. No nosso exemplo, buscamos o índice 0, pois corresponde ao caractere inicial da string. O próximo passo é utilizar a função. Para isso, criamos a variável do tipo array chamada resultado para armazenar o retorno do método filter(). Então, aplicamos o método na array estados e chamamos a função retornaEstado, que retornará dois elementos: “São Paulo” e “Santa Catarina”. Assim como no exemplo anterior, podemos utilizar a arrow function para escrever esse código. Veja como ele fica ao utilizarmos essa opção, que terá o mesmo resultado. var estados = ["São Paulo", "Minas Gerais", "Rio de Janeiro", "Rio Grande do Norte", "Santa Catarina", "Acre"]; var resultado = estados.filter( estadosComS => (estadosComS.charAt(0) == "S")); console.log(resultado);Exemplo 3Neste exemplo, vamos falar sobre uma array de variáveis do tipo objeto. É importante dizer que o tipo objeto é utilizado quando queremos armazenar mais de uma característica de um mesmo elemento. Por exemplo, podemos ter uma lista de produtos com as seguintes informações sobre cada item: id, descrição e categoria do produto. Portanto, podemos criar um objeto chamado produtos que contenha essas características e armazenar vários desses objetos em uma array. Em JavaScript, cada característica do objeto é chamada de propriedade. Assim, um objeto pode ter várias propriedades, que contêm um identificador e o seu valor correspondente. Podemos utilizar o método filter() para acessar os elementos em uma array de objetos. Confira o exemplo. var produtos = [ {id: 1, descricao: "Smartphone", categoria: "Eletrônico"}, {id: 2, descricao: "Notebook", categoria: "Eletrônico"}, {id: 3, descricao: "Geladeira", categoria: "Eletrodoméstico"}, {id: 4, descricao: "Liquidificador", categoria: "Eletrodoméstico"}, {id: 5, descricao: "Fogão", categoria: "Eletrodoméstico"} ] function retornaEletronico (value){ if (value.categoria == "Eletrônico") return value; } var produtosEletronico = produtos.filter(retornaEletronico); produtosEletronico.forEach(produtoEletro => { console.log(produtoEletro); }) /* saída: Object {descricao: "Smartphone", categoria: "Eletrônico"} Object {descricao: "Notebook", categoria: "Eletrônico"} */Primeiramente, declaramos a array com cinco objetos que vamos chamar de produtos. A seguir, declaramos uma função chamada retornaEletronico, que devolverá todos os objetos que sejam da categoria eletrônico. Perceba que a validação na função acessa a propriedade categoria para compará-la com o conteúdo desejado. Na próxima linha, é feita a declaração da variável de retorno para a aplicação do javascript filter object. A seguir, exibimos o resultado na console dos objetos selecionados pelo filtro. Para isso, utilizamos a estrutura de repetição forEach, que lê todos os elementos da array e executa o comando console.log para exibir o resultado correspondente ao depurarmos o código. Exemplo 4Neste exemplo, vamos utilizar a mesma situação do anterior. Entretanto, vamos desenvolver o código com a arrow function e selecionar os produtos que sejam da categoria eletrodomésticos. Veja como fica o código. var produtos = [ {id: 1, descricao: "Smartphone", categoria: "Eletrônico"}, {id: 2, descricao: "Notebook", categoria: "Eletrônico"}, {id: 3, descricao: "Geladeira", categoria: "Eletrodoméstico"}, {id: 4, descricao: "Liquidificador", categoria: "Eletrodoméstico"}, {id: 5, descricao: "Fogão", categoria: "Eletrodoméstico"} ] var produtosEletrodomestico = produtos.filter(produto => produto.categoria == "Eletrodoméstico"); produtosEletrodomestico.forEach(produto => { console.log(produto); }); /* saída: Object {descricao: "Geladeira", categoria: "Eletrodoméstico"} Object {descricao: "Liquidificador", categoria: "Eletrodoméstico"} Object {descricao: "Fogão", categoria: "Eletrodoméstico"} */Criamos a variável produtosEletrodomesticos e já aplicamos o filtro para selecionar, em cada produto, a propriedade categoria que atenda à condição desejada. No próximo passo, todos os elementos armazenados na nova array são exibidos na console por meio da estrutura de repetição forEach. Exemplo 5Outra forma de utilizar o filter() é para criar uma nova array com elementos válidos. Imagine uma array que tenha objetos nulos ou indefinidos junto a outros conteúdos. Portanto, o JavaScript array filter() pode ser uma alternativa para selecionar os elementos que tenham os dados consistentes. Confira. var produtos = [ {id: 1, descricao: "Smartphone", categoria: "Eletrônico"}, {id: 2, descricao: "Notebook", categoria: "Eletrônico"}, {id: 3, descricao: "Geladeira", categoria: "Eletrodoméstico"}, {}, {id: null }, {id: NaN}, {id: 'undefined' }, {id: 4, descricao: "Liquidificador", categoria: "Eletrodoméstico"}, {id: 5, descricao: "Fogão", categoria: "Eletrodoméstico"} ] function filtrarPorDescricao(value) { if ('id' in value && typeof(value.id) === 'number' && !isNaN(value.id)) { return value; } } var produtosValidos = produtos.filter(filtrarPorDescricao); produtosValidos.forEach(produto => { console.log(produto); }) /* saída Object {id: 1, descricao: "Smartphone", categoria: "Eletrônico"} Object {id: 2, descricao: "Notebook", categoria: "Eletrônico"} Object {id: 3, descricao: "Geladeira", categoria: "Eletrodoméstico"} Object {id: 4, descricao: "Liquidificador", categoria: "Eletrodoméstico"} Object {id: 5, descricao: "Fogão", categoria: "Eletrodoméstico"} */No código acima, adicionamos alguns elementos inválidos e nulos para executar o teste. A seguir, fizemos uma função, chamada filtrarPorDescricao, que identifica os elementos inválidos e retorna apenas os que tiverem um valor numérico armazenado na propriedade id. Dessa forma, criamos uma nova array de objetos apenas com produtos válidos e listamos o resultado na console do navegador. O que é polyfill para o filter()?O método filter() foi adicionado ao JavaScript a partir da EMCA-262 5.1th Edition, que é a especificação de linguagem de script implementada pelo JavaScript. Isso significa que alguns navegadores, especialmente os mais antigos, podem não estar preparados para atender às mudanças apresentadas com a nova especificação. O método filter(), por exemplo, é um dos recursos que podem não funcionar nesses navegadores. Por isso, existem os polyfills, que são códigos que devem ser adicionados no início do código que utiliza esse recurso. Assim, caso a pessoa utilize algum desses navegadores, não tem a funcionalidade interrompida por falhas por incompatibilidade. Vale ressaltar que o código pode ser encontrado na página do MDN Web Docs, na documentação sobre o método filter(). Qual a compatibilidade com os navegadores?Como dissemos no tópico anterior, o método filter() foi adicionado ao JavaScript a partir da 5.1 edição da EMCA-262, que foi lançada em 2011. Portanto, é um recurso relativamente novo. Entretanto, os principais navegadores oferecem suporte a esse recurso. Confira, a seguir, a partir de qual versão essa funcionalidade roda perfeitamente em cada navegador.
O método JavaScript filter() é um recurso que permite a manipulação de elementos em uma array. Trata-se de uma forma de reduzir as linhas de código, pois é possível utilizá-lo em substituição às estruturas de repetição usadas para selecionar elementos em uma array. Por isso, é importante entender como ele funciona para utilizá-lo da melhor forma em suas aplicações web. Gostou do nosso conteúdo sobre as formas de aplicação do método filter()? Então, confira este guia inicial imperdível sobre expressões regulares! |