Quando eu descobri como usar os métodos de matriz JS
.map() ,
.filter() e
.reduce() , tudo o que eu lia, olhava e ouvia parecia muito complicado. Esses conceitos foram considerados alguns mecanismos independentes que nada têm a ver com mais nada. Foi difícil para mim entender sua essência e entendê-la.
Ouvi dizer que essas são coisas básicas, cuja compreensão é algo como a fronteira entre os "iniciados" e os "não iniciados". Eu gostaria que soubessem a verdade sobre eles. Consiste no fato de que esses três métodos simbolizam o fato de que as razões para classificar alguns objetos iteráveis geralmente se encaixam em uma das três categorias funcionais.
Examinando o código que escrevi anteriormente, percebi que em 95% dos casos, quando iterava sobre os elementos de cadeias ou matrizes, fiz um dos seguintes:
- Aplicando uma certa sequência de instruções a cada valor (análogo ao método
.map() ). - Filtrar valores que correspondem a um determinado critério (o mesmo que
.filter() ). - Redução de um conjunto de dados para um único valor agregado (análogo de
.reduce() ).
Foi um momento de verdade. Foi então que entendi a essência desses métodos e vi a conexão deles com o que há muito sei.
Para praticar, peguei meu código antigo e o refatorei usando esses métodos. Isso acabou sendo muito útil.
E agora, sem mais delongas, vamos falar sobre esses métodos e, em particular, ver como usá-los, em vez dos esquemas generalizados de uso de loops.
Método .Map ()
O método
.map() é usado se você precisar fazer o seguinte:
- É necessário executar uma certa sequência de ações em cada elemento do objeto iterável.
- É necessário retornar o valor que, presumivelmente, foi alterado.
Considere um exemplo simples no qual, para cada elemento de uma matriz que contém preços, você precisa encontrar novos valores que incluem os preços originais e o imposto sobre vendas:
const prices = [19.99, 4.95, 25, 3.50]; let new_prices = []; for(let i=0; i < prices.length; i++) { new_prices.push(prices[i] * 1.06); }
Veja como fazer o mesmo com
.map() :
const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map(price => price * 1.06);
Ele usa construções sintáticas bastante concisas. Então, vamos olhar para este exemplo. O método
.map() aceita um retorno de chamada. Essa é a função que será aplicada aos elementos da matriz. Nesse caso, é uma função de seta, que é declarada diretamente entre parênteses após a declaração do método.
O nome do parâmetro
price é o nome que será usado ao trabalhar com elementos da matriz. Como nossa função de seta possui apenas um parâmetro, podemos ficar sem parênteses ao declará-la.
A expressão após a seta (
=> ) é o corpo do retorno de chamada. Como existe apenas uma expressão no corpo da função, podemos fazer isso sem chaves e sem a palavra-chave
return .
Se você achar esta entrada incompreensível, aqui está uma versão ligeiramente estendida deste exemplo:
const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map((price) => { return price * 1.06 });
Método .Filter ()
O método
.filter() é usado nos casos em que alguns elementos precisam ser selecionados no objeto iterável. Ao usar esse método, lembre-se de que os valores correspondentes ao filtro são incluídos no resultado final e não excluídos. Ou seja - tudo para o qual a função passada
.filter() retornará
true , será deixado.
Considere um exemplo no qual apenas elementos ímpares devem ser selecionados de uma matriz de números inteiros. Aqui, usamos o operador para pegar o restante da divisão e descobrir se existe um restante da divisão de cada elemento da matriz por 2. Se o restante for 1, isso nos diz que o número correspondente é ímpar. Primeiro, vamos ver uma maneira de resolver esse problema usando um loop regular:
const numbers = [1,2,3,4,5,6,7,8]; let odds = []; for(let i=0; i < numbers.length; i++) { if(numbers[i] % 2 == 1) { odds.push(numbers[i]); } }
O método
.filter() , como
.map() , aceita um retorno de chamada, para o qual os elementos do objeto iterado serão transmitidos por sua vez:
const numbers = [1,2,3,4,5,6,7,8]; let odds = numbers.filter(num => num % 2);
Aqui, o trabalho é organizado da mesma maneira que no exemplo com
.map() . A função de seta passada para
.filter() usa apenas um parâmetro, o que fazemos sem parênteses. Seu corpo contém apenas uma expressão; portanto, pode ser omitido entre colchetes e é aceitável fazê-lo sem
return .
Método .Reduce ()
E agora finalmente chegamos ao método
.reduce() . Ele, acredito, é o mais incompreensível dos três métodos considerados hoje. O nome desse método sugere que ele é usado para reduzir vários valores para um. No entanto, parece-me que é mais fácil pensar nisso como um método que permite coletar certos valores de peças, e não como um método que permite "recolher" ou "reduzir" algo.
Ao construir o código no qual esse método é chamado, um certo valor inicial é definido primeiro. À medida que o método itera sobre os valores da matriz, esse valor inicial é modificado e, de forma modificada, é passado para a próxima iteração.
Aqui está um problema clássico, para resolver o qual você precisa calcular a soma dos elementos da matriz. No nosso caso, consiste em encontrar a quantidade de doações para um determinado projeto de caridade:
const donations = [5, 20, 100, 80, 75]; let total = 0; for(let i=0; i < donations.length; i++) { total += donations[i]; }
Diferente dos métodos
.map() e
.filter() , o método
.reduce() precisa de um retorno de chamada que
.reduce() dois parâmetros. Este é o valor atual da bateria e da bateria. Bateria é o primeiro parâmetro. É ele quem é modificado a cada iteração e passado para o seguinte:
const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => { return total + donation; });
.reduce() também pode passar um segundo argumento para o
.reduce() . É isso que desempenhará o papel do valor inicial da bateria. Suponha que desejamos saber a quantidade total de doações em dois dias, já que ontem essa quantia era de US $ 450 e as informações sobre as doações de hoje são armazenadas em uma matriz:
const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => { return total + donation; }, 450);
Sumário
Espero que agora você tenha descoberto os métodos da matriz
.filter() .map() ,
.filter() e
.reduce() . Pense neles como mecanismos que melhoram a legibilidade do seu código. Eles permitem que você escreva programas mais compactos do que aqueles obtidos usando loops convencionais. Mas o principal deles é que eles permitem que você expresse claramente a intenção subjacente ao código.
Graças a esses métodos, o código que foi gravado por algum tempo será mais fácil de ler. Em vez de se aprofundar nas construções colocadas dentro dos loops
for , fazendo isso apenas para entender seu objetivo final, você só vendo o nome de um desses métodos já pode formar uma ideia geral das razões da existência de um determinado pedaço de código.
Caros leitores! Você usa os métodos de matriz JS .map (), .filter () e .reduce ()?
