O método Javascript Array filter() cria um novo array de elementos a partir de um array existente que se satisfaz uma condição especificada.
Nesse post vamos falar tudo o que você precisa saber sobre o método Javascript Array filter(), vamos detalhar a dar vários exemplos de como utilizar o método. Será uma análise bem completa, acompanhe.
O método filter() chama uma vez uma função de callback fornecida para cada elemento do array e constrói um novo array com todos os valores para os quais a callback retorna um valor truthy.
O método Javascript Array filter() segue esse especificações:
Array.filter() não modifica o array original.A sintaxe do método filter() recebe 2 parâmetros. mas apenas um é obrigatório.
let novoArray = originalArray.filter(funcaoCallback(currentValue[, index, [array]])[, thisArg])
funcaoCallback – ObrigatóriothisArg – OpcionalVamos destrinchar o método, e descobrir o que cada parâmetro representa.
funcaoCallback é a função, para testar cada elemento do array. É esperado que essa função retorne uma valor booleano.
A função deve retornar true para manter o elemento, false caso contrário, recebendo três argumentos:
currentValue – Obrigatórioindex – Opcionalarray – Opcionalconst arrayOriginal = [1, 2, 3, 4];
funcaoCallback = function () {
}
const novoArray = originalArray.filter(funcaoCallback);
currentValue é o elemento que está sendo processado durante a iteração corrente. O array filter() iterage o originalArray através de um laço que passa por todos os elementos do Array. Então durante essa execução o parâmetro currentValue será cada um dos valores do arrayOriginal.
No exemplo abaixo coloquei um console.log() dentro do nossa funcaoCallback() que agora está recebendo o nosso parâmetro currentValue, e ela imprime exatamente todos os elementos do nosso arrayOriginal
const arrayOriginal = [1, 2, 3, 4];
funcaoCallback = function (currentValue) {
console.log(currentValue);
}
const novoArray = originalArray.filter(funcaoCallback);
/*
1
2
3
4
[]
*/
index é o índice do elemento que está sendo verificado durante a atual iteração. Em Javascript, os arrays iniciam no índice 0.
Cada elemento do nosso arrayOriginal pode ser obtido através da sintaxe:
console.log(arrayOriginal[0]); // 1
console.log(arrayOriginal[1]); // 2
console.log(arrayOriginal[2]); // 3
console.log(arrayOriginal[3]); // 4
O número dentro das chaves [] é o índice de cada elemento do array. No método filter() ele representa exatamente os mesmo valores, como você pode ver no exemplo abaixo quando coloco o console.log() para imprimir o parâmentro.
const arrayOriginal = [1, 2, 3, 4];
const novoArray = arrayOriginal.filter(currentValue => console.log(currentValue));
console.log(novoArray);
// 1 2 3 4 []
array é para nossos exemplos o arrayOriginal. Mas de forma geral ele representa o array no qual você está chamando o método filter.
Perceba então que se chamarmos o nosso método filter para um outro array, esse parâmetro será o array o qual o método filter foi chamado.
Voltando ao nosso exemplo original, teremos o seguinte resultado se usarmos o console.log() dentro da nossa funcaoCallback. Que é exatamente o resultado da primeira iteração no exemplo acima.
const arrayOriginal = [1, 2, 3, 4];
funcaoCallback = function (currentValue, index, array) {
console.log(array);
}
const novoArray = arrayOriginal.filter(funcaoCallback);
/*
[ 1, 2, 3, 4 ]
[ 1, 2, 3, 4 ]
[ 1, 2, 3, 4 ]
[ 1, 2, 3, 4 ]
*/
thisArg é o valor a ser usado como this durante a execução da funcaoCallback. O argumento this ainda causa muita confusão entre alguns desenvolvedores. Mas não é do escopo desse post, explicar esse argumento. Eu recomendo fortemente você visitar esse link se quiser ir mais a fundo sobre o argumento this.
Uma das formas que podemos utilizar o thisArg como um valor inicial para nossa função por exemplo.
const arrayOriginal = [1, 2, 3, 4];
funcaoCallback = function (currentValue, index, array) {
console.log(this);
}
const thisArg = 10;
const novoArray = arrayOriginal.filter(funcaoCallback, thisArg);
/*
[Number: 10]
[Number: 10]
[Number: 10]
[Number: 10]
*/
Acredito que tenha ficado claro o que cada parâmetro do método filter faz e o que são os parâmetros da funcaoCallback. Vamos agora passar para exemplos de como utilizar o método da melhor maneira.
O método filter tem muitas aplicações uteis, vou listar aqui, 5 dos exemplos mais comuns que podem ser adaptados em uma grande variedade de sitauções.
As arrow functions foram introduzidas no ES6. Ela nada mais é do que uma alternativa sintaticamente compacta de uma expressão de função regular.
Todos os exemplos que mostrei poderiam ter sido escritos nessa sintaxe, mas acredito que a sintaxe “antiga” é de mais fácil compreensão. E no final, para o nossos exemplos não faz diferença qual sintaxe você escolher.
Vamos então transformar um dos nossos exemplos com a sintaxe de Arrow Function. Vou seguir esse padrão para todos os seguintes exemplos.
Se a função tiver apenas uma condição, e a condição retornar um valor, você pode remover as chaves {} e a palavra chave return:
const arrayOriginal = [1, 2, 3, 4];
const novoArray = arrayOriginal.filter(currentValue => console.log(currentValue));
console.log(novoArray);
/*
1
2
3
4
[]
*/
O segundo exemplo é bem simples, suponha que temos um array com diversos números, que podem ser coordenadas ou números de id. Precisamos filtrar desse array apenas os números positivos.
const ages = [-243, -132, 112, 40, -96];
const filtered = ages.filter(number => number > 0);
console.log(filtered);
// [112, 40]
Para o nosso terceiro caso, temos um Array com diversos produtos que precisamos filtrar de acordo com a preferência do usuário, nesse caso, preço.
Precisamos de interagir sobre este conjunto para encontrar todos os produtos que combinam com a nossa condição. São quatro produtos dentro deste array, e cada um deles é um objeto.
Precisamos interagir sobre os objetos também, se você não sabe como fazer isso, basta conferir este post e este também.
Qualquer item acima de 200 reais deve ser incluído dentro do novo array e você pode então exibir o resultado do filtro pro usuário.
const products = [
{ productName: "Television", price: "1000" },
{ productName: "Pendrive", price: "200" },
{ productName: "Camera", price: "450" },
{ productName: "Mouse", price: "120" }
];
const filtered = products.filter((item) => {
return item.price > 200;
});
console.log(filtered);
/*
[
{ productName: "Television", price: "1000" },
{ productName: "Camera", price: "450" }
]
*/
Digamos que na hora de atualizar alguns registros no banco de dados os Ids foram corrompidos por algum outro trecho do código. O objetivo aqui é filtrar os id’s errados.
Para esse exemplo estabeleci 3 diferentes condições para um Id válido, utilizando o filter() ficou fácil para criar um novo array com os id’s corretos.
const arr = [
{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 },
{ id: '12' }, { id: null }, { id: NaN }, { id: 'undefined' }
];
const filtered = arr.filter(obj =>
obj.id !== undefined
&& typeof (obj.id) === 'number'
&& obj.id >= 0
);
console.log(filtered);
//{ id: 15 }, Object { id: 0 }, Object { id: 3 }
Uma outra situação bem comum é remover valores repetidos de um array. Para isso foi necessário utilizar o segundo parâmetro do método filter() para podermos acessar o índice do elemento atual que está sendo processado.
const arr = ["a", 2, "c", 4, "a", 2, 2, 5, "c"];
const filtered = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(filtered);
//[ 'a', 2, 'c', 4, 5 ]
Como vimos, Javascript Array filter(), é um método muito útil. Você pode encadear esse método com outros métodos Javascript e criar uma função extremamente poderosa.
Caso queira ver mais alguns exemplos do Javascript Array filter() em ação, escrevi esse outro artigo com mais alguns exemplos.
Se você gostou do post, não se esqueça de deixar um comentário e de se inscrever para receber todas as novidades!
Até a próxima!
Deixe um comentário