Array.prototype.flat()

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.

{{EmbedInteractiveExample("pages/js/array-flatten.html")}}

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

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

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.

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

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]

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]

var arr = [1, 2, [3, 4]];

// pour un tableau avec un seul niveau de profondeur
arr.flat();
// est équivalent à
arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]

// avec la décomposition et les compositions flechées, on peut écrire :
const flat = arr => [].concat(...arr);

var arr = [1, 2, [3, 4, [5, 6]]];

// Pour gérer plusieurs niveaux, on pourra utiliser
// une méthode récursive avec reduce et concat
function flatDeep(arr) {
   return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val) : val), []);
};

flatDeep(arr);
// [1, 2, 3, 4, 5, 6]

var arr = [1, 2, [3, 4]];

// Version non récursive utilisant une pile
function flatStack(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();
}

flatStack(arr);
// [1, 2, 3, 4]

• Array.prototype.flatMap()
• Array.prototype.map()
• Array.prototype.reduce()
• Array.prototype.concat()