JavaScript flatMap()Método
Objeto JavaScript ArrayEjemplo
Usa una función de mapeo para mapear cada elemento y luego comprime el resultado en un nuevo array:
Pruébalo »
Definición y uso
El método flatMap() primero usa una función de mapeo para mapear cada elemento y luego comprime el resultado en un nuevo array. Es casi idéntico a map seguido de flat con un valor de profundidad de 1, pero flatMap suele ser un poco más eficiente al fusionarse en un solo método.
El método flatMap() devuelve un nuevo array, donde cada elemento es el resultado de la función de devolución de llamada (callback) y la profundidad de estructura (depth) es 1.
Soporte del navegador
Los números en la tabla indican la primera versión del navegador compatible con este método.
| Método | |||||
|---|---|---|---|---|---|
| flatMap() | 45.0 | 12.0 | 32.0 | 9 | 25.0 |
Sintaxis
// 箭头函数
flatMap((currentValue) => { /* … */ } )
flatMap((currentValue, index) => { /* … */ } )
flatMap((currentValue, index, array) => { /* … */ } )
// 回调函数
flatMap(callbackFn)
flatMap(callbackFn, thisArg)
// 行内回调函数
flatMap(function(currentValue) { /* … */ })
flatMap(function(currentValue, index) { /* … */ })
flatMap(function(currentValue, index, array){ /* … */ })
flatMap(function(currentValue, index, array) { /* … */ }, thisArg)
Parámetros
| Parámetros | Descripción |
| callback | Una función que puede generar elementos en un nuevo array; puede recibir tres parámetros:
|
| thisArg | Opcional. El valor de this utilizado al ejecutar la función callback. |
Detalles técnicos
| Valor de retorno: | Array. |
| Versión de JavaScript: | ECMAScript 6 |
Más ejemplos
map() y flatMap()
Ejemplo
arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
Aunque el código anterior parece funcionar tanto con map como con flatMap, esto solo muestra cómo usar flatMap.
Por lo tanto, para demostrar mejor el efecto de flatMap, a continuación dividiremos un array que contiene varias frases en un nuevo array formado por palabras individuales.
Ejemplo
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
Nota: la longitud de la lista de salida puede diferir de la longitud de la lista de entrada.
Agregar o eliminar algunos elementos durante un map()
flatMap se puede usar para agregar o eliminar elementos durante un map (es decir, modificar la cantidad de elementos). En otras palabras, te permite recorrer muchos elementos y convertirlos en otros elementos (procesándolos por separado), en lugar de ser siempre uno a uno. En este sentido, su función es similar a la opuesta de filter. Simplemente devuelve un array de 1 elemento para conservar ese elemento, un array de varios elementos para agregar elementos, o un array de 0 elementos para eliminar ese elemento.
Ejemplo
let a = [5, 4, -3, 20, 17, -33, -4, 18]
// |\ \ x | | \ x x |
// [4,1, 4, 20, 16, 1, 18]
a.flatMap( (n) =>
(n < 0) ? [] :
(n % 2 == 0) ? [n] :
[n-1, 1]
)
// expected output: [4, 1, 4, 20, 16, 1, 18]
Alternativas
reduce() y concat()
Ejemplo
arr.flatMap(x => [x, x * 2]);
// is equivalent to
arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
// [1, 2, 2, 4, 3, 6, 4, 8]
Ten en cuenta que esto es ineficiente y debe evitarse en arrays grandes: en cada iteración, crea un nuevo array temporal que debe ser recolectado por el recolector de basura, y copia los elementos del array acumulador actual a un nuevo array, en lugar de agregar los nuevos elementos al array existente.
Otras extensiones