Em JavaScript, temos esses três métodos como parte do método Array.prototype , mas quais são as diferenças entre eles e o que eles fazem exatamente? Então vamos mergulhar neles!

1. Vamos começar com o método filter():

O método filter() aplica-se a uma matriz e, em seguida, cria uma nova matriz e, na nova matriz, filtra a primeira matriz com base na função que fornecemos. Por exemplo, vamos supor que temos um array chamado oldArray que contém alguns elementos, e queremos apenas manter alguns membros específicos dele e armazená-los em um novo array chamado newArray para que possamos usar o método filter() para este propósito:

//ES5
var oldArray = [10, 20, 30, 40, 50];
var newArray = oldArray.filter(function(number){
    return number > 35
});
console.log(newArray) // [40, 50];

// ES6
const oldArray = [10, 20, 30, 40, 50];
const newArray = oldArray.filter(number=> number > 35);
console.log(newArray); // [40, 50]

Há duas coisas essenciais sobre o método do filtro:

• Ele cria um novo array, então ainda temos o array original se registrarmos o oldArray acima.
• A função que passamos para o método filter na verdade nos lança um True/False, então se o elemento vai fazer parte de um newArray ou não.

2. O método map():

Este método obtém um array e, em seguida, transforma os elementos desse array conforme sua função agrada e, em seguida, cria um novo array e os armazena todos no novo array. Imagine que temos uma matriz de números e, por algum motivo, queremos dobrar todos os seus elementos; podemos usar o loop forEach para obter todos os elementos e depois duplicá-los, mas também podemos usar o método map() .

Então, vamos verificar novamente o oldArray e ver como podemos trabalhar com o método map():

//ES5
var oldArray = [10, 20, 30, 40, 50];
var newArray = oldArray.map(function(number){
    return number * 2
});
console.log(newArray) // [20, 40, 60, 80, 100];
//ES6
const oldArray = [10, 20, 30, 40, 50];
const newArray = oldArray.map(number => number * 2);
console.log(newArray) // [20, 40, 60, 80, 100];

3. O método reduce():

O método reduce() obtém um array e o reduz a um único valor . Por exemplo, vamos supor que temos uma matriz de números e queremos obter a quantidade total de números, podemos criar uma nova variável e defini-la como zero e, usando um loop for, podemos adicionar todos os elementos do array para a variável que acabamos de criar. Ou poderíamos apenas fornecer uma função redutora para o método reduce() da seguinte forma:

//ES5
var myArray = [1, 2, 3, 4];
var reducedAmount = myArray.reduce(function(total, currentValue){
    return total + currentValue
});
console.log(reducedAmount); // 10
//ES6
const myArray = [1, 2, 3, 4];
const reducedAmount = myArray.reduce(
  (accumulator, currentValue) => accumulator + currentValue);
console.log(reducedAmount); // 10
//here we have reduced myArray to a single number value

      
                

                    
                    
                
            

Mencionamos que o reduce() obtém um array e o reduz a um único valor, mas lembre-se de que esse valor também pode ser um objeto ou um novo array . Também podemos ter um valor inicial para esse valor e, em seguida, reduzir um array e armazená-lo junto com o valor padrão. Por exemplo, imagine que temos um array. Queremos reduzi-lo a um novo array (como mencionado, podemos reduzir um array a um valor que também pode ser um array).

Também queremos adicionar alguns elementos extras ao novo array que não estão no oldArray, então podemos simplesmente passar um array com os elementos que queremos e então reduzir o oldArray nele. Eu sei que pode parecer um pouco confuso, então vamos ver no código. No exemplo anterior, obtemos o valor total de um elemento do array, mas agora queremos somar o valor total a um valor inicial que desejamos, e é aí que podemos passar outro argumento para o método reduce(), que é o início state of accumulatorConforme mostrado no código abaixo, fornecemos 10 como o segundo argumento.

const oldArray = [1, 2, 3, 4];
let sum = oldArray.reduce((accumulator,currentValue) => {
 return accumulator + currentValue;
},10); 
console.log(sum); // 20 ((1+2+3+4)+10)

• accumulator
• currentValue
• currentIndex
• array

const numArray = [10, 20, 30];
const average = numArray.reduce(
  (accumulator, currentValue, currentIndex, array) => {
    accumulator += currentValue;
    return currentIndex === array.length - 1 ? 
      accumulator / array.length : accumulator
  }
}); 
// we have not provided an initial value
console.log(average); // 20

E para a última dica, em vez de usar o método map() e o método filter(), você pode fazer o trabalho usando apenas o método reduce() porque essa abordagem percorre o array uma vez e não duas vezes .

Compartilhe com os seus amigos! Bata palmas no máximo 50 vezes.

Por favor, não hesite em compartilhar seus pensamentos e ideias comigo. Você pode me encontrar no Twitter ou em outras mídias sociais visitando meu portfólio.

Leia mais de mim:

Múltiplos Interceptores em Angular Husky 6 Lint (mais bonito + eslint) e commitlint para Projetos JavaScript Formas angulares (forma reativa), incluindo material angular e validador personalizado