💥 Array.flat y Array.flatMap ¡Domina estos nuevos métodos de JavaScript!
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- ¡Hoy vas a aprender dos métodos nuevos de Array que seguramente no conocías! 👨🏫
El método flat() crea una nueva matriz con todos los elementos de sub-array concatenados recursivamente hasta la profundidad especificada.
El método flatMap() primero mapea cada elemento usando una función de mapeo, luego aplana el resultado en una nueva matriz.
▶ No te pierdas más directos en: / midudev
![POLYCAT - ข้อความรูปยิ้ม [Music Video]](http://i.ytimg.com/vi/lBhIgPGCgbI/mqdefault.jpg)
Gracias Midu, he aprendido bastantes cosas, incluso más "básicas" que los métodos, que de por si, están en la documentación. Cosas como ir acostumbrándome a las => al irlas viendo en acción tantas veces. Ya sabes, te quiero.
Muy buen video, en solo 14 min he "aprendido"/conocido cuatro métodos nuevos (para mi XD) de Array que me parecen muy prácticos. 10/10
Grande midu, todo un crack, aprendiendo contigo como siempre, espero conseguir mi trabajo pronto💕💕
Se agresivo aplicando. Yo llevo un año sin conseguir un trabajo
@@randalljosue es que aun me falta aprender react :(, se html, css y Javascript pero aquí en latam piden muchísimo react y ando preparandome en ello
@@kasdal6220 Tengo mucho conocimiento. Creo que es porque simplemente es la cantidad de gente aplicando al puesto es muy grande. Más de 20 o 40 personas. Claro ser elegido entre esas cantidad es difícil. Siempre habrá alguien que le caiga mejor a otro o que haya otro que sepa un poco más que tú.
encontraste trabajo ? cuéntanos, amigo. suerte
@@armandocaceres4030 si, postule como en 30 partes hice varias pruebas y quede en una y rechace 2,actualmente estoy ganando 1200$ pero me dijeron que el. próximo mes subo a 2000$ por el desempeño, estoy trabajando remoto para una fintech chilena desde Venezuela
Me encantan estos truquitos. Y por fin tengo claro que es lo que hacen los métodos. Muchas gracias!
Tampoco había usado el flatMap, mil gracias por la explicación sencilla y clara como siempre. Creo que si tiene aplicaciones!
eres de esos sensei que lanzan tricks de Javascript buenisimos, que utilidad tus videos
¡Gracias Anderson!
Genio midu tu manera de enseñar es única, aprendo y de paso me hacer estallar de risa
Gracias! 🤗
Woow no sabía que existiera esa opción de flat, muchas gracias 🤗
De nada 😊
Para la gente que no crea que sea de utilidad si lo es, es normal que tu de repente tengas que trabajar con 3 o 4 arrays para convertirlo en uno solo, de manera plana y hacer mucha brujeria o magia negra en el proceso, esto es magia con esto pones dichos arrays de forma desastrosa en el principal y simplemente lo aplanas y lo envías al cliente o al servidor. Magic
Si por ejemplo yo lo uso en el trabajo por qué obtengo un objeto con la estructura [{ordenId: 20, details: [{id: 20}]}], en caso de querer tener todos los details en un solo array. Tendría que usar ya sea el map junto con el flat o el flatmap
Pero que util lo que buscaba de hace tiempos.
flatMap o chain y otros nombres es para desarrollar en programación funcional, el array en JavaScript es un functors en si (ahora monad). Es bueno que JavaScript apunte a lo que fue, programación funcional, esto simplifica bastante el uso de librerías que aplican el functors List. Los casos de uso justamente son esos, encadenar functors del mismo tipo ( o convertir otros a array) para poder combinar métodos en ellos. En mi opinión la mejor es el primer caso, para este ejemplo cumple con functionalidad pura y más expresiva, por eso sucede lo del final….
[1, 2, 3, 4, 5, 6].reduce((a, v) => (v & 1 ? a.push(v * 2) : 0, a), [])
También reduce lo haría con un solo "comando" o ciclo, y sin ir creando arreglos
Saludos desde Colombia
esos metodos raros de javascript jajjaj.. excelente Midu, un genio!
Excelente.. gracias por tus aportes.. y por el tiempo y la dedicación a enseñar
Alguien sabe que extensión esta utilizando o que es lo que esta haciendo para ver la consola en tiempo real a la derecha???
Ojalá hubiera visto esto en el grado, me habría quedado de perlas el football manager
¡Esto es una joya! Muchas gracias maestro :3
No conocía estos dos métodos para trabajar con array en JavaScript, muchas gracias midu por este tipo de contenido para seguir aprendiendo.
Te amo midu 🤍
Justo lo que ocupaba. Gracias/tenkiu
hola Midu... esta genial tu contenido. Pero creo que ya hay muchos ejemplos trabajando con arrays o listados con numeros o strings.. sería mejor encontrar mas ejemplos con arreglos o listados de objetos... recientemente he tenido problemas para resolver temas con arrays de objetos... considero que hay muy pocos casos de la vida real con arrays simples de numeros o strings.. gracias por ver mi comentario
Correcto
Muchas gracias por estos vídeos.
// EJEMPLO 1 - Aplanar Array Multi-dimensional usando .flat(Infinity) y .flat(Number.MAX_SAFE_INTEGER)
// .flat(0) imprime exactamente el mismo array SIN aplanarlo:
const bidimensional = [1, 2, [3, 4], [5], 6];
console.log(bidimensional); // (5) [ 1, 2, [ 3, 4 ], [ 5 ], 6 ]
console.log(bidimensional.flat(0)); // (5) [ 1, 2, [ 3, 4 ], [ 5 ], 6 ]
/* Si uso .flat() ó flat(1) da el mismo resultado
cuando el array tiene 2 dimensiones: */
console.log(bidimensional.flat()); // (6) [1, 2, 3, 4, 5, 6]
console.log(bidimensional.flat(1)); // (6) [1, 2, 3, 4, 5, 6]
/* El problema es q .flat() y flat(1)
NO funcionan cuando el array tiene mas de 2 dimensiones */
const multidimensional = [1, 2, [3, 4, [5, 6], 7, 8]];
console.log(multidimensional); // (3) [ 1, 2, [ 3, 4, [ 5, 6 ], 7, 8 ] ]
console.log(multidimensional.flat()); // (7) [ 1, 2, 3, 4, [ 5, 6 ], 7, 8 ]
console.log(multidimensional.flat(1)); // (7) [ 1, 2, 3, 4, [ 5, 6 ], 7, 8 ]
// Para aplanar arrays con cualquier numero de dimensiones, la solucion es:
console.log(multidimensional.flat(Infinity)); // (8) [1, 2, 3, 4, 5, 6, 7, 8]
console.log(multidimensional.flat(Number.MAX_SAFE_INTEGER)); // (8) [1, 2, 3, 4, 5, 6, 7, 8]
/*
---------------------------
EJEMPLO 2
Problema:
1) Crear un array con numeros
2) Eliminar los numeros pares de un array
para q solamente queden los numeros impares
(filtrar array)
3) Multiplicar por 2 los numeros impares
Solucion:
Hay varias formas de solucionar esto */
const numeros = [1, 2, 3, 4, 5, 6];
console.log(numeros);
// (6) [1, 2, 3, 4, 5, 6]
// .filter() y .map()
let imparMultiplicar = numeros.filter((x) => x % 2 !== 0) // Guardar los numeros impares
.map((x) => x * 2); // Multiplicar por 2 los numeros impares
console.log(imparMultiplicar);
// (3) [2, 6, 10]
/* .map() significa:
- if (x % 2 === 0) { return false; } else { return x * 2 }
- Multiplicar por 2 los numeros impares
- Reemplazar por false los numeros pares
.filter() Elimina los elementos q son false,
es decir, los numeros pares */
imparMultiplicar = numeros.map((x) => (x % 2 === 0 ? false : x * 2)) // (6) [ 2, false, 6, false, 10, false ]
.filter((x) => x !== false);
console.log(imparMultiplicar);
// (3) [2, 6, 10]
// .reduce() (MALA PRACTICA)
imparMultiplicar = numeros.reduce((acumulador, elemento) => {
if (elemento % 2 !== 0) {
return [...acumulador, elemento * 2];
}
return acumulador;
}, []);
console.log(imparMultiplicar);
// (3) [2, 6, 10]
console.log('---');
/* .flat(Infinity) y .flatMap()...
1) Funciona con arrays anidados con cualquier numero de dimensiones.
2) Itera una sola vez.
3) Convierte a true los numeros que son pares
y a false los que son impares.
4) Crea mas arrays:
Primero crea arrays anidados y despues aplana el array
5) Multiplica por dos los numeros impares */
imparMultiplicar = numeros.flat(Infinity)
.flatMap((x) => (x % 2 === 0 ? [] : [x * 2])); // if (x % 2 === 0) { return [] } else { return [x * 2] }
console.log(imparMultiplicar);
// (3) [2, 6, 10]
Excelente video midudev!!
IDOLOOOOOOOOOOOOOOOOOOOO
🤗 Gracias, Alvaro!!!
@@midulive justo necesitaba hacer lo que hace flat y vi el video ajajaj increible
Consulta hay algún generador crud en javascript ya sea angular handlebars react svelte o node js
Muy buen Tip ! de hecho hice un test de ejecucion y con el flatMap tarda mucho menos en ejecución
filter + Map: 0.021240234375 ms
FlatMap: 0.0146484375 ms
Qué raro. Yo también hice un test y tardó mucho menos el filter + map.
Muy buen video. Es incrible lo poco que se usa sobre todo flatMap y como hay montones de code llenos de filters y foreach con funciones y mas funciones dentro.
Gracias 🤗
Gracias amigo !!! super!!!
[1,2,3,4,5,6].reduce((a, b) => {if(b % 2) a.push(b*2); return a}, []) obtienes el mismo resultado
Hey viejo @midulive gracias por tu contenido, dame una mano estoy tratando de hacer lo mismo pero con expresiones regulares aquí dejo mi código agradezco tus recomendaciones para hacerlo mas dinámico
function Aplanar(str){
let re = /([])|([\[\]])/g, coma = /,+/
let total = JSON.stringify(str).replace(re,'')
return JSON.parse('['+total.replace(coma, ",")+']')
}
Aplanar[1, [2], [3, [[4]]]]
Pero hermano, porqué hacerlo de esta manera tan tardada de leer y analizar cuando ya tienes un metodo que te resuelve el problema?
@@CarlosGutierrez-pn5fb muestre pues su solución y aprendemos de los que saben
Buen dia master excelente video gracias, una consulta que herramientas utilizas para esa prueba de escritorio o resultados en linea gracia
runjs
Ya me imagino a algún cafre (como yo) jugando con los nueves en el flat como con el z-index 😂
Lo del flatmap según lo vi disponible en babel me dio por implementarlo en un proyecto que tenía, no hay nada como ir practicando para aplicarlo poco a poco antes de que ya sea norma y nos pille por sorpresa en el código de un compañero, o peor aún de terceros. Aunque siempre tengas la docu, si no estás familiarizado es posible que te líes al tener que hacer un cambio
que genio
Hola gente.
alguien me podría decir que programa usa para ir viendo los resultados a la derecha y como lo hace.
Yo uso Windows, no Linux.
cual es el temas de visual estudio code que esta usando
¿Cuál es el editor de código que utilizas?
También me interesa saber, además del uso de lo qu sale a la derecha, como un tester en vivo
RunJS
@@romanrizo9590 Se agradece 😁
grande midu, no useis reduce xD
alguien que sepa la combinacion de teclas para el simbolo de no es igual , como en el primer ejemplo
Eso es un font por ejemplo el FIRA CODE que transforma el !== en el símbolo que quiere
No hay ninguna combinación de teclas para eso, es simplemente una fuente que tiene ligatures (ligaduras), por ejemplo Fira Code, JetBrains Mono, Victor Mono, estableces la fuente y ya. En vs code hay que activar en la configuración las ligaduras de la fuente y eso te pone esos caracteres especiales y bonitos.
Como se escribe en el teclado normal
Esas tipo de flechas y las tres líneas.??
Estaba buscando la forma de obtener el index de varios elementos en un array que cumplan cierta condición pero el finIndex solo devuelve el primero que coincida y ahora con el flatMap lo he conseguido
Genial!!, que theme estas utilizando?
Midu como haces para poner el valor de las funciones a un lado ? Es una extensión ?
interesantes yo para reducir usaba reduce con concat, pero me parece mejor el flat
muchas gracias Midu por el video, pero no me queda claro como usar el flatmap en caso de que haya 4 niveles dentro del array de objetos principal
Genial!
¿Qué editor usas como te dice lo que imprime directamente?
runJs
Grande midu
Buenass, el discord es privado?, porque no encuentro el link para entrar en los videos
Por que no vi este video hace dos dias..
Cómo se llama el snippet que muestra los resultados del código en la derecha?
@0:56 como haces para que te salga el array resultado en la parte derecha?
Alguien sabe que editor usa para tener la consola ahi al lado y que valla ejecutando el js?
Se llama Run.js
```js
/**
* @param { (value: string, index: number, array: string[] )=>[]} callback
*/
Array.prototype.filterMap = function (callback){
let arr = [ ];
for(let i = 0; i< this.length; i++){
let res = callback(this[i], i, this);
if(Array.isArray(res) && res[0])
arr.push(res[1]);
}
return arr
};
let save = [1, 2, 3, 4, 5, 6].filterMap((x)=>[ x % 2 == 0, 2*x]);
console.log(save);
```
se me ocurrió algo asi, pero el flat esta bueno owo
Hola Midu, que plugins ocupas para que el código se refleje de manera inmediata al costado derecho ? saludos
se llama RunJS
Que trucazo, se me explotó el cerebro con el n % 2 === 0 ? [ ] : n * 2 en el flatMap . Una locura jajajajaj
como haces para tener asi el vb? con la consola en tiempo real :|
el .flat se parece mucho a lo que hace el operador spread
Yo no sabía que existía flatMap() así que siempre hacía lo siguiente [1,2,3,4,5,6].map(n => n%2 === 0? [] : n*2).flat() 😅
Ora loco :v ta chido
existe algo como el flat para objetos ?
Bro, como véz los resultados al lado derecho?
Super, menos lineas
No puedes explicar una función cuando ni tú la entiendes algo que me di cuenta a lo último del vídeo lo que hace el flatMap por detrás es hacer un map y luego el array devuelto aplanarlo con un flat es simple y es la peor de todas ya que no había necesidad de usar un flat solo porque tú lo vez más corto significa que funcione mejor en términos de rendimiento.
Ah órale, pa’ saber
Antes: trucos GTA
Ahora: trucos js
El video empieza en el minuto 11:00 de nada.
No entendi el flat map al final
Entonces esto hace el metodo de Tensor2d de tensorflow.js? 7:40
No entiendo la gracia, el reduce es mas conocido
si no me importa la eficiencia filter y map.
Si tiene qué ser eficiente un for/while
Sino un reduce tampoco esta Mal.
Y Como ultimo usaria esa opcion. No es legible ni eficiente ni tan reconocida Como el reduce.
Perdon por el hate..
Tener Todo en la misma Linea no te alarga el pene (tanto)
En realidad es un mapFlap, jajajaja
buena información pero lástima que des tantos rodeos para decir algo, que tedio!!! 🙄
muy rebuscado, siento que el que lo lea se va a quedar anonadado, prefiero el mas legible filter y map a menos que sea un array muy laro, pero si es muy largo es mejor usar un for creo yo.
Y yo siento que no has entendido el uso de flat y flatMap porque las alternativas que dices serían mucho más complejas para aplanar arrays.
Está copiando javascript a Java o qué 😄, me alegro me alegro, lo copia y lo mejora jajajaj
Array nuevo y forEach en lugar de triquis difíciles de leer.
No es ningún “truqui”, es un método nativo. Es más fácil de leer que hacerlo a mano.