Cómo invertir un array en JavaScript conservando el orden original del array de entrada

Cómo invertir un array en JavaScript conservando el orden original del array de entrada

Algo teóricamente tan simple puede convertirse en un problema si eres nuevo en JavaScript y no conocías el comportamiento predeterminado del método reverse heredado de una matriz. En JavaScript, es bastante fácil invertir el orden actual de los elementos de una matriz en JavaScript utilizando el método mencionado:

let myArray = [1, 2, 3, 4, 5];

// Imprime: [5, 4, 3, 2, 1]
console.log(myArray.reverse());

El problema con este enfoque es que el contenido original de myArray también se invertirá, ya que el método reverse funciona asi en lugar de devolver una nueva matriz con el nuevo orden de los elementos:

let myArray = [1, 2, 3, 4, 5];

let myCopy = myArray.reverse();

// Imprime: [5, 4, 3, 2, 1]
console.log(myArray);

// Imprime: [5, 4, 3, 2, 1]
console.log(myCopy);

Porque, como se mencionó, el método inverso muta la matriz original y devuelve una referencia a la matriz.

Solución

Si necesitas invertir el contenido de una matriz sin modificar el orden actual de los elementos actuales, hay muchas formas de hacerlo y enumeraremos todas desde la implementación más rápida hasta la menos óptima:

Usando slice y reverse

El método reverse no es lento, ya que es un método nativo de JavaScript. Por lo tanto, es la mejor solución por defecto, por lo que el problema en nuestra lógica es que estamos trabajando con el elemento original que contiene varios elementos, en lugar de trabajar con una copia. La mejor manera de hacer una copia y trabajar con ella es utilizando el método de división de JavaScript que devuelve una copia superficial de la parte seleccionada de una matriz. Si llamamos al método sin argumentos, se devolverá una copia de la matriz y podremos trabajar en ella como esperaríamos:

let myArray = [1, 2, 3, 4, 5];

let myReversedCopy = myArray.slice().reverse();

// Imprime: [1, 2, 3, 4, 5]
console.log(myArray);

// Imprime: [5, 4, 3, 2, 1]
console.log(myReversedCopy);

¡Dulce, funcional y rápido!

Operador de propagación y revertir array

Al igual que en el primer enfoque, podríamos crear una copia de la matriz usando el operador de propagación para copiar tu contenido en una nueva matriz vacía y luego revertirla:

let myArray = [1, 2, 3, 4, 5];

let myReversedCopy = [...myArray].reverse();

// Imprime: [1, 2, 3, 4, 5]
console.log(myArray);

// Imprime: [5, 4, 3, 2, 1]
console.log(myReversedCopy);

Usando reducir

Otra opción es utilizar el método reduce de JavaScript. Este enfoque de aspecto extraño funciona así, vamos a declarar una variable que almacenará el resultado del método de reducción que básicamente iterará sobre la matriz y agregará cada elemento al comienzo del acumulador que en este caso será un matriz vacía:

let myArray = [1, 2, 3, 4, 5];
let reversed = myArray.reduce((accumulator, value) => {
    return [value, ...accumulator];
}, []);

// Imprime: [1, 2, 3, 4, 5]
console.log(myArray);

// Imprime: [5, 4, 3, 2, 1]
console.log(reversed);

Iterar hacia atrás sobre una matriz

Otra solución posible, pero no tan óptima, además de la larga, es iterar hacia atrás sobre la matriz original, almacenando cada elemento en una nueva matriz:

let myArray = [1, 2, 3, 4, 5];
let reversed = [];

for(let i = myArray.length - 1;i >= 0;i--)
{
    reversed.push(myArray[i]);
}

// Imprime: [1, 2, 3, 4, 5]
console.log(myArray);

// Imprime: [5, 4, 3, 2, 1]
console.log(reversed);

Itera sobre una matriz y agrega cada elemento al comienzo de una matriz vacía

También puede iterar progresivamente sobre la matriz y agregar cada elemento al comienzo de una nueva matriz, por lo que el orden se invertirá como se esperaba:

let myArray = [1, 2, 3, 4, 5];
let reversed = [];

for(let i = 0;i < myArray.length;i++)
{
    reversed.unshift(myArray[i]);
}

// Imprime: [1, 2, 3, 4, 5]
console.log(myArray);

// Imprime: [5, 4, 3, 2, 1]
console.log(reversed);

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable