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.