Filtro de matriz JavaScript: elementos de filtragem

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: namee 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 populationpropriedade 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 citiesobjeto array e passamos uma função que testa cada elemento.

Dentro da função, verificamos se o populationde cada cidade do array é maior que 3 milhões. Se for o caso, a função retorna trueou falsenã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 callbackfunção leva três argumentos:

O currentElementargumento é o elemento atual no array que está sendo processado pela callbackfunção.
O indexdo currentElementque está sendo processado pela callbackfunção.
O arrayobjeto que está sendo percorrido.

Os argumentos indexe arraysão opcionais.

O contexObjectargumento do filter()método é opcional. Se você passar o thisvalor, poderá referenciá-lo usando thisa 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:2695598Linguagem 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 contextObjectargumento que especifica um objeto que pode ser referenciado na callback()função usando a thispalavra-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 propriedades lowere upperde um objeto.
A seguir, defina uma matriz de dados mistos que contenha numbers , strings e undefined .
Em seguida, defina o rangeobjeto com duas propriedades lowere upper.
Depois disso, chame os filter()métodos do dataarray e passe a isInRange()função e o range objeto. Porque passamos no rangeobjeto, dentro da isInRange()função, a thispalavra-chave faz referência ao rangeobjeto.
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.