Tema 4 -- Arrays: Map, Filter y Reduce

Arrays: Map, Filter y Reduce

Arrow (=>)

Funciones Tradicionales	Operador arrow =>
nombre = function  (argumentos) {       código; }	nombre = ( argumentos )   => {         código; }
	→ Los paréntesis y las llaves son opcionales:     argumentos    => código;
	¿Y si hubiera un return dentro de la función?  ¡¡¡ También es opcional !!!
function doble ( x ) {       return   x *  2 ; }	x   => x * 2;
let interval = setInterval ( function(){ alert("Hello"); }, 3000);	let interval = setInterval ( () => alert("Hello"); , 3000);

nombre = (arg) => { console.log(arg) }; 

nombre = () => { console.log(“adios”)};

arg => console.log(arg);

Función Map

Crea un nuevo Array del mismo tamaño que el original.

[1, 2, 3, 4].map( function (currentValue, index, array) { ... })

- currentValue → El valor actual en cada iteración.
- Index → El índice de la posición del array que se está iterando.
- Array → Una copia del array completo.

[array].map(funcion) 

Devuelve un array con la misma longitud que el que le hemos pasado: 

let coches = [ 

   {color: red, puertas: 3}, 

   {color: blue, puertas: 6}, 

   {color:yellow, puertas: 9}

 ]; 

let mapeo = coches.map( coches => coches.color); //ARRAY DE COLORES DE COCHES (string)

Ejemplos:

let numbers = [1, 2, 3, 4, 5, 6];
let numSqrt = numbers.map( function (number) {

      return number * number;
})
// Resultado: [1, 4, 9, 16, 25, 36]

//---------------MISMO EJEMPLO PERO CON ARROW------------------

let numbers = [1, 2, 3, 4, 5, 6]
let numSqrt = numbers.map( number => number * number );
// Resultado: [1, 4, 9, 16, 25, 36]

Función Filter

Es igual que map(), pero devuelve un array más pequeño (se ajusta a la cantidad de valores que se hayan obtenido despues del filtrado).

[1, 2, 3, 4].filter( function (currentValue, index, array) { ... })

- CurrentValue → El valor actual en cada iteración.
- Index → El índice de la posición del array que se está iterando.
- Array → Una copia del array completo.

[array].filter(funcion) 

Devuelve un array con distinta longitud: 

let coches = [ 

   {color: red, puertas: 3}, 

   {color: blue, puertas: 6}, 

   {color:yellow, puertas: 9} 

]; 

let mapeo = coches.filter( coches => coches.color == “red”); //ARRAY DE COLORES ROJOS DE COCHES (string)

Ejemplos:

let numbers = [1, 2, 3, 4, 5, 6];
let numFiltered = numbers.filter(function (number) {
  return number > 3 ;
})
// Resultado: [4, 5, 6]

//---------------MISMO EJEMPLO PERO CON ARROW------------------

let numbers = [1, 2, 3, 4, 5, 6] ;
let numFiltered = numbers.filter(number => number > 3) ;
// REsultado: [4, 5, 6]

Función Reduce

Reduce() convierte o reduce una matriz o Array hasta un único valor por medio de la función pasada como callback.

[1, 2, 3, 4].reduce( function (acumulador, valorActual, índice, array) { ... } , valorInicialAcum )

- Acumulador → Se encarga de acumular valores.
- ValorActual → El valor actual en cada iteración.
- Índice → El índice de la posición del array que se está iterando.
- Array → Una copia del array completo.

- ValorInicialAcumulador → Es el valor inicial del acumulador.

[array].reduce(funcion) 

Devuelve un array con la misma longitud que el que le hemos pasado: 

let coches = [ 

   {color: red, puertas: 3}, 

   {color: blue, puertas: 6}, 

   {color:yellow, puertas: 9} 

]; 

let mapeo = coches.reduce( (a,b) => a+b, valorActualAcumulador); //Devuelve la suma de todos los numeros empezando por 4 

let numbers = [1, 2, 3, 4, 5, 6]; let total = numbers.reduce((acumulador, actual) => acumulador + actual, 0); // Resultado: 21

Encadenando Funciones

Vamos a realizar un ejemplo en el que calculemos la suma de los salarios de todos los trabajadores “móviles” del siguiente array:

var developers = [   { name: 'Tano', type: 'mobile', salary: 4000 },   { name: 'Inma', type: 'mobile', salary: 31000 },   { name: 'Edgar', type: 'web', salary: 35000 },   { name: 'Fernando', type: 'mobile', salary: 33000 } ]

El código sería el siguiente:

let sumSalariesMobileDev = developers   .filter(developi => developi.type === 'mobile')   .map(developo => developo.salary)   .reduce((acumu, actual) => acu + actual, 0) // 68.000