Invertir una matriz en JavaScript

En esta guía, veremos cómo invertir una matriz o una lista en JavaScript, utilizando el método reverse(), la programación funcional y un manual de bucle, tanto en el lugar como fuera de lugar.

En este tutorial, veremos cómo revertir una matriz en JavaScript. Hay algunas maneras de hacer esto, y averiguar cuál querrá emplear generalmente depende de su preferencia personal.

Estaremos invirtiendo estas dos matrices:

1
2
let numArr = [1, 2, 3, 4, 5]
let strArr = ['Java', 'Python', 'JavaScript']

Usar Array.reverse()

La forma más fácil y sencilla de invertir una matriz es a través del método reverse():

1
2
3
4
5
let numArrReversed = numArr.reverse();
let strArrReversed = strArr.reverse();

console.log(numArrReversed);
console.log(strArrReversed);

Hemos creado dos nuevas variables para apuntar a las matrices resultantes:

1
2
[ 5, 4, 3, 2, 1 ]
[ 'JavaScript', 'Python', 'Java' ]

Nota: El método reverse() invierte la matriz en el lugar. Esto significa que num_array y string_array originales se invierten y la secuencia original se pierde.

No necesita crear una nueva variable para almacenar un puntero a estas matrices en la memoria, ya que los punteros originales ya apuntan a las matrices invertidas:

1
2
3
4
5
numArr.reverse();
strArr.reverse();

console.log(numArr);
console.log(strArr);

Esto también resulta en:

1
2
[ 5, 4, 3, 2, 1 ]
[ 'JavaScript', 'Python', 'Java' ]

Sin embargo, todavía es una práctica común "asignar" el resultado a una nueva variable para indicar un cambio de estado, o al menos asignar un nombre más indicativo a la matriz transformada, como array_reversed.

Inversión funcional de un arreglo

La programación funcional es una adición maravillosa a la mayoría de los lenguajes de programación imperativos. Las construcciones funcionales nos permiten realizar varias operaciones transformadoras, incluso complejas, en objetos y secuencias con instrucciones intuitivas y simples.

A muchos desarrolladores simplemente les encanta usar construcciones funcionales cuando pueden, por lo que no sorprende que la inversión de una matriz también se haga comúnmente a través de construcciones funcionales. Este enfoque le permite canalizar también otra transformación junto con la inversión, como agregar o cambiar los elementos también.

Para revertir una matriz funcionalmente en JavaScript, aprovecharemos el operador de propagación y la función map():

1
2
3
4
5
// Preserves original array
let numArrReversed = numArr.map(numArr.pop, [...numArr]);

// Doesn't preserve original array
let strArrReversed = [...strArr].map(strArr.pop, strArr);

El método map() mapea cada elemento pop (el último elemento eliminado) de numArr y lo inserta en una nueva matriz, que se crea como una copia de numArr. Al eliminar el último elemento y agregarlo como el primero en una nueva matriz, creamos una nueva matriz invertida.

El primer enfoque trata con una copia congelada del objeto numArr y, por lo tanto, no modifica la matriz original.

En el segundo enfoque, modificamos la matriz original ya que estamos usando la referencia a la matriz original en el método map(), aunque creamos una copia de la matriz de antemano:

1
2
3
4
5
console.log('Original num_array: ' + numArr);
console.log('Original string_array: ' + strArr);

console.log('Reversed num_array: ' + numArrReversed);
console.log('Reversed string_array: ' + strArrReversed);

Por lo tanto, cuando todo está dicho y hecho, num_array permanece sin cambios, mientras que string_array desaparece:

1
2
3
4
Original num_array: 1,2,3,4,5
Original string_array: 
Reversed num_array: 5,4,3,2,1
Reversed string_array: JavaScript,Python,Java

Invertir una matriz con un bucle for

Finalmente, la buena manera antigua es simplemente ejecutar la matriz a través de un bucle for en orden inverso y agregar cada elemento en una nueva matriz.

Esto funciona muy bien para crear una nueva matriz invertida, pero no revertirá la anterior en el lugar. Si desea revertirlo en el lugar, querrá usar el método unshift() para agregar elementos al comienzo de la matriz, mientras empalma (operación en el lugar) continuamente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
function reverse(array) {
  let newArr = [];
  for(i = array.length-1; i >= 0; i--) {
    newArr.push(array[i]);
  }
  return newArr;
}

function reverseInPlace(array) {
  for(i = 0; i < array.length; i++) {
    let tmp = array.splice(i, 1)[0];
    array.unshift(tmp);
  }
  return array;
}

Puede utilizar estos métodos como:

1
2
3
4
5
6
7
8
let numArrReversed = reverseInPlace(numArr);
let strArrReversed = reverse(strArr);

console.log('Original num_array: ' + numArr);
console.log('Original string_array: ' + strArr);

console.log('Reversed num_array: ' + numArrReversed);
console.log('Reversed string_array: ' + strArrReversed);

Lo que resulta en:

1
2
3
4
Original num_array: 5,4,3,2,1
Original string_array: Java,Python,JavaScript
Reversed num_array: 5,4,3,2,1
Reversed string_array: JavaScript,Python,Java