No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Regálate acceso ilimitado a todos los cursos por 1 año a precio especial de Navidad 🎄

Antes: $199

Currency
$149/año
regístrate

termina en:

16D
14H
9M
3S

ES10: flat-map y trimStart-trimEnd

27/38
Recursos

La siguiente versión de ECMAScript fue publicada en 2019. A continuación aprenderás sobre aplanamiento de arrays y eliminar espacios en blanco de un string.

Qué es el aplanamiento de arrays

El aplanamiento consiste en transformar un array de arrays a una sola dimensión. Los métodos flat y flatMap permitirán realizar el aplanamiento.

Método flat

El método flat devuelve un array donde los sub-arrays han sido propagados hasta una profundidad especificada.

Este método es inmutable, es decir, retorna un nuevo array con los cambios y no cambia el array original.

Este método recibe un argumento:

  • La profundidad del aplanamiento, por defecto, tiene un valor de 1.

Si se desea aplanar todos los sub-arrays en una sola dimensión, utiliza el valor de Infinity.

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

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

const array3 = [1, 2, [3, 4, [5, 6]]]
const result3 = array3.flat(2) 
result3// [1, 2, 3, 4, 5, 6]

const array4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
const result4 = array4.flat(Infinity) 
result4// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Método flatMap

El método flatMap es una combinación de los métodos map y flat. Primero realiza la iteración de los elementos del array (como si fuera map), y después los aplana en una sola profundidad (como si fuera flat).

Este método es inmutable, es decir, retorna un nuevo array con los cambios y no cambia el array original.

Este método recibe los mismos argumentos que el método map.

const strings = ["Nunca pares", "de Aprender"]
strings.map(string => string.split(" ")) 
// [ [ 'Nunca', 'pares' ], [ 'de', 'Aprender' ] ]
strings.flatMap(string => string.split(" ")) 
// [ 'Nunca', 'pares', 'de', 'Aprender' ]

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

// Cuidado, primero hace el map y luego el flat
const numbers2 = [1,[2,3], 4, 5]
numbers2.flatMap(number => [number *2]) 
// [ 2, NaN, 8, 10 ]
// * Recuerda: NaN = No a Number

Eliminar espacios en blanco de un string

Existen tres métodos para eliminar espacios en blanco de un string:

  • El método trim elimina los espacios en blanco al inicio y al final.
  • El método trimStart o trimLeft elimina los espacios al inicio.
  • El método trimEnd o trimRight elimina los espacios al final.
const saludo = "      hola      "
const result1 = saludo.trim()
const result2 = saludo.trimStart()
const result3 = saludo.trimEnd()

result1 // 'hola'
result2 // 'hola      '
result3 // '      hola'

Contribución creada por Andrés Guano (Platzi Contributor).

Aportes 16

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Hola [email protected] 😃
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());

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));

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 ]

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

Otra manera de probarlo 😃

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

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

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

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.

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