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.
@@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 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
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
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
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]]]]
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
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.
Buenass, el discord es privado?, porque no encuentro el link para entrar en los videos
3 роки тому+3
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
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.
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
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
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.
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..
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.
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
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.
Tampoco había usado el flatMap, mil gracias por la explicación sencilla y clara como siempre. Creo que si tiene aplicaciones!
Me encantan estos truquitos. Y por fin tengo claro que es lo que hacen los métodos. Muchas gracias!
eres de esos sensei que lanzan tricks de Javascript buenisimos, que utilidad tus videos
¡Gracias Anderson!
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
@@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
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
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….
Pero que util lo que buscaba de hace tiempos.
esos metodos raros de javascript jajjaj.. excelente Midu, un genio!
¡Esto es una joya! Muchas gracias maestro :3
Excelente.. gracias por tus aportes.. y por el tiempo y la dedicación a enseñar
Justo lo que ocupaba. Gracias/tenkiu
[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
No conocía estos dos métodos para trabajar con array en JavaScript, muchas gracias midu por este tipo de contenido para seguir aprendiendo.
Ojalá hubiera visto esto en el grado, me habría quedado de perlas el football manager
// 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!!
Muchas gracias por estos vídeos.
Alguien sabe que extensión esta utilizando o que es lo que esta haciendo para ver la consola en tiempo real a la derecha???
@0:56 como haces para que te salga el array resultado en la parte derecha?
Te amo midu 🤍
[1,2,3,4,5,6].reduce((a, b) => {if(b % 2) a.push(b*2); return a}, []) obtienes el mismo resultado
Consulta hay algún generador crud en javascript ya sea angular handlebars react svelte o node js
Gracias amigo !!! super!!!
Genial!!, que theme estas utilizando?
El video empieza en el minuto 11:00 de nada.
¿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 😁
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
cual es el temas de visual estudio code que esta usando
Buen dia master excelente video gracias, una consulta que herramientas utilizas para esa prueba de escritorio o resultados en linea gracia
runjs
Midu como haces para poner el valor de las funciones a un lado ? Es una extensión ?
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.
¿Qué editor usas como te dice lo que imprime directamente?
runJs
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 🤗
Buenass, el discord es privado?, porque no encuentro el link para entrar en los videos
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
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.
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.
Que trucazo, se me explotó el cerebro con el n % 2 === 0 ? [ ] : n * 2 en el flatMap . Una locura jajajajaj
Cómo se llama el snippet que muestra los resultados del código en la derecha?
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
grande midu, no useis reduce xD
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
siempre es mejor filtrar primero para evitar hacer operaciones innecesarias
Como se escribe en el teclado normal
Esas tipo de flechas y las tres líneas.??
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
IDOLOOOOOOOOOOOOOOOOOOOO
🤗 Gracias, Alvaro!!!
@@midulive justo necesitaba hacer lo que hace flat y vi el video ajajaj increible
Bro, como véz los resultados al lado derecho?
como haces para tener asi el vb? con la consola en tiempo real :|
Grande midu
el .flat se parece mucho a lo que hace el operador spread
interesantes yo para reducir usaba reduce con concat, pero me parece mejor el flat
Alguien sabe que editor usa para tener la consola ahi al lado y que valla ejecutando el js?
Se llama Run.js
Genial!
Por que no vi este video hace dos dias..
Hola Midu, que plugins ocupas para que el código se refleje de manera inmediata al costado derecho ? saludos
se llama RunJS
existe algo como el flat para objetos ?
que genio
Antes: trucos GTA
Ahora: trucos js
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
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() 😅
```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
Super, menos lineas
No entendi el flat map al final
Ora loco :v ta chido
Entonces esto hace el metodo de Tensor2d de tensorflow.js? 7:40
En realidad es un mapFlap, jajajaja
buena información pero lástima que des tantos rodeos para decir algo, que tedio!!! 🙄
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)
Está copiando javascript a Java o qué 😄, me alegro me alegro, lo copia y lo mejora jajajaj
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.
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.