Resumo : neste tutorial, você aprenderá como usar o filter()
método JavaScript Array para filtrar elementos em um array.
filter()
Introdução ao método de array JavaScript
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 uma matriz de objetos de cidade onde cada objeto contém duas propriedades: name
e population
.
let cities = [
{name: 'Los Angeles', population: 3792621},
{name: 'New York', population: 8175133},
{name: 'Chicago', population: 2695598},
{name: 'Houston', population: 2099451},
{name: 'Philadelphia', population: 1526006}
];
Linguagem de código: JavaScript ( javascript )
Para encontrar a cidade cuja população é superior a 3 milhões, normalmente você percorre os elementos do array usando um loop for e testa se o valor da population
propriedade satisfaz a condição, assim:
let bigCities = [];
for (let i = 0; i < cities.length; i++) {
if (cities[i].population > 3000000) {
bigCities.push(cities[i]);
}
}
console.log(bigCities);
Linguagem de código: JavaScript ( javascript )
Saída:
[
{ name: 'Los Angeles', population: 3792621 },
{ name: 'New York', population: 8175133 }
]
Linguagem de código: JavaScript ( javascript )
JavaScript Array fornece o filter()
método que permite realizar essa tarefa de uma forma mais curta e limpa.
O exemplo a seguir retorna o mesmo resultado do exemplo acima:
let bigCities = cities.filter(function (e) {
return e.population > 3000000;
});
console.log(bigCities);
Linguagem de código: JavaScript ( javascript )
Neste exemplo, chamamos o filter()
método do cities
objeto array e passamos uma função que testa cada elemento.
Dentro da função, verificamos se o population
de cada cidade do array é maior que 3 milhões. Se for o caso, a função retorna true
ou false
não.
O filter()
método inclui os únicos elementos na matriz de resultados se eles satisfizerem o teste na função de retorno de chamada.
A partir do ES6, você pode usar a função de seta para torná-lo mais conciso:
let bigCities = cities.filter(city => city.population > 3000000);
console.log(bigCities);
Linguagem de código: JavaScript ( javascript )
Método JavaScript Array filter() em detalhes
O seguinte ilustra a sintaxe do filter()
método:
arrayObject.filter(callback, contextObject);
Linguagem de código: CSS ( css )
O filter()
método cria um novo array com todos os elementos que passam no teste implementado pela callback()
função.
Internamente, o filter()
método itera sobre cada elemento do array e passa cada elemento para a callback
função. Se a callback
função retornar true
, ela incluirá o elemento na matriz de retorno.
O filter()
método aceita dois argumentos nomeados: uma callback
função e um objeto opcional.
Como outros métodos iterativos do objeto Array, como every(),
some(),
map()
e forEach(),
a callback
função tem o seguinte formato:
function callback(currentElement, index, array){
// ...
}
Linguagem de código: JavaScript ( javascript )
A callback
função leva três argumentos:
- O
currentElement
argumento é o elemento atual no array que está sendo processado pelacallback
função. - O
index
docurrentElement
que está sendo processado pelacallback
função. - O
array
objeto que está sendo percorrido.
Os argumentos index
e array
são opcionais.
O contexObject
argumento do filter()
método é opcional. Se você passar o this
valor, poderá referenciá-lo usando this
a palavra-chave dentro da callback
função.
É importante observar que o filter()
método não altera o array original.
Mais filter()
exemplos de métodos JavaScript Array
Como o filter()
método retorna um novo array, você pode encadear o resultado com outros métodos de array, como sort()
e map()
.
Por exemplo, o seguinte ilustra como encadear os três métodos: filter(),sort(),
emap():
cities
.filter(city => city.population < 3000000)
.sort((c1, c2) => c1.population - c2.population)
.map(city => console.log(city.name + ':' + city.population));
Linguagem de código: JavaScript ( javascript )
Saída:
Philadelphia:1526006
Houston:2099451
Chicago:2695598
Linguagem de código: CSS ( css )
Como funciona.
- Primeiro, filtre as cidades cujas populações são inferiores a 3 milhões usando o
filter()
método. - Segundo, classifique as cidades resultantes pelas populações em ordem decrescente usando o
sort()
método. - Terceiro, envie o elemento da matriz para o console usando o
map()
método.
O exemplo a seguir ilustra o uso do contextObject
argumento que especifica um objeto que pode ser referenciado na callback()
função usando a this
palavra-chave
function isInRange(value) {
if (typeof value !== 'number') {
return false;
}
return value >= this.lower && value <= this.upper;
}
let data = [10, 20, "30", 1, 5, 'JavaScript filter', undefined, 'example'];
let range = {
lower: 1,
upper: 10
};
let numberInRange = data.filter(isInRange, range);
console.log(numberInRange); // [10, 1, 5]
Linguagem de código: JavaScript ( javascript )
Saída:
[ 10, 1, 5 ]
Linguagem de código: JSON/JSON com comentários ( json )
Como funciona.
- Primeiro, defina a
isInRange()
função que verifica se seu argumento é um número e está no intervalo especificado pelas propriedadeslower
eupper
de um objeto. - A seguir, defina uma matriz de dados mistos que contenha numbers , strings e undefined .
- Em seguida, defina o
range
objeto com duas propriedadeslower
eupper
. - Depois disso, chame os
filter()
métodos dodata
array e passe aisInRange()
função e orange
objeto. Porque passamos norange
objeto, dentro daisInRange()
função, athis
palavra-chave faz referência aorange
objeto. - Finalmente, mostre a matriz de resultados no console.
Neste tutorial, você aprendeu como usar o filter()
método JavaScript Array para filtrar elementos em um array com base em um teste fornecido por uma função de retorno de chamada.