Métodos de arrays: Flat y FlatMap
Clase 44 de 99 • 30 días de JavaScript
Contenido del curso
Danelia Sanchez Sanchez
student•
hace 3 años
Clase 44 de 99 • 30 días de JavaScript
Contenido del curso
Array.prototype.flat()
El método Array.prototype.flat() permite combinar varios arreglos en un solo arreglo plano (sin niveles adicionales de anidamiento). Este método es útil cuando se trabaja con arreglos multidimensionales y se desea obtener una sola secuencia de elementos en un solo arreglo.
Este método puede aceptar un argumento opcional, que indica la profundidad de anidamiento máxima hasta la cual se deben aplanar los arreglos. Si no se proporciona un argumento, el método aplanará los arreglos hasta el nivel más profundo.
A continuación se muestra un ejemplo de código que utiliza el método Array.prototype.flat() para aplanar un arreglo multidimensional:
const multiDimensionalArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; const flatArray = multiDimensionalArray.flat(); console.log(flatArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
En este ejemplo, el arreglo multidimensional multiDimensionalArray se aplanó utilizando el método Array.prototype.flat() y se guardó en la variable flatArray. Luego, se imprime en la consola el valor de flatArray y se puede ver que se trata de un arreglo plano con los elementos del arreglo multidimensional combinados en una sola secuencia.
Además, también es posible aplanar un arreglo multidimensional hasta una profundidad específica utilizando el argumento opcional. Por ejemplo:
const multiDimensionalArray = [[1, 2, 3], [4, [5, 6]], [7, 8, 9]]; const flatArray = multiDimensionalArray.flat(1); console.log(flatArray); // [1, 2, 3, 4, [5, 6], 7, 8, 9]
En este ejemplo, el arreglo multidimensional multiDimensionalArray se aplanó hasta una profundidad de anidamiento de 1 utilizando el método Array.prototype.flat(1). Esto significa que solo se aplanaron los arreglos de nivel más externo, por lo que el arreglo dentro del arreglo [5, 6] se mantuvo intacto.
Array.prototype.flatMap()
El método Array.prototype.flatMap() combina las funcionalidades de los métodos Array.prototype.map() y Array.prototype.flat() en uno solo. Para transformar cada elemento del arreglo, luego aplana el resultado hasta obtener un único arreglo con los elementos resultantes.
Este método se aplica a un objeto Array y toma como argumento una función que se aplicará a cada elemento del arreglo. La función aplicada a cada elemento devuelve un nuevo arreglo, y flatMap aplana este arreglo resultante en un único arreglo.
Ejemplo de cómo se puede usar flatMap:
const numbers = [1, 2, 3, 4]; const result = numbers.flatMap(x => [x, x * 2]); console.log(result); // Output: [1, 2, 2, 4, 3, 6, 4, 8]
En este ejemplo, la función x => [x, x * 2] se aplica a cada elemento del arreglo numbers. Cada elemento del arreglo numbers es multiplicado por 2 y los dos valores se almacenan en un nuevo arreglo. Luego, el método flatMap aplana todos los arreglos resultantes en un único arreglo.
Además de transformar y aplanar arreglos, flatMap también puede ser útil para eliminar elementos null o undefined de un arreglo. Aquí hay un ejemplo de cómo se puede hacer esto:
const values = [1, 2, 3, null, 4, undefined, 5]; const result = values.flatMap(x => x); console.log(result); // Output: [1, 2, 3, 4, 5]
Al igual que el método flat() este nos puede ayudar a trabajar con arrays bidimensionales
Ejemplo
const bidimensionalArray = [[1, 2, 3], [4, 5, 6]]; const result = bidimensionalArray.flatMap(x => x); console.log(result); // Output: [1, 2, 3, 4, 5, 6]
El método flatMap aplana cada subarreglo dentro del arreglo bidimensionalArray en un único arreglo resultante. De esta manera, podemos trabajar con arreglos bidimensionales de manera más fácil y eficiente.
Puedes profundizar en estos temas viendo el Curso de Manipulación de Arrays en JavaScript
Danelia Sanchez Sanchez
Luis Castro
Carlos Andrade
Luis Gomero
Elmer González
Luis Gomero
Jose Carlos Machado
Solo una aclaración: el argumento opcional por defecto del método flat() para indicar el nivel de profundidad es 1. Si se quiere aplanar un arreglo anidado hasta el nivel más profundo, hay que pasar el valor Infinity:
const multiDimensionalArray = [[1, 2, 3], [4, [5, 6]], [7, [8, [9]]]]; const flatArray = multiDimensionalArray.flat(Infinity); console.log(flatArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
Flat y FlatMap:
. El método flat() devuelve una nueva matriz con todos los elementos de una matriz anidada concatenados de manera recursiva hasta la profundidad especificada. Es decir, si tienes un array anidado y quieres "aplanarlo" para obtener un array simple, puedes usar flat() para hacerlo.
const nestedArray = [[1, 2], [3, 4], [5, 6]]; const flatArray = nestedArray.flat(); console.log(flatArray); // [1, 2, 3, 4, 5, 6]
El método flatMap() es similar a map(), pero primero "aplanar" la matriz usando flat(). Luego, llama a una función de devolución de llamada para cada elemento del array aplanado y devuelve una nueva matriz con los resultados.
const numbers = [1, 2, 3]; const doubledAndSimplified = numbers.flatMap(x => [x * 2]); console.log(doubledAndSimplified); // [2, 4, 6]
44/89 Métodos de arrays: Flat y FlatMap Array.prototype.flat()
Es una función de JavaScript que se utiliza para aplanar arreglos multidimensionales. Permite combinar varios arreglos en un solo arreglo plano sin niveles adicionales de anidamiento.
Este método es especialmente útil cuando trabaja con arreglos mutidimensionales y se desea obtener única secuencia de elementos en un solo arreglo. Se puede utilizar el método sin argumentos, en cuyo caso se aplana todos los arreglos hasta el nivel más profundo.
También se puede proporcionar un argumento opcional al método para indicar la profundidad de anidamiento máxima hasta la cual se debe aplanar los arreglos. Esto significa que solo se aplanarán los arreglos del nivel más externo y se mantendrán intactos los arreglos internos que se encuentran por debajo de la profundidad especificada.
Array.prototype.flatMap()
Este método combina las funcionalidades de los métodos Array.prototype.map() y Array.prototype.flat() en uno solo. Este método se aplica a un objeto Array y toma como argumento una función que se aplicará a cada elemento del arreglo. La función aplicada a cada elemento devuelve un nuevo arreglo, y flatMap aplana este arreglo resultante en un único arreglo.
Es útil para eliminar elementos null o undefined de un arreglo. También podemos usar faltMap para trabajar con arrays bidimensionales, ya que aplana cada subarreglo dentro del arreglo en un único arreglo resultante. En resumen, flatMap es una herramienta útil para transformar y manipular arreglos de manera más fácil y eficiente.
Intente hacer este ejemplo, pero no logro ver que se eliminen los elementos null or undefined. Alguno filtro adicional?
const values = [1, 2, 3, null, 4, undefined, 5]; const result = values.flatMap(x => x); console.log(result); // Output: [1, 2, 3, 4, 5]
Se resuelve utilizando el operador ternario anidado, por qué en el ejemplo solo se está devolviendo el mismo valor de cada celda del array.
const values = [1, 2, 3, null, 4, undefined, 5]; const result = values.flatMap(x => x === null ? [] : x === undefined ? [] : x); console.log(result); // [1, 2, 3, 4, 5]
Vale, tb se podria hacer asi?
const result = values.flatMap(x => x === null || x === undefined ? [] : x);
El método flatmap() sólo tiene 1 nivel de profundidad, así como lo tiene flat() por defecto.... :)