Aplainar um Array em JavaScript

  1. Utilize concat() para achatar arrays em JavaScript
  2. Utilize Array.reduce() para achatar matrizes multidimensionais em JavaScript
  3. Utilize flat() para achatar matrizes até certo nível de profundidade em JavaScript

Este tutorial irá introduzir como aplanar um array em JavaScript. Aprenderemos como aplanar matrizes 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 matrizes 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 matrizes.

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

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

Resultado:

["element 1", "element 2"]

Utilize Array.reduce() para achatar matrizes 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 matrizes 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 matrizes até certo nível de profundidade em JavaScript

O método Array.prototype.flat() é utilizado para matrizes 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"]