Aplatir un tableau en JavaScript

1. Utiliser concat() pour aplatir les tableaux en JavaScript
2. Utilisez la méthode Array.reduce() pour aplatir un tableau multidimensionnel en JavaScript
3. Utiliser flat() pour aplatir des tableaux à un certain niveau de profondeur en JavaScript

Ce tutoriel présente la façon d’aplatir un tableau en JavaScript. Nous apprendrons comment aplatir des tableaux en JavaScript avec la méthode concat(), reduce et ECMAScript 6 Arrays.flat() qui supporte les niveaux multiprofondeurs. Nous mettrons également en œuvre une méthode similaire avec une boucle for pure pour ceux qui ne peuvent pas utiliser ECMAScript 6.

Utiliser concat() pour aplatir les tableaux en JavaScript

Supposons que nous ayons le tableau suivant :

var array1 = [['element 1'], ['element 2']];

Pour aplatir le tableau JavaScript ci-dessus array1, nous avons besoin que tous les éléments des tableaux enfants soient des éléments du tableau parent. Ce serait donc comme ["element 1", "element 2"].

Nous pouvons utiliser la méthode Arrays.concat() pour aplatir les tableaux.

var array1 = [['element 1'], ['element 2']];

var flattenArray = [].concat.apply([], array1);
console.log(flattenArray);

Production :

["element 1", "element 2"]

Utilisez la méthode Array.reduce() pour aplatir un tableau multidimensionnel en JavaScript

La fonction Array.reduce() est l’une des fonctions d’ordre supérieur. Elle prend une fonction reduce() pour s’exécuter en tant qu’argument. Pour comprendre la fonction reduce(), voyons l’exemple suivant :

var arr = [10, 20, 30, 40];

function myreducerFunction(acc, currentVal) {
  console.log(`The acc. value is ${acc}`);
  console.log(`The current value is ${currentVal}`);
  acc = currentVal + acc;
  return acc;
}

var sum = arr.reduce(myreducerFunction, 0);
console.log(sum);

Production :

The acc. value is 0
The current value is 10
The acc. value is 10
The current value is 20
The acc. value is 30
The current value is 30
The acc. value is 60
The current value is 40
100

Pour aplatir le tableau, nous utiliserons la fonction reduce pour exécuter une fonction reduce qui concatène l’entrée si ce n’est pas un tableau ; sinon, nous la réduisons à nouveau de manière récursive.

var array1 = [['element 1'], ['element 2']];

function myFlatFunction(input) {
  return input.reduce(function(inputArray, inputToFlat) {
    return inputArray.concat(
        Array.isArray(inputToFlat) ? myFlatFunction(inputToFlat) : inputToFlat);
  }, []);
}

var OneLevelFlattenArray = myFlatFunction(array1)
console.log(OneLevelFlattenArray);

Production :

["element 1", "element 2"]

L’exemple ci-dessus peut également être utilisé pour aplatir des tableaux composés de plus d’un niveau de profondeur.

var array2 = [[['element 1'], ['element 2']], ['element 3']];

var TwoLevelFlattenArray = [].concat.apply([], array2);
console.log(TwoLevelFlattenArray);

Production :

["element 1", "element 2", "element 3"]

Utiliser flat() pour aplatir des tableaux à un certain niveau de profondeur en JavaScript

La méthode Array.prototype.flat() est utilisée pour aplatir des tableaux avec plus d’un niveau de profondeur en passant le niveau de profondeur comme argument. Si nous ne connaissons pas le niveau de profondeur exact, nous pouvons passer Infinity comme argument à la fonction.

var array3 = ['element 0', [['element 1'], ['element 2']], ['element 3']];

console.log('Level One > ', array3.flat());
console.log('Level One > ', array3.flat(1));
console.log('Level Two > ', array3.flat(2));
console.log('Full depth flatting > ', array3.flat(Infinity));

Production :

Level One >  (4) ["element 0", Array(1), Array(1), "element 3"]
Level One >  (4) ["element 0", Array(1), Array(1), "element 3"]
Level Two >  (4) ["element 0", "element 1", "element 2", "element 3"]
Full depth flatting >  (4) ["element 0", "element 1", "element 2", "element 3"]