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

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

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

[@juancbusta]

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

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

[@snooopyman]

encontraste trabajo ? cuéntanos, amigo. suerte

[@AR7editing]

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

[@jaimemartin1932]

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

[@elmilitar143]

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

[@midulive]

¡Gracias Anderson!

[@Ricardo-3]

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

[@midulive]

Gracias! 🤗

[@azaliaruizc.9316]

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

[@midulive]

De nada 😊

[@jorgecanalesZ]

Justo lo que ocupaba. Gracias/tenkiu

[@stevenskl5294]

Pero que util lo que buscaba de hace tiempos.

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

[@icabanah]

¡Esto es una joya! Muchas gracias maestro :3

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

[@fabianmorales3084]

Saludos desde Colombia

[@suchox]

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

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

[@gemamartin5161]

Muchas gracias por estos vídeos.

[@ricko13]

Te amo midu 🤍

[@faviocabral2675]

Excelente video midudev!!

[@diegobenitez3827]

Genial!!, que theme estas utilizando?

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

[@elseisen2196]

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

[@faviocabral2675]

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

[@SanchayanPackiyanathan]

Gracias amigo !!! super!!!

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

[@OriiaC]

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

[@killerzucca2]

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

[@megasirob]

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

[@jorgefernandez559]

runJs

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

[@ivanpadillamol]

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

[@elhombremalo441]

runjs

[@phreakphreak]

grande midu, no useis reduce xD

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

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

[@diazhernan]

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

[@manuelcobasguerra5688]

que genio

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

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

[@kenierfernandez5938]

cual es el temas de visual estudio code que esta usando

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

[@bawual9223]

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

[@Rastafa]

se llama RunJS

[@edwinromanh]

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

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

[@alvii977]

IDOLOOOOOOOOOOOOOOOOOOOO

[@midulive]

🤗 Gracias, Alvaro!!!

[@alvii977]

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

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

[@ernestorh6110]

Genial!

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

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

[@toyama14]

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

[@strelli2]

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

[@HELLOWORLDLATINOAMERICA]

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

[@JuanReyes-i1o]

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

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

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

[@TheEmanuel15x]

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

[@onepizzatcg]

existe algo como el flat para objetos ?

[@jhoansebastian1358]

Grande midu

[@juanmanuelchico]

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

[@jhosuapachon]

Se llama Run.js

[@martincarp4671]

Por que no vi este video hace dos dias..

[@01radamanthys]

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

[@eidiazcas]

siempre es mejor filtrar primero para evitar hacer operaciones innecesarias

[@elweonweandolaweafome]

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

[@AndresCLopez]

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

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

[@victorfernandogilcalderon6242]

Ora loco :v ta chido

[@agustinflores614]

Antes: trucos GTA Ahora: trucos js

[@JS-ih4qc]

No entendi el flat map al final

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

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

[@primossmodakids2420]

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

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

[@rodrigomarsan1143]

En realidad es un mapFlap, jajajaja

[@jeycode9180]

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

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

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