O método filter() do Array JavaScript

Neste tutorial você vai aprender como usar o método filter() para filtrar elementos em um Array.

English version: https://www.javascripttutorial.net/javascript-array-filter/

Uma das tarefas mais comuns ao trabalhar com um array é criar um novo array que contenha um subconjunto de elementos do array original.

Suponha que você tenha um array cities que é um conjunto de objetos de cidades, onde cada objeto possui duas propriedades: name e population.

Para localizar a cidade cuja a população é maior do que 3 milhões, você normalmente faz um loop sobre os elementos do array usando um loop for e testando se o valor da propriedade da população satisfaz a condição, dessa forma:

Resultado:

O Array JavaScript fornece o método filter() que permite executar esta tarefa de uma maneira mais curta e mais limpa.

O exemplo a seguir retorna o mesmo resultado que o anterior:

Neste exemplo, chamamos o método filter() do array de objetos cities e passamos uma função que testa cada elemento.

Dentro da função, verificamos se a população de cada cidade no array é superior a 3 milhões.

Se for esse o caso, a função retorna true caso contrário, retornará false. O método filter() inclui apenas o elemento no array de resultados se o elemento satisfizer o teste na função que foi passada.

A partir do ES6, o código fica ainda mais limpo quando você usa arrow function.

O método filter() em detalhes

O método filter cria um novo array com todos os elementos que passam no teste implementado pela função de callback.

Internamente, o método filter() itera sobre casa elemento do array e passa cada elemento para a função de retorno callback. Se a função callback retornar true, incluirá o elemento no array de retorno.

O método filter() aceita dois argumentos: uma função callback e um objeto opcional.

Assim como outros métodos iterativos do objeto Array, como every(), some(), map() e forEach(), a função de callback tem a seguinte forma:

A função callback possui 3 argumentos:

• O argumento currentElement é o elemento atual no array que está sendo processado pela função de callback.
• O index do currentElement que está sendo processado pela função de callback.
• O objeto array que está sendo percorrido.

Os argumentos index e array são opcionais.

O argumento contexObject do método filter() é opcional. Se você passar esse valor poderá referenciá-lo usando a palavra-chave this dentro da função de callback.

É importante observar que o método filter() não altera o array original.

Exemplos de uso do filter()

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

Por exemplo, a seguir mostramos como encadear 3 métodos: filter() , sort() e map():

Resultado:

Entenda como funciona:

• Primeiro, o método filter() retorna as cidades cujas populações são menores que 3 milhões.
• Segundo, o método sort() ordena as cidades pela quantidade de população em ordem decrescente.
• Terceiro, o método map() mostra cada elemento no array de resultados na janela de console.

O exemplo a seguir ilustra o uso do argumento contextObject que especifica um objeto que pode ser referenciado na função callback usando a palavra-chave this.

Resultado:

Entenda como funciona:

• Primeiro, defina a função isInRange() que verifica se o argumento é um número e se está dentro do intervalo especificado pelas propriedades lower e upper de um objeto.
• Em seguida, defina um array data de dados misturados que contém números, strings e indefinidos.
• Então defina o objeto range com duas propriedades lower e upper.
• Depois disso, chame os métodos filter() do array data e passe a função isInRange() e o objeto range. Como passamos o objeto range dentro da função isInRange() a palavra-chave this se refere ao objeto range.
• Por fim, mostre a matriz de resultados na janela de console.

Nesse tutorial você aprendeu como usar o método filter() do Array JavaScript para filtrar elementos em um array com base em um teste fornecido por uma função de retorno de chamada callback.

Veja o índice de todos os tutoriais JavaScript

Tutoriais JavaScript