Resumen: en este post te mostraré a mezclar los elementos de un arreglo en JavaScript, de tal manera que los items del array estén en un orden distinto, algo así como randomizar el arreglo o hacerlo aleatorio.

Voy a demostrarlo con ejemplos y con una demostración que podrás probar en línea.

Mezclar elementos de arreglo con JavaScript

El algoritmo es sencillo. Debemos recorrer todo el arreglo con un ciclo for, en cada paso obtener un índice / posición aleatoria, intercambiar ese valor con el índice actual y así hasta terminar.

Veamos el código fuente que permite “sacudir” un arreglo:

Utilizamos Math.random y Math.floor para obtener un índice aleatorio dentro de los límites del arreglo.

Guardamos el valor actual en temporal, luego ponemos el aleatorio en el actual y finalmente el temporal dentro del aleatorio.

Cabe mencionar que este método modifica internamente al arreglo (por eso no regresa nada; ya que en JS los arreglos se pueden modificar porque se pasa la referencia de los mismos).

Si no quieres que eso suceda, puedes crear otra variable para el arreglo usando Array.from por ejemplo. Evita hacer una simple asignación con = porque de igual manera te estarás refiriendo al mismo arreglo.

En los ejemplos queda más claro.

Ejemplo 1: mezclar arreglo sin respaldar

Veamos un ejemplo sencillo para agitar un arreglo en JavaScript:

Como ves, se llama al método pero no se espera su resultado, pues modifica al arreglo internamente.

Ejemplo 2: mezclar elementos de arreglo en JavaScript, respaldando arreglo

Puedes respaldar el arreglo asignando su valor a otra variable y eliminando la referencia. Como lo dije antes, esto se puede lograr usando el método Array.from.

Veamos el ejemplo:

En este caso respaldamos el arreglo en la variable cancionesMezcladas, y así el arreglo original llamado canciones queda intacto, lo cual se comprueba imprimiendo ambas variables después de haber llamado al método que hace aleatorio el arreglo.

Código completo y demostración

Para terminar dejo el código completo que permite randomizar los elementos de un arreglo en JS:

Puedes ejecutar el código aquí.