javascript Array .filter / .map / .reduce ... etc - 在集合上映射然后减少它

Posted 2021-05-04

/* MAP
Mapping is a fundamental functional programming technique for operating on all of the elements in an array and producing another array of the same length with transformed contents.
*none of our variables ever had to change their values from beginning to end. In functional programming you’re going to appreciate the graceful power of using constants and immutable variables (https://www.sitepoint.com/immutability-javascript/)
Another advantage is that we can improve its versatility by splitting out a named function, for cleaner code:
*/
var animals = ["cat","dog","fish"];
function getLength(word) {
  return word.length;
}
console.log( animals.map(getLength) ); //[3, 3, 4]

/* REDUCE
Reducing goes through each item in an array, performs a function on that item, and adds it to a running total that is passed to the next iteration. 
*/
var animals = ["cat","dog","fish"];
var total = animals.reduce(function(sum, word) {
  return sum + word.length;
}, 0);
console.log(total);
/*
- Here our in-line function takes two parameters: the running sum, and the word that is currently being processed from the array. The function adds the current value of total to the length of the current word.
- we’re setting the second argument of reduce() to zero, and this establishes that total will contain a number. 
*/
//For readability, let’s define a named function first, instead of using an anonymous in-line function:
var animals = ["cat","dog","fish"];
var addLength = function(sum, word) {
  return sum + word.length;
};
var total = animals.reduce(addLength, 0);
console.log(total);

/* MAP
.map() crea un nuevo Array con los resultados de la llamada a la función indicada como parámetro, aplicada a cada uno de los elementos del Array sobre el que itera. Podemos pensar en map() como en un bucle forEach que sirve específicamente para transformar los valores de los elementos sobre los que itera. 
Recibe como parámetro una función, la cual a su vez recibe tres parámetros: el elemento actual del Array, el índice del elemento actual y el propio Array sobre el que se llama la función map(). Expresado en código quedaría algo así.
*/
`[1, 2, 3, 4].map( function (currentValue, index, array) { ... })`

//Ej: tenemos un Array de números y necesitamos convertir esos números a sus cuadrados:
let numbers = [1, 2, 3, 4, 5, 6]
let numSqrt = numbers.map(function (number) {
  return number * number
})
// [1, 4, 9, 16, 25, 36]
//o todavia mas escueto con arrow functions:
let numSqrt = numbers.map( number => number * number )

/* FILTER
.filter() es bastante similar en cuanto a estructura al método map() --es como un forEach pero en este caso sirve específicamente para filtrar: filtrará los elementos de un Array y creará un nuevo Array con los items que pasen el filtro (resultado de la función que pasemos como parámetro, que siempre devolverá true o false).
*/
//Ejemplo: crear un array solo con los elementos cuyo valor sea mayor que 3
let numbers = [1, 2, 3, 4, 5, 6]
let numFiltered = numbers.filter(function (number) {
  return number > 3
})
// [4, 5, 6]

/* REDUCE
.reduce() convierte o reduce una matriz o Array hasta un único valor por medio de la función pasada como callback. Recibe una función, pero además recibe un segundo parámetro que será el valor inicial que se usará como primer argumento en la función.
*/
//Ejemplo: suma resultante de todos los elementos de un array:
let numbers = [1, 2, 3, 4, 5, 6]
let total = numbers.reduce((prev, cur) => prev + cur, 0)
// 21

/*
Encadenando funciones
Estas funciones de primer nivel se pueden encadenar unas a otras:
*/
var developers = [
  { name: 'Tano', type: 'mobile', age: 4 },
  { name: 'Inma', type: 'mobile', age: 31 },
  { name: 'Edgar', type: 'web', age: 35 },
  { name: 'Fernando', type: 'mobile', age: 33 }
]
//Obtener el total de las edades de los desarrolladores mobile:
let sumYearsMobileDev = developers
  .filter(developer => developer.type === 'mobile')
  .map(developer => developer.age)
  .reduce((prev, cur) => prev + cur, 0)
// 68

var data = [
  {
    Title: 'el titulo1',
    Location: 'location 1',
    Event: [
      {
        Type: 1,
        Bookings: [
          { id: '0001a' },
          { id: '0001b' },
          { id: '0001c' }
        ]
      } 
    ]
  },
  {
    Title: 'el titulo2',
    Location: 'location 2',
    Event: [
      {
        Type: 2,
        Bookings: [
          { id: '0002a' }
        ]
      },
      {
        Type: 3,
        Bookings: [
          { id: '0002b' },
          { id: '0002c' }
        ]
      },
      {
        Type: 4,
        Bookings: [
          { id: '0002d' },
          { id: '0002e' }
        ]
      }
    ]
  },
  {
    Title: 'el titulo3',
    Location: 'location 3',
    Event: [
      {
        Type: 5,
        Bookings: [
          { id: '0003a' },
          { id: '0003b' },
          { id: '0003c' }
        ]
      } 
    ]
  }
];

//
// USING FILTER AND MAP TO TRANSFORM THE DATA
//

// uses 'data' object defined in the attached snippet file
var result = data.map(function(location){
	var Title = location.Title;
  var Location = location.Location;
	return location.Event.map(function(event){
  	return {
    	Title: Title,
      Location: Location,
      Type: event.Type,
      Bookings: event.Bookings
    }
  });
});

console.log(result); // result is an array of arrays


//
// MERGE/FLATTEN MULTIDIMENSIONAL ARRAYS -- RESULTING ARRAY
//

// method 1
var merged = [].concat.apply([], result);
console.log(merged); //merged in an array of locations

// method 2
var reduced = result.reduce(function(prev, curr) {
  return prev.concat(curr);
});
console.log(reduced);

// method 3 (ES6)
var spreaded = [].concat(...result);
console.log(spreaded);