ES10: flat-map y trimStart-trimEnd

Hola Chic@s 😃
ES10:

• Flat-map

// flat
const array = [1,1,2,3,4, [1,3,5,6,[1,2,4]]];
console.log(array.flat(3));

// flatmap
const array2 = [1,2,3,4,5];
console.log(array2.flatMap(v => [v, v *2]));

• TrimStart-trimEnd

const hello = "       Hello World!   ";
console.log(hello.trimStart());
console.log(hello.trimEnd());

Flat

El método flat de los array permite aplanar los elementos internos de un array permitiendo eliminar array internos.

const numbers = [1, 2, 3, 4, [5, 6, [7, 8, 9]]];

numbers.flat(1) // [ 1, 2, 3, 4, 5, 6, [ 7, 8, 9 ] ]
numbers.flat(2) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Si se quiere aplanar todo el arreglo sin pasar una profundidad exacta, se puede hacer uso de Infinity.

const numbers = [1, 2, 3, 4, [5, 6, [7, 8, 9]]];

numbers.flat(Infinity) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Flat-map

Permite aplanar los elementos de un array en un nivel, pasando un función que mapeara cada elemento del nuevo array.

const numbers2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

numbers2.flatMap(num => num * 2). // [ 2, 4, 6, 8, 10, 12, 14, 16, 18 ]

Este método no se podría utilizar para array que tengan más de un nivel de profundidad. Sin embargo, se pueden combinar los métodos flat y map para tener un mismo resultado.

const numbers = [1, 2, 3, 4, [5, 6, [7, 8, 9]]];

numbers2.flat(Infinity).map(num => num * 2) // [ 2, 4, 6, 8, 10, 12, 14, 16, 18 ]

No me gusta como explica Oscar, primer curso que veo con él y de verdad no me da a entender, usa muchas palabras repetidas, no usa las palabras correctas para definir un elemento (funciones, métodos, etc). Definitivamente de un 100% le doy 20% en sus explicaciones, el 80% se los doy al sistema de comentarios, allí entiendo la clase.

Les recomiendo You. Es como google pero dedicado a developers. Allí pueden buscar todo lo relacionado a la programación.

Actualmente, se puede usar el método .trim() el cual hará el trimStart y el trimEnd

Para el primer ejemplo del flat solo es necesario dos niveles, es decir

console.log(array.flat(2));

No veo el punto de este curso. Entiendo que el objetivo es mostrarnos los cambios que ocurrieron a partir de ES6, pero se ven de una forma extremadamente superficial y mal explicada, el 80% de los cambios no me quedan ni mínimamente claros solo con ver las clases, hace falta buscar por otros lados o leer los comentarios para que mínimamente se entienda.
Repito, entiendo que la idea es ir viendo los cambios, pero; ¿No sería mejor ir viéndolos de manera mas orgánica a lo largo de los cursos junto con alguna aplicación medianamente real? Verlos de forma suelta y sin una utilidad practica hace que sean fácilmente olvidables y por lo tanto hace que este curso carezca de sentido para mi.
No se si es culpa del profesor que no supo plantear suficientemente bien las clases o quien es el responsable, pero claramente este curso no esta a la altura de los demás que hemos visto hasta ahora.
Espero que el siguiente curso de la ruta, que también será con Oscar sea mas claro y organizado.

Termine de entender la funcionalidad con estas pruebas. el map es porque por cada elemento ejecuta una funcion, y el flat, porque si la funcion retorna un array, entonces lo aplana en integra al principal

const array2 = [1,2,3,4,5];
console.log(array2.flatMap( v => v * 2));
console.log(array2.flatMap( v => [v, v * 2]));

para aclarar el ejemplo de flatMap del profe, como su nombre lo indica flatMap, lo que hará es aplanar el array y mapearlo, osea pasar por cada valar, esto nos podría servir para hacer validaciones o operaciones sea el caso,

[Input]
const array2 = [1, 2, 3, 4 ,5];
console.log(array2.flatMap(value => [ value * 3]));

[Output]
[ 3, 6, 9, 12, 15 ]

en este ejemplo se esta pasando que cada valor que mapee sera value
pero a cada value lo estamos multiplicando por otro valor en este caso 3
lo que pasara es que va a agarrar cada elemento del
array y lo multiplicara por este… espero les sirva agradezco que me den feedback

Como dato extra, si usamos el metodo

trim()

Éste nos elimina tanto los espacios a la derecha como a la izquierda 💪🏼

Hellooo, I come here to the comments section because I see a lot of disappointment in the explanations of this class. I am no stranger to this and I also think there is a lack of theory that is being taken for granted, but I also understand this course is intended to show us the new features that ECMAScript has developed since the sixth version rather than a deeper explanation about them. Anyways, as I am taking all the JavaScript courses from the learning route, I have been developed a Github repository where you can find some more detailed explanations about the topics

https://github.com/Zaprovic/Javascript

I hope someone sees this comment and give a shot to my project Never stop learning guys!

El flatMap del array dos, me recordó a las sucesiones numéricas:

Otra manera de probarlo 😃

const hello = '           Hello World!       ';
console.log(`[${hello.trimStart()}]`);
console.log(`[${hello.trimEnd()}]`);

// flat => aplana las matrices por profundidad
const array = [1, 2, 3, 4, [1, 2, 3, 4, [1, 2, 3, 4]]];
console.log(array.flat(2));

// flatMap() => Mapea y aplana, devuelve un array con los valores aplanados y da la opción de ejecutar un callback por cada uno de los elementos
const array2 = [1, 2, 3, 4, 5];
console.log(array2.flatMap((v) => [v, v * 2]));

¡Hola tú!
¿Un poco perdido con flat-map? Te recomiendo esta clase, Nicolas me parece que tiene una gran habilidad para la enseñanza.

Importante.
Flat por defecto solo aplana un nivel. Por este motivo recibe como parámetro el número de veces que va a aplanar.

.flat(3)
<code> 

Ejemplo:

const array = [1, 2, 3, 4, [5, 6, 7, 8, [9, 10, 11, 12, 13]]];

const aplanadora = array.flat(2);
console.log(aplanadora);
<code> 

Este sería el resultado:

const array = [1, 2, 3, 4, 5, 6, 7, 8, [9, 10, 11, 12, 13]];
<code> 

Esto se debe a que solo le dijimos que aplanara hasta el segundo nivel.

trim() , elimina los espacios del comienzo y final

const nombre = '             manuel               '

console.log(nombre.trim())

Esto es excelente porque, (aun no sé) hay métodos como el join() que en ciertos entornos de desarrollo retornan un array dentro de otro array. :C o aveces algunos json al hacer la conversion a array, estos retornan como un array anidado y para no andar accediendo manualmente con el método de entrar al array. [0], este método es bueno justamente para combatir esa manipulación de objetos avanzada

ES10: flatMap y trimStart-trimEnd

En ECMAScript 2019 (también conocido como ES10), se introdujeron varias características nuevas en JavaScript. Dos de estas características son “Mapa Plano” (flatMap) y los métodos trimStart y trimEnd. Aquí te explico brevemente cada una de ellas:

1. Mapa Plano (flatMap):
flatMap es una función que se agregó a los arreglos en ES10. Combina los pasos de mapeo y aplanamiento en un solo paso. La función flatMap toma una función como argumento y esta función se aplica a cada elemento del arreglo. Luego, los resultados se aplanan en un solo arreglo. Esto es útil cuando deseas transformar cada elemento del arreglo y luego unir los resultados en un solo arreglo.

Ejemplo:

const numeros = [1, 2, 3, 4];

const duplicados = numeros.flatMap(numero => [numero, numero]);

console.log(duplicados); // Resultado: [1, 1, 2, 2, 3, 3, 4, 4]

2. Métodos trimStart y trimEnd:
Los métodos trimStart y trimEnd se agregaron a las cadenas de texto en ES10. trimStart elimina los espacios en blanco y caracteres de salto de línea al comienzo de una cadena, mientras que trimEnd hace lo mismo al final de la cadena.

Ejemplo:

const texto = "   ¡Hola, mundo!   ";

console.log(texto.trimStart()); // Resultado: "¡Hola, mundo!   "
console.log(texto.trimEnd());   // Resultado: "   ¡Hola, mundo!"

Estos métodos son útiles para limpiar cadenas de texto que pueden contener espacios en blanco adicionales al principio o al final.

Estas características de ES10 hacen que trabajar con arreglos y cadenas de texto sea más conveniente y expresivo al permitir operaciones más concisas y efectivas.

Explicado de manera más sencilla

Veamos estas características de JavaScript de manera más sencilla:

1. Mapa Plano (flatMap):
Imagina que tienes una caja llena de bloques de colores diferentes. Quieres tomar cada bloque, hacer una copia de él y poner ambas copias en una fila. Al final, tendrás una fila de bloques duplicados. Eso es lo que hace flatMap.

En términos de programación, si tienes una lista de números y usas flatMap con una regla, tomará cada número, aplicará la regla y luego pondrá los resultados juntos en una lista.

Por ejemplo, si tienes [1, 2, 3] y aplicas una regla que duplica cada número, obtendrás [1, 1, 2, 2, 3, 3]. Es como si hubieras duplicado cada número y luego los pusieras en fila.

2. Métodos trimStart y trimEnd:
Imagina que estás escribiendo una carta y accidentalmente dejas demasiados espacios al principio o al final de la página. Parece un poco desordenado, ¿verdad? trimStart y trimEnd son como una goma de borrar mágica que borra esos espacios extras al principio o al final de una frase.

En términos de programación, si tienes una palabra o una oración con espacios extra al principio o al final, puedes usar trimStart para borrar los espacios al principio, y trimEnd para borrar los espacios al final. Esto te ayuda a mantener las cosas ordenadas y limpias.

En resumen, estas características en JavaScript (Mapa Plano y trimStart/trimEnd) son como trucos útiles que te permiten hacer cosas interesantes con listas de números y cadenas de texto. Hacen que el código sea más simple y te ayudan a mantener tus datos ordenados y sin cosas innecesarias.

Espero sea de utilidad. 👨‍💻

las v => [v, v donde salieron o para que sirve

Oscar me cae bien, pero… explica MUY MAL. el simplemente coloco la funcion, mostro el resultado, Nada de que paso detras de camara, para que se usa esa funcion, para que me puede ser util… en verda, pesima explicacion! Definitivamente, si no fuera porque se que otros cursos, lo dan otros teacher, con mas entusiamos y que detallan mas y abundan mas, pues… Platzi no valdria nada, por gente como Oscar.
Y que conste, amo platzi!, profesores como Diego, el gran JuanDC motivan, y ayudan a entender mejor las cosas… pero es que oscar, debe de mejorar!

También pueden hacer esto…
INPUT :

const array2 = [1,2,3,4,5];
console.log(array2.flatMap(value => [[value * 2],[value]]));

OUTPUT :

[
  [ 2 ],  [ 1 ],
  [ 4 ],  [ 2 ],
  [ 6 ],  [ 3 ],
  [ 8 ],  [ 4 ],
  [ 10 ], [ 5 ]
]

Array.prototype.flat()

flat que en ingles significa “plano” es el nombre del método en el prototipo del objeto Array que regresa una versión “aplanada” del arreglo en cuestión. Si no le pasamos ningún argumento se asume una profundidad de 1. De lo contrario si cualquier numero entero positivo es pasado como argumento este usa como la profundidad máxima a iterar a la hora de “aplanar” el arreglo.

Es decir, si tenemos el siguiente arreglo y una profundidad de 1

let a = [1, [2, 3], [4, 5], 6]

El arreglo “aplanado” sería

[1, 2, 3, 4, 5, 6]

Si tenemos el siguiente arreglo y una profundidad de 2

let b = [1, [2, [3]], [4, [5, 6]]]

El arreglo aplanado sería otra vez:

[1, 2, 3, 4, 5, 6]

Ahora para comprender mejor veamos como se comporta el método:

console.log(a.flat());
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

console.log(b.flat(2));
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

console.log(b.flat())
> Array(5) [1, 2, [3], 4, [5, 6]]

Noten como afecta la profundidad cuando no pasamos el argumento adecuado. Pero ¿qué pasa si quisiéramos aplanar un arreglo cuya profundidad desconocemos? Bien JavaScript introduce la constante Infinity, de modo que podemos hacer esto:

let arreglo = [1, ...., [190736], 190737];

arreglo.flat(Infinity);

Array.prototype.flatMap()

flatMap() es un método disponible en el prototipo del Array que tiene el mismo efecto que usar el método map() seguido inmediatamente del método flat() con una profundidad por defecto de 1. En otras palabras, flatMap(), mapea cada valor a un nuevo valor y el resultado es aplanado a una profundidad máxima de 1.

let transporte = ["avión", "auto", "barco"];
let tipoTransporte = ["aéreo", "terrestre", "marítimo"];

let transportesMapeados = transporte.map(
        (transporte, indice) => [transporte, tipoTransporte[indice]]
    );

let transportesMapeadosYAplanados = transporte.flatMap(
        (transporte, indice) => [transporte, tipoTransporte[indice]]
    );

Al correr estos ejemplos podemos ver claramente la diferencia principal entre uno y otro. El resultado de imprimir la variable transportesMapeados sería el siguiente:

[
  [ "avión", "aéreo" ]
  [ "auto", "terrestre" ]
  [ "barco", "marítimo" ]
]

Entonces si la definición de flatMap dice que al resultado de un map se le aplica flat de profundidad 1, al imprimir transportesMapeadosYAplanados tendríamos como resultado el siguiente arreglo:

[ "avión", "aéreo", "auto", "terrestre", "barco", "marítimo" ]

Compatibilidad

El soporte para estos dos métodos ya esta disponible en las ultimas versiones de los navegadores:

• Chrome 69+
• Firefox 12+
• Safari 12+

información extra: el método trim elimina los espacios libres en el inicio y el final, puede que ahorra mas líneas de codigo usar este metodo😀

const greeting = '   Hello world!   ';

console.log(greeting);
// Expected output: "   Hello world!   ";

console.log(greeting.trim());
// Expected output: "Hello world!";

→Apuntes 🍎←
flat

Se usa el metodo integrado .flat para aplanar objetos,arrays y trabajar de mejor manera con los datos.

const array = [1,2,4,2,1,2,5,[1,2,3,5,3,[1,2,4]]];

console.log(array.flat(3));
//output: 
[
  1, 2, 4, 2, 1, 2,
  5, 1, 2, 3, 5, 3,
  1, 2, 4
]

flatmap

aplica una función a cada uno de los valores uno por uno de un array.

const array2 = [1,2,4,6,4,2]
console.log(array2.flatMap(v =>(v, v * 3)));

//ouput: [ 3, 6, 12, 18, 12, 6 ]

TrimStart y trimEnd 🚀

El trimStart() método de String values elimina el espacio en blanco desde el principio de esta cadena y devuelve una nueva cadena, sin modificar la cadena original. trimLeft() es un alias de este método.

const hello = '              Estudio en platzi         ';
let hello1 = hello.trimStart();
console.log(hello1.trimEnd());

Edit : Regalame un like por el resumen 😃

trimStart = es un método que se usa para eliminar espacios de la parte inicial;
trimEnd = se usa para lo mismo pero elimina espacios de la parte final;

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd

Resumen a punta de código:

const hello = '  Hello world  '
console.log(hello.trimStart()) // 'Hello world  '
console.log(hello.trimEnd()) // '  Hello world'
console.log(hello.trim()) // 'Hello world'

const matriz = [1, 1, 2, 3, 4, [1, 3, 5, 6, [1, 2, 4]]]
console.log(matriz.flat(0))
// OUT - [ 1, 1, 2, 3, 4, [ 1, 3, 5, 6, [ 1, 2, 4 ] ] ]
console.log(matriz.flat(1))
// OUT - [ 1, 1, 2, 3, 4, 1, 3, 5, 6, [ 1, 2, 4 ] ]
console.log(matriz.flat(Infinity))
// OUT - [ 1, 1, 2, 3, 4, 1, 3, 5, 6, 1, 2, 4 ]

const numbers = [1,2, 3, 4]
numbers.flatMap(number => [number *2]) 
// [2, 4, 6, 8]

me estan pareciendo terribles las explicaciones

📝 Archivos del Proyecto 📝

Pasos 📌

 
• Vamos a VS Code, dentro de la carpeta src, se crea la carpeta es10.
• Dentro de la carpeta es10, crear el archivo llamado: 00-flat-map.js
◦ El código queda:

//Compilar: seleccionar el código + click derecho + Run Code

// flat
//Ejercicio #1

const array = [1, 1, 2, 3, 4 [1, 3, 5, 6 [1, 2, 4]]];
console.log(array.flat(3));

/*output: sale undeined porque no se separó con comas al comenzar los otros arreglos
[ 1, 1, 2, 3, undefined ]
*/

//Ejercicio #2

const array2 = [1, 1, 2, 3, 4, [1, 3, 5, 6, [1, 2, 4]]];
console.log(array2.flat(3));

/*output: sale undeined porque no se separó con comas al comenzar los otros arreglos
[
1, 1, 2, 3, 4,
1, 3, 5, 6, 1,
2, 4
]
*/

// flatmap
//Ejercicio #3

const array3 = [1, 2, 3, 4, 5];
console.log(array3.flatMap(v => [v, v * 2]));

/*output:
[
1, 2, 2, 4, 3,
6, 4, 8, 5, 10
]
*/

 
• Dentro de la carpeta es10, crear el archivo llamado: 01-trimstart-trimend.js
◦ El código queda:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1
const hello = ' Hello World! ';
console.log(hello.trimStart());

/*output: eliminó los espacios de inicio
Hello World! 
*/

console.log(hello.trimEnd());

/*output: eliminó los espacios después de la frase
Hello World!
*/

adiosarraysinfinitos aslñdkñlsadk

Mi resumen:

Probablemente sea un dato menor, pero en el primer ejemplo que se da para aplicar el metodo .flat() , el array SI, tiene una profundidad de 3, pero con que le pases 2 como parametro esta bien.
Piensalo como, si le pones 1, solo se lo aplicara a los arrays que se encuentre en el primer nivel, si le pones dos, a los que se encuentren en el segundo lugar, etcetera

Un ejemplo

let numbers = [1, 2, 3, [4, 5, 6, [7, 8, 9]]]; // Este array se puede aplanar hasta el nivl 2
console.log(numbers.flat(0)); // no aplana [ 1, 2, 3, [ 4, 5, 6, [ 7, 8, 9 ] ] ]
console.log(numbers.flat(1)); // aplana 1 nivel [ 1, 2, 3, 4, 5, 6, [ 7, 8, 9 ] ]
console.log(numbers.flat(2)); // aplana 2 niveles [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

24/35 ES10: flat-map y trimStart-trimEnd
Los métodos flat y flatMap para realizar aplanamiento de arrays, es decir, convertir un array de arrays en una sola dimensión. El método flat recibe como argumentos la profundidad del aplanamiento y retorna un nuevo array con los cambios sin modificar el array original. El método flatMap es una combianción de los métodos map y flat, realiza la iteración de los elementos del array y después los aplana e una sola profundidad.

Tres métodos para eliminar espacios en blanco de un string: trim, trimStart o trimLeft y trimEnd o trimRight. El método trim elimina los espacios al inicio y trimEnd o trimRight elimina los espacios al final.

Ejemplos:

• Aplanamiento de arrays:
  • El array [1,2,[3,4],5,6] se puede aplanar con el método flat sin argumentos y retorna [1,2,3,4,5,6].
  • El array [1, 2, [3, 4, [5, 6]]] se puede aplanar con el método flat sin argumentos y retorna [1, 2, 3, 4, [5, 6]].
  • El array [1, 2, [3, 4, [5, 6]]] se puede aplanar con el método flat con un argumento de 2 y retorna [1, 2, 3, 4, 5, 6].
  • El array [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]] se puede aplanar con el método flat con un argumento de Infinity y retorna [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].
  • El método flatMap se puede utilizar para iterar y aplanar los elementos de un array al mismo tiempo, por ejemplo, se puede utilizar el método flatMap para dividir una cadena en palabras y aplanarlas en una sola dimensión.
• Eliminación de espacios en blanco de un string
  • La cadena " hola " se puede eliminar los espacios en blanco al inicio y al final utilizando el método trim y retorna “hola”.
  • La cadena " hola " se puede eliminar los espacios en blanco al inicio utilizando el método trimStart o trimLeft y retorna "hola ".
  • La cadena " hola " se puede eliminar los espacios en blanco al final utilizando el método trimEnd o trimRight y retorna " hola".

Según entendí, flat convierte un arreglo de arreglos anidados en una matriz con n filas

FlatMap para que se entienda un poquito mas su concepto

// flatmap
const array2 = [1, 2, 3, 4];
const flatMapArray = array2.flatMap(v => [v * 2]);
console.log(array2); // [ 1, 2, 3, 4 ]
console.log(flatMapArray); // [ 2, 4, 6, 8 ]

Un ejemplo para entender mas graficamente los trim

const cadena ='          Cadena sin higienizar                ';
const resultado=[
    [cadena,cadena.length],
    [cadena.trimStart(),cadena.trimStart().length],
    [cadena.trimStart().trimEnd(),cadena.trimStart().trimEnd.length]];;
console.table(resultado);

Muestra en consola una tabla con las longitudes despues de cada uso sin alterar el string

Al flat se le puede poner como argumento Infinity y quitará todos los sub-arrays

He notado que las clases estan muy basadas en w3schools,

Un Website que yo consideraba el Wikipedia de algunos lenguajes ya que funciona pero hay mas o menos.

https://www.w3schools.com/js/js_2019.asp#mark_trim_start

Ni modo veo los videos, W3schools y Firefox

Pq este curso lo termino o lo termino, aunque no termino encantando

Apunte En Notion

LINK: https://pogolo.notion.site/24-ES10-flat-map-y-trimStart-trimEnd-f911d0f89b8b40f28ad9fa7476a60153

Algunos ejemplos de los métodos flat y flatMap

//Método flat
//Tenemos un arreglo de 3 dimensiones.
const array = [1,1,2,3,4, [1,3,5,6, [1,2,4]]];

const array2 = array.flat(3); //El método flat aplana la profundidad del arreglo, generando uno nuevo de una sola dimensión llamado array2. 

//Ahora ya podemos acceder a cada uno de sus elementos facilmente,por ejemplo con un for...
for (let i in array2){
  console.log(i);
}

//El método flatmap
//Tenenos inicialmente un arreglo plano en una dimensión
const array3 = [1,2,3,4,5];

//Con el método flatMap, podemos modificar o paras una función que modifique o haga alguna operación con los valores de éste arreglo, devolviendo un arreglo con éstos valores modificados.
//Ejemplo 1, modificamos los valores del arreglo inicial multiplicandolos por 2
const array4 = array3.flatMap(v => [v*2]);
console.log(array4);

//Ejemplo 2. MOdificamos el arreglo inicial dividiendo los valores en 2 y creando un nuevo arreglo con los valores modificados

const array5 = array3.flatMap(v => [v/2]);
console.log(array5);

//Ejemplo 3. Modificamos el arreglo sumandole 2  cada elemento, pero creamos un arreglo con la convinación de los dos arreglos, el inicial y el modificado.
const array6 = array3.flatMap(v => [v, v + 2]);
console.log(array6);

En realidad el nivel de profundidad para aplanar este array o matriz seria 2, es decir, con flat(2) es suficiente.

**trimStart-trimEnd
**
trim elimina los espacios al inicio .trimstart() o al final .trimend() o a ambos lados .trim()

Ejemplo:

const hello = '                  Hola Mundo!!                  ';
console.log(hello.trimStart());
console.log(hello.trimEnd());
console.log(hello.trim());
respuesta de consola: 
Hola Mundo!!               ;
               Hola Mundo!!;
 Hola Mundo!!;

const hello = '        Hello!        ';
// Recorta los espacios de un string al inicio
console.log(hello.trimStart());
// Recorta los espacios de un string al final
console.log(hello.trimEnd());