Aplainar um Array em JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Aplainar um Array em JavaScript
Moataz Farid 12 outubro 2023
JavaScript JavScript Array
  1. Utilize concat() para achatar arrays em JavaScript
  2. Utilize Array.reduce() para achatar arrays multidimensionais em JavaScript
  3. Utilize flat() para achatar arrays até certo nível de profundidade em JavaScript
Aplainar um Array em JavaScript

Este tutorial irá introduzir como aplanar um array em JavaScript. Aprenderemos como aplanar arrays em JavaScript com concat(), reduce e ECMAScript 6 Arrays.flat() método que suporta níveis de multi-profundidade. Também implementaremos um método semelhante com um laço puro for para aqueles que não podem utilizar o ECMAScript 6.

Utilize concat() para achatar arrays em JavaScript

Vamos supor que temos o seguinte conjunto:

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

Para aplanar o array JavaScript acima referida array1, precisamos que todos os elementos das arrays de crianças sejam elementos do array dos pais. Assim, seria como ["element 1", "element 2"].

Podemos utilizar o método Arrays.concat() para aplanar as arrays.

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

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

Resultado:

["element 1", "element 2"]

Utilize Array.reduce() para achatar arrays multidimensionais em JavaScript

A função Array.reduce() é uma das funções de ordem superior. É necessária uma função reduce() para executar como argumento. Para compreender a função reduce(), vejamos o seguinte exemplo:

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

Resultado:

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

Para aplanar o array, utilizaremos a função reduce para executar uma função reducer que concatena o input se não fosse um array; caso contrário, reduzimo-lo novamente recursivamente.

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

Resultado:

["element 1", "element 2"]

O exemplo acima também pode ser utilizado para aplanar arrays compostas de mais de um nível de profundidade.

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

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

Resultado:

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

Utilize flat() para achatar arrays até certo nível de profundidade em JavaScript

O método Array.prototype.flat() é utilizado para arrays planas com mais de um nível de profundidade, passando o nível de profundidade como argumento. No caso de não conhecermos o nível exacto de profundidade, podemos passar Infinity como argumento para a função.

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

Resultado:

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