Array.prototype.flatMap()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

El método flatMap() primero mapea cada elemento usando una función de mapeo, luego aplana el resultado en una nueva matriz. Es idéntico a un map seguido de un flatten (en-US)de profundidad 1, pero flatMap es a menudo útil y la fusión de ambos en un método es ligeramente más eficiente.

Pruébalo

La fuente de este ejemplo interactivo, se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.

Sintaxis

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])

Parámetros

callback

Función que produce un elemento de la nueva matriz, tomando tres argumentos:

currentValue

El elemento actual que se procesa en la matriz.

indexOpcional

El índice del elemento actual que se procesa en la matriz.

arrayOpcional

La matriz map fue llamada.

thisArgOpcional

Valor para usar como this al ejecutar callback.

Valor de retorno

Una nueva matriz con cada elemento es el resultado de la función de devolución de llamada y se aplana a una profundidad de 1.

Descripción

Ver Array.prototype.map() para una descripción detallada de la función de devolución de llamada. El método flatMap es idéntico a map seguido de una llamada a flatten (en-US) de profundidad 1.

Ejemplos

map y flatMap

js
var arr1 = [1, 2, 3, 4];

arr1.map((x) => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]

// solo un nivel es aplanado
arr1.flatMap((x) => [[x * 2]]);
// [[2], [4], [6], [8]]

//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]

Alternativa

reduce y concat

js
var arr1 = [1, 2, 3, 4];

arr1.flatMap((x) => [x * 2]);
// es equivalente a
arr1.reduce((acc, x) => acc.concat([x * 2]), []);
// [2, 4, 6, 8]

//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]

Polyfill

Este polyfill necesita Array.prototype.flat polyfill

js
if (!Array.prototype.flatMap) {
  Array.prototype.flatMap = function () {
    return Array.prototype.map.apply(this, arguments).flat(1);
  };
}

Especificaciones

Specification
ECMAScript Language Specification
# sec-array.prototype.flatmap

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también