La méthode flat() permet de créer un nouveau tableau contenant les éléments des sous-tableaux du tableau passé en argument, qui sont concaténés récursivement pour atteindre une profondeur donnée.

Syntaxe

var nouveauTableau = monTableau.flat([profondeur]);

Paramètres

profondeur Facultatif
Le niveau de profondeur en termes d'imbrication de tableau. Autrement dit, jusqu'à quel niveau d'imbrication un tableau imbriqué doit il être aplati. La valeur par défaut est 1.

Valeur de retour

Un nouveau tableau qui contient la concaténation des éléments des sous-tableaux du tableau passé en argument.

Exemples

Aplatir des tableaux imbriqués

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]

Aplatir et combler les trous

La méthode flat() permet également de retirer les « trous » d'un tableau :

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

Équivalent

reduce et concat

var arr1 = [1, 2, [3, 4]];
arr1.flat();
// pour un tableau avec un seul niveau de profondeur, c'est équivalent à
arr1.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]
// avec la décomposition et les compositions flechées, on peut écrire : 
const plat = arr => [].concat(...arr);


// Pour gérer plusieurs niveaux, on pourra utiliser
// une méthode récursive avec reduce et concat

var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatDeep(arr1) {
   return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatDeep(val)) : acc.concat(val), []);
};
flatDeep(arr1);
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

// Version non récursive utilisant une pile
function flatNonRec(input) {
  const stack = [...input];
  const res = [];
  while (stack.length) {
    // On sort une valeur de la pile
    const next = stack.pop();
    if (Array.isArray(next)) {
      // On place les éléments qui sont des tableaux dans
      // la pile sans modifier l'entrée
      stack.push(...next);
    } else {
      res.push(next);
    }
  }
  // On inverse le résultat pour revenir 
  // à l 'ordre de l'entrée
  return res.reverse();
}
flatNonRec(arr1);

Spécifications

Spécification État Commentaires
Brouillon de proposition pour Array.prototype.flat Proposition de niveau 4 (finalisée)

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung InternetNode.js
flatChrome Support complet 69Edge Aucun support NonFirefox Support complet 62IE Aucun support NonOpera Support complet 56Safari Support complet 12WebView Android Support complet 69Chrome Android Support complet 69Firefox Android Support complet 62Opera Android Support complet 48Safari iOS Support complet 12Samsung Internet Android Aucun support Nonnodejs Support complet 11.0.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, antant, fscholz, Baptistou
Dernière mise à jour par : SphinxKnight,