Mapa, redução e filtro de JavaScript - funções de matriz JS explicadas com exemplos de código

Mapear, reduzir e filtrar são métodos de array em JavaScript. Cada um irá iterar em um array e realizar uma transformação ou computação. Cada um retornará uma nova matriz com base no resultado da função. Neste artigo, você aprenderá por que e como usar cada um.

Aqui está um resumo divertido de Steven Luscher:

Mapear / filtrar / reduzir em um tweet:

mapa ([?,?,?], cozinheiro)

=> [?,?,?]

filtro ([?,?,?], é vegetariano)

=> [?,?]

reduzir ([?,?], comer)

=>?

- Steven Luscher (@steveluscher) 10 de junho de 2016

Mapa

O map()método é usado para criar um novo array a partir de um existente, aplicando uma função a cada um dos elementos do primeiro array.

Sintaxe

var new_array = arr.map(function callback(element, index, array) { // Return value for new_array }[, thisArg])

No retorno de chamada, apenas a matriz elementé necessária. Normalmente, alguma ação é executada no valor e, em seguida, um novo valor é retornado.

Exemplo

No exemplo a seguir, cada número em uma matriz é duplicado.

const numbers = [1, 2, 3, 4]; const doubled = numbers.map(item => item * 2); console.log(doubled); // [2, 4, 6, 8]

Filtro

O filter()método pega cada elemento em uma matriz e aplica uma instrução condicional a ele. Se esta condicional retornar true, o elemento é enviado para a matriz de saída. Se a condição retornar falso, o elemento não será enviado para a matriz de saída.

Sintaxe

var new_array = arr.filter(function callback(element, index, array) { // Return true or false }[, thisArg])

A sintaxe de filteré semelhante a map, exceto que a função de retorno de chamada deve retornar truepara manter o elemento ou falsenão. No retorno de chamada, apenas o elementé necessário.

Exemplos

No exemplo a seguir, os números ímpares são "filtrados", deixando apenas os números pares.

const numbers = [1, 2, 3, 4]; const evens = numbers.filter(item => item % 2 === 0); console.log(evens); // [2, 4]

No próximo exemplo, filter()é usado para obter todos os alunos cujas notas são maiores ou iguais a 90.

const students = [ { name: 'Quincy', grade: 96 }, { name: 'Jason', grade: 84 }, { name: 'Alexis', grade: 100 }, { name: 'Sam', grade: 65 }, { name: 'Katie', grade: 90 } ]; const studentGrades = students.filter(student => student.grade >= 90); return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

Reduzir

O reduce()método reduz uma matriz de valores a apenas um valor. Para obter o valor de saída, ele executa uma função redutora em cada elemento da matriz.

Sintaxe

arr.reduce(callback[, initialValue])

O callbackargumento é uma função que será chamada uma vez para cada item da matriz. Essa função leva quatro argumentos, mas geralmente apenas os dois primeiros são usados.

  • acumulador - o valor retornado da iteração anterior
  • currentValue - o item atual na matriz
  • índice - o índice do item atual
  • array - o array original no qual reduz foi chamado
  • O initialValueargumento é opcional. Se fornecido, ele será usado como o valor inicial do acumulador na primeira chamada para a função de retorno de chamada.

Exemplos

O exemplo a seguir adiciona todos os números em uma matriz de números.

const numbers = [1, 2, 3, 4]; const sum = numbers.reduce(function (result, item) { return result + item; }, 0); console.log(sum); // 10

No próximo exemplo, reduce()é usado para transformar um array de strings em um único objeto que mostra quantas vezes cada string aparece no array. Observe que esta chamada para reduzir passa um objeto vazio {}como initialValueparâmetro. Isso será usado como o valor inicial do acumulador (o primeiro argumento) passado para a função de retorno de chamada.

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit']; var petCounts = pets.reduce(function(obj, pet){ if (!obj[pet]) { obj[pet] = 1; } else { obj[pet]++; } return obj; }, {}); console.log(petCounts); /* Output: { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

Explicação em vídeo

Confira o vídeo abaixo no canal freeCodeCamp.org no YouTube. Ele cobre os métodos de array discutidos e mais alguns.