Cómo simplificar tu código con map(), reduce() y filter() en JavaScript

He visto mucho código de sentencias entre 8 y 10 lineas para realizar un bucle, solo para resolver una tarea cualquiera en la que Array.reduce podría hacerlo en una sola línea.

¡Empecemos!

1. Eliminar duplicados de un array

Bueno, este es el único que no tiene nada que ver con map/reduce/filter, pero es tan compacto que es difícil no ponerlo en la lista. Nos permite eliminar números/textos duplicados de una Array.

— Ejemplo

const valores = [3, 1, 3, 5, 2, 4, 4, 4];
const unicosValores = [...new Set(values)];

console.log(unicosValores);
// [3, 1, 5, 2, 4]

2. Búsqueda simple (distingue entre mayúsculas y minúsculas)

El método filter() crea un nuevo array con todos los elementos que pasan la prueba implementada por la función.

const users = [
  { id: 11, name: 'Adam', age: 23, group: 'editor' },
  { id: 47, name: 'GodoFredo', age: 22, group: 'admin' },
  { id: 85, name: 'William', age: 34, group: 'editor' },
  { id: 97, name: 'Oliver', age: 28, group: 'admin' }
];

let res = users.filter(it => it.name.includes('god'));

console.log(res);
// []

3. Una búsqueda simple (no distingue entre mayúsculas y minúsculas)

const users = [
  { id: 11, name: 'Adam', age: 23, group: 'editor' },
  { id: 47, name: 'GodoFredo', age: 22, group: 'admin' },
  { id: 85, name: 'William', age: 34, group: 'editor' },
  { id: 97, name: 'Oliver', age: 28, group: 'admin' }
];

let res = users.filter(it => new RegExp('god', 'i').test(it.name));

console.log(res);
// [ { id: 47, name: 'GodoFredo', age: 22, group: 'admin' } ]

4. Compruebe si alguno de los usuarios tiene derechos de administrador

El método some() comprueba si al menos un elemento del array cumple con la condición implementada por la función proporcionada.

const users = [
  { id: 11, name: 'Adam', age: 23, group: 'editor' },
  { id: 47, name: 'GodoFredo', age: 22, group: 'admin' },
  { id: 85, name: 'William', age: 34, group: 'editor' },
  { id: 97, name: 'Oliver', age: 28, group: 'admin' }
];

const hasAdmin = users.some(user => user.group === 'admin');

console.log(hasAdmin)
// true

5. Concatenar un conjunto de Arrays

El resultado de la primera iteración es igual a : [....[], ....[1, 2, 3]] significa que se transforma en [1, 2, 3] — este valor lo proporcionamos como un 'acc' en la segunda iteración y así sucesivamente.

const animals = [['?', '?'], ['?', '?']];

let flat = animals.reduce((acc, it) => [...acc, ...it]);

console.log(flat);
// ["?", "?", "?", "?"]

Tenga en cuenta que el uso de la sintaxis extendida o sintáxis spread  dentro de un reduce() no es bueno para el rendimiento.

— Aquí hay otro ejemplo más corto sin reduce:

let flat = [].concat.apply([], animals);

— También existe un metodo especifico para realizar la concatenación de forma fácil y practico con Array.flat, estará disponible en JavaScript ES10/ES2019

const animals = [['?', '?'], ['?', '?']];

const flat = animals.flat();

console.log(flat);

// ['?', '?', '?', '?']

6. Crear un objeto que contenga la frecuencia de la clave especificada

Agrupemos y contemos la propiedad 'age' para cada elemento del array:

const users = [
  { id: 11, name: 'Adam', age: 23, group: 'editor' },
  { id: 47, name: 'John', age: 28, group: 'admin' },
  { id: 85, name: 'William', age: 34, group: 'editor' },
  { id: 97, name: 'Oliver', age: 28, group: 'admin' }
];
const groupByAge = users.reduce((acc, it) => {
  acc[it.age] = acc[it.age] + 1 || 1;
  return acc;
}, {});

console.log(groupByAge);
// { '23': 1, '28': 2, '34': 1 }

7. Crear un array de grados Fahrenheit a partir de un array con grados Celsius

const celsius = [-15, -5, 0, 10, 16, 20, 24, 32]
const fahrenheit = celsius.map(t => t * 1.8 + 32);

console.log(fahrenheit);
// [5, 23, 32, 50, 60.8, 68, 75.2, 89.6]

8. Codificar un objeto en una cadena de consulta

const params = {lat: 45, lng: 6, alt: 1000};
const queryString = Object.entries(params).map(p => `${encodeURIComponent(p[0])}=${encodeURIComponent(p[1])}`).join('&');

console.log(queryString);
// "lat=45&lng=6&alt=1000"

9. Unión (A ∪ B) de arrays

const arrA = [1, 4, 3, 2];
const arrB = [5, 2, 6, 7, 1];

let union = [...new Set([...arrA, ...arrB])];

console.log(union);
// [1, 4, 3, 2, 5, 6, 7]

10. Intersección (A ∩ B) de arrays

const arrA = [1, 4, 3, 2];
const arrB = [5, 2, 6, 7, 1];

let Intersection  = arrA.filter(it => arrB.includes(it));

console.log(Intersection );
// [1, 2]

¡Eso es todo! — Gracias por leer ❤️

Si tienes alguna pregunta o comentario, házmelo saber en los comentarios de abajo.