Appiattisci un array in JavaScript

  2. HowTo
  3. Howtos JavaScript
  4. Appiattisci un array in JavaScript
Moataz Farid 12 ottobre 2023
JavaScript JavScript Array
  1. Usa concat() per appiattire gli array in JavaScript
  2. Usa Array.reduce() per appiattire array multidimensionali in JavaScript
  3. Usa flat() per appiattire gli array a un certo livello di profondità in JavaScript
Appiattisci un array in JavaScript

Questo tutorial introdurrà come appiattire un array in JavaScript. Impareremo come appiattire gli array JavaScript con il metodo concat(), reduce ed ECMAScript 6 Arrays.flat() che supporta livelli multi-profondità. Implementeremo anche un metodo simile con un bucle puro for per coloro che non possono usare ECMAScript 6.

Usa concat() per appiattire gli array in JavaScript

Supponiamo di avere il seguente array:

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

Per appiattire l’array JavaScript precedente array1, abbiamo bisogno che tutti gli elementi degli array figlio siano elementi dell’array genitore. Quindi sarebbe come ["element 1", "element 2"].

Possiamo usare il metodo Arrays.concat() per appiattire gli array.

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

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

Produzione:

["element 1", "element 2"]

Usa Array.reduce() per appiattire array multidimensionali in JavaScript

La funzione Array.reduce() è una delle funzioni di ordine superiore. Ci vuole una funzione reducer da eseguire come argomento. Per capire la funzione reduce(), vediamo il seguente esempio:

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);

Produzione:

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

Per appiattire l’array, useremo la funzione reduce per eseguire una funzione reducer che concatena l’input se non fosse un array; in caso contrario, lo riduciamo nuovamente in modo ricorsivo.

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);

Produzione:

["element 1", "element 2"]

L’esempio sopra può essere utilizzato anche per appiattire array composti da più di una profondità di livello.

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

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

Produzione:

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

Usa flat() per appiattire gli array a un certo livello di profondità in JavaScript

Il metodo Array.prototype.flat() viene utilizzato per flat array con più di un livello di profondità passando il livello di profondità come argomento. Nel caso in cui non conosciamo il livello di profondità esatto, possiamo passare Infinity come argomento alla funzione.

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));

Produzione:

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"]