Aplanar un array en JavaScript
-
Use
concat()para aplanar un array en JavaScript -
Use
Array.reduce()para aplanar matrices multidimensionales en JavaScript -
Use
flat()para aplanar arrays a cierto nivel de profundidad en JavaScript
Este tutorial introducirá cómo aplanar un array en JavaScript. Aprenderemos a aplanar matrices de JavaScript con el método concat(), reduce y ECMAScript 6 Arrays.flat() que soporta niveles de profundidad múltiple. También implementaremos un método similar con un bucle for puro para aquellos que no pueden usar ECMAScript 6.
Use concat() para aplanar un array en JavaScript
Supongamos que tenemos la siguiente array:
var array1 = [['element 1'], ['element 2']];
Para aplanar la anterior array de JavaScript array1, necesitamos que todos los elementos de los arrays hijos sean elementos del array padre. Así que sería como ["element 1", "element 2"].
Podemos usar el método Arrays.concat() para aplanar los arrays.
var array1 = [['element 1'], ['element 2']];
var flattenArray = [].concat.apply([], array1);
console.log(flattenArray);
Resultado:
["element 1", "element 2"]
Use Array.reduce() para aplanar matrices multidimensionales en JavaScript
La función Array.reduce() es una de las funciones de orden superior. Se necesita una función “reductora” para ejecutarla como argumento. Para entender la función reduce(), veamos el siguiente ejemplo:
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 el array, usaremos la función reduce para ejecutar una función reduce que concatene la entrada si no era un array; de lo contrario, la reduciremos de nuevo de forma recursiva.
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"]
El ejemplo anterior también puede ser usado para aplanar arrays compuestos por más de un nivel de profundidad.
var array2 = [[['element 1'], ['element 2']], ['element 3']];
var TwoLevelFlattenArray = [].concat.apply([], array2);
console.log(TwoLevelFlattenArray);
Resultado:
["element 1", "element 2", "element 3"]
Use flat() para aplanar arrays a cierto nivel de profundidad en JavaScript
El método Array.prototype.flat() se utiliza para aplanar matrices con más de un nivel de profundidad pasando el nivel de profundidad como argumento. En caso de que no conozcamos el nivel de profundidad exacto, podemos pasar Infinity como argumento a la función.
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"]