4 Maneiras diferentes de usar o método Javascript filter

O método Javascript filter() tem uma função bem simples. Ele cria, e preenche um novo array com os elementos do array que passaram no teste que você definiu na a função.

1 – Método filter com Arrow Function

As arrow functions foram introduzidas no ES6. Ela nada mais é do que uma alternativa sintaticamente compacta de uma expressão de função regular.

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 years = [ 1993, 2000, 2015, 2020];
checkYears = years.filter(year => year > 2000);

console.log(checkYears); // [ 2015, 2020 ]

2 – Trabalhando com JSON

JSON significa JavaScript Object Notation (Notação de Objeto JavaScript).

O formato JSON é sintaticamente idêntico ao código para a criação de objetos JavaScript.

Devido a esta semelhança, um programa Javascript pode facilmente converter dados JSON em objetos JavaScript nativos.

E o nosso método filter() pode trabalhar com JSON sem problemas não se atenha apenas à Arrays simples.

let users = [{ "name": "John", "age": 30, "car": null },
{ "name": "Carlos", "age": 25, "car": "Toyota" },
{ "name": "Brendan", "age": 65, "car": "BMW" },
{ "name": "Carol", "age": 34, "car": "Mercedez" },
{ "name": "Conway", "age": 36, "car": "Mazda" }]


checkUsers = users.filter(user => user.age >= 35);
console.log(checkUsers);
/*
[ { name: 'Brendan', age: 65, car: 'BMW' },
  { name: 'Conway', age: 36, car: 'Mazda' } ]
*/

3 – Encadeando o método Javascript filter com outros métodos

Como o método filter() retorna um novo array, você pode encadear o resultado com outros métodos iterativos, como sort() e map().

Como fiz no exemplo abaixo.

• Primeiro, usei o método filter(), que retorna o array com os usuários com mais de 30 anos de idade.
• Segundo, o método sort() ordena os usuários pelo nome em ordem alfabética decrescente.
• Terceiro, o método map() imprime cada elemento do array final.

let users = [{ name: "John", age: 30, car: null },
{ name: "Carlos", age: 25, car: "Toyota" },
{ name: "Brendan", age: 65, car: "BMW" },
{ name: "Carol", age: 34, car: "Mercedez" },
{ name: "Conway", age: 36, car: "Mazda" }]

users
    .filter(user => user.age > 30)
    .sort((c1, c2) => c1.name - c2.name)
    .map(user => console.log(user.name + ': ' + user.car));

/*
Brendan: BMW
Carol: Mercedez
Conway: Mazda
*/

4 – Usando o argumento this com o método filter

A palavra chave this em Javascript, é uma dor de cabeça pra entender. Mas o método filter() nos permite passar um um segundo argumento na chamada do método, logo após a função de callback, thisArg.

let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])

Você pode dar uma olhada mais afundo na documentação oficial do método filter, se preferir.

Esse é o valor que será utilizado como this ao executar a função de callback.

Nesse exemplo estou passando para o método filter() o meu objeto range que contém a faixa dos anos que eu quero filtrar no array.
Também usei a função sort() para organizar os valores.

filterInRange = function (year) {
    if (typeof year !== 'number') {
        return false;
    }
    return year >= this.min && year <= this.max;
}

let years = [1999, 1874, undefined, "2002", 1993, 2015, 'Debug Everything', null, '@'];

let range = {
    min: 1990,
    max: 2010
};

let yearsInRange = years.filter(filterInRange, range).sort((c1, c2) => c1 - c2);

console.log(yearsInRange); // [ 1993, 1999 ]

Usando Arrow functions, o comportamento do this muda, por isso não utilizei nesse exemplo.

Neste tutorial, você aprendeu como usar o método filter do Javascript para filtrar elementos em um array baseado em um teste fornecido por uma função de callback.

Se quiser ver mais exemplos de como utilizar o método Javascript filter() você pode checar esse artigo onde eu falo sobre 4 Maneiras diferentes de usar o método Javascript filter.

0 Comments