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

El método flat() crea una nueva matriz con todos los elementos de sub-array concatenados recursivamente hasta la profundidad especificada.

Sintaxis

var newArray = arr.flat([depth]);

Parámetros

depth Optional
El nivel de profundidad que especifica qué tan profunda debe aplanarse una estructura de matriz anidada. El valor predeterminado es 1.

Valor de retorno

Una nueva matriz con los elementos de sub-matriz concatenados en ella.

Ejemplos

Aplanar matrices anidadas

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

Aplanamiento y huecos de matriz

El método de aplanar elimina las ranuras vacías en las matrices:

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

Alternativa

reduce y concat

var arr1 = [1, 2, [3, 4]];
arr1.flat();

//aplanar una matriz de nivel único
arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4]

 

//para permitir el aplanamiento a nivel profundo use recursión con reduce y concat
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];

function flattenDeep(arr1) {
   return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}

flattenDeep(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

 

//aplanamiento profundo no recursivo usando un stack
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatten(input) {
  const stack = [...input];
  const res = [];
  while (stack.length) {
    // elimina ultimo valor del stack
    const next = stack.pop();
    if (Array.isArray(next)) {
      // agrega de nuevo los items al array, sin modificar la entrada original
      stack.push(...next);
    } else {
      res.push(next);
    }
  }
  //invierte para restaurar el orden de entrada
  return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

Especificaciones

Especificación Estado Comentario
Array.prototype.flat proposal Candidato (3)  

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Soporte básico
Experimental
Chrome Soporte completo 69Edge Sin soporte NoFirefox Soporte completo 62IE Sin soporte NoOpera Soporte completo 56Safari Soporte completo 12WebView Android Soporte completo 69Chrome Android Soporte completo 69Edge Mobile Sin soporte NoFirefox Android Soporte completo 62Opera Android Soporte completo 56Safari iOS Soporte completo 12Samsung Internet Android Sin soporte Nonodejs Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: BubuAnabelas, fscholz, lajaso
Última actualización por: BubuAnabelas,