💥 Array.flat y Array.flatMap ¡Domina estos nuevos métodos de JavaScript!

[@jimmymontenegro8517]

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.

[@rosack8631]

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

[@juancbusta]

Tampoco había usado el flatMap, mil gracias por la explicación sencilla y clara como siempre. Creo que si tiene aplicaciones!

[@elmilitar143]

eres de esos sensei que lanzan tricks de Javascript buenisimos, que utilidad tus videos

[@midulive]

¡Gracias Anderson!

[@jaimemartin1932]

Me encantan estos truquitos. Y por fin tengo claro que es lo que hacen los métodos. Muchas gracias!

[@pollo_cesar_]

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….

[@AR7editing]

Grande midu, todo un crack, aprendiendo contigo como siempre, espero conseguir mi trabajo pronto💕💕

[@randalljosue]

Se agresivo aplicando. Yo llevo un año sin conseguir un trabajo

[@AR7editing]

@@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

[@randalljosue]

@@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ú.

[@armandocaceres4030]

encontraste trabajo ? cuéntanos, amigo. suerte

[@AR7editing]

@@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

[@Ricardo-3]

Genio midu tu manera de enseñar es única, aprendo y de paso me hacer estallar de risa

[@midulive]

Gracias! 🤗

[@stevenskl5294]

Pero que util lo que buscaba de hace tiempos.

[@thekingwars]

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

[@brandonfernandezmejia1430]

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

[@azaliaruizc.9316]

Woow no sabía que existiera esa opción de flat, muchas gracias 🤗

[@midulive]

De nada 😊

[@alucherdi]

[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

[@jorgecanalesZ]

Justo lo que ocupaba. Gracias/tenkiu

[@icabanah]

¡Esto es una joya! Muchas gracias maestro :3

[@suchox]

esos metodos raros de javascript jajjaj.. excelente Midu, un genio!

[@fabianmorales3084]

Saludos desde Colombia

[@jhonalexandersosagallego7838]

No conocía estos dos métodos para trabajar con array en JavaScript, muchas gracias midu por este tipo de contenido para seguir aprendiendo.

Excelente.. gracias por tus aportes.. y por el tiempo y la dedicación a enseñar

[@diegobenitez3827]

Genial!!, que theme estas utilizando?

[@faviocabral2675]

Excelente video midudev!!

[@elseisen2196]

Ojalá hubiera visto esto en el grado, me habría quedado de perlas el football manager

[@dolapex]

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

[@scarfacethebest]

Qué raro. Yo también hice un test y tardó mucho menos el filter + map.

[@01radamanthys]

[1,2,3,4,5,6].reduce((a, b) => {if(b % 2) a.push(b*2); return a}, []) obtienes el mismo resultado

[@ivanpadillamol]

Buen dia master excelente video gracias, una consulta que herramientas utilizas para esa prueba de escritorio o resultados en linea gracia

[@elhombremalo441]

runjs

[@ricko13]

Te amo midu 🤍

[@gemamartin5161]

Muchas gracias por estos vídeos.

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

[@josealexanderperaltaramos2189]

Correcto

[@danielpineda3824]

// 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]

[@itachileiva]

IDOLOOOOOOOOOOOOOOOOOOOO

[@midulive]

🤗 Gracias, Alvaro!!!

[@itachileiva]

@@midulive justo necesitaba hacer lo que hace flat y vi el video ajajaj increible

[@gacoDevOps]

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]]]]

[@CarlosGutierrez-pn5fb]

Pero hermano, porqué hacerlo de esta manera tan tardada de leer y analizar cuando ya tienes un metodo que te resuelve el problema?

[@gacoDevOps]

@@CarlosGutierrez-pn5fb muestre pues su solución y aprendemos de los que saben

[@mmfernandezf]

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.

[@midulive]

Gracias 🤗

[@faviocabral2675]

Consulta hay algún generador crud en javascript ya sea angular handlebars react svelte o node js

[@manuelcobasguerra5688]

que genio

[@SanchayanPackiyanathan]

Gracias amigo !!! super!!!

[@AndresSaaN]

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

[@ernestorh6110]

Genial!

[@killerzucca2]

Midu como haces para poner el valor de las funciones a un lado ? Es una extensión ?

[@strelli2]

interesantes yo para reducir usaba reduce con concat, pero me parece mejor el flat

[@megasirob]

¿Qué editor usas como te dice lo que imprime directamente?

[@jorgefernandez559]

runJs

[@desmontandolaweb]

Alguien sabe que extensión esta utilizando o que es lo que esta haciendo para ver la consola en tiempo real a la derecha???

[@jfbj1792]

¿Cuál es el editor de código que utilizas?

[@juanpasten6077]

También me interesa saber, además del uso de lo qu sale a la derecha, como un tester en vivo

[@romanrizo9590]

RunJS

[@jfbj1792]

@@romanrizo9590 Se agradece 😁

[@jhoansebastian1358]

Grande midu

[@toyama14]

Que trucazo, se me explotó el cerebro con el n % 2 === 0 ? [ ] : n * 2 en el flatMap . Una locura jajajajaj

[@phreakphreak]

grande midu, no useis reduce xD

[@martincarp4671]

Por que no vi este video hace dos dias..

[@bawual9223]

Hola Midu, que plugins ocupas para que el código se refleje de manera inmediata al costado derecho ? saludos

[@Rastafa]

se llama RunJS

[@xayaLB]

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

[@eidiazcas]

siempre es mejor filtrar primero para evitar hacer operaciones innecesarias

[@kenierfernandez5938]

cual es el temas de visual estudio code que esta usando

[@01radamanthys]

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

[@OriiaC]

@0:56 como haces para que te salga el array resultado en la parte derecha?

[@victorfernandogilcalderon6242]

Ora loco :v ta chido

[@diazhernan]

Buenass, el discord es privado?, porque no encuentro el link para entrar en los videos

[@elweonweandolaweafome]

el .flat se parece mucho a lo que hace el operador spread

[@edwinromanh]

Cómo se llama el snippet que muestra los resultados del código en la derecha?

[@onepizzatcg]

existe algo como el flat para objetos ?

[@eliasfnegrete]

Super, menos lineas

[@hannsmp2827]

```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

[@mtejera]

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() 😅

[@HELLOWORLDLATINOAMERICA]

Bro, como véz los resultados al lado derecho?

[@miguelangelochoarivera566]

alguien que sepa la combinacion de teclas para el simbolo de no es igual , como en el primer ejemplo

[@Migueltico]

Eso es un font por ejemplo el FIRA CODE que transforma el !== en el símbolo que quiere

[@CristianHB]

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.

[@albertomanuelgomez5934]

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.

[@JuanReyes-i1o]

Como se escribe en el teclado normal Esas tipo de flechas y las tres líneas.??

[@AndresCLopez]

El video empieza en el minuto 11:00 de nada.

[@agustinflores614]

Antes: trucos GTA Ahora: trucos js

[@juanmanuelchico]

Alguien sabe que editor usa para tener la consola ahi al lado y que valla ejecutando el js?

[@jhosuapachon]

Se llama Run.js

[@TheEmanuel15x]

como haces para tener asi el vb? con la consola en tiempo real :|

[@ruanmiga]

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.

[@royemerson97]

Ah órale, pa’ saber

[@Weagle1337]

Entonces esto hace el metodo de Tensor2d de tensorflow.js? 7:40

[@rodrigomarsan1143]

En realidad es un mapFlap, jajajaja

[@JS-ih4qc]

No entendi el flat map al final

[@primossmodakids2420]

buena información pero lástima que des tantos rodeos para decir algo, que tedio!!! 🙄

[@jeycode9180]

Está copiando javascript a Java o qué 😄, me alegro me alegro, lo copia y lo mejora jajajaj

[@panchopure]

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..

[@panchopure]

Tener Todo en la misma Linea no te alarga el pene (tanto)

[@ElPolemista]

Array nuevo y forEach en lugar de triquis difíciles de leer.

[@midulive]

No es ningún “truqui”, es un método nativo. Es más fácil de leer que hacerlo a mano.

[@brandonjoaocastillo7490]

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.

[@midulive]

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.