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:

/**
 * Mezclar un arreglo en JavaScript
 * 
 * Visita: https://parzibyte.me/blog
 */
// Nota: esta función modifica al arreglo
// internamente
const mezclarArreglo = arreglo => {
	for (let i = arreglo.length - 1; i > 0; i--) {
		let indiceAleatorio = Math.floor(Math.random() * (i + 1));
		let temporal = arreglo[i];
		arreglo[i] = arreglo[indiceAleatorio];
		arreglo[indiceAleatorio] = temporal;
	}
}

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:

// Ejemplo 1
const mascotas = [
	"Maggie",
	"Panqué",
	"Guayaba",
	"Michi"
];
console.log("Mascotas original: ", mascotas);
mezclarArreglo(mascotas);
console.log("Mascotas mezclado: ", mascotas);

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:

// Ejemplo 2, respaldando arreglo
const canciones = [
	"I can't win",
	"Hammer To Fall",
	"Let's dance",
	"Rock And Roll All Nite"
];
console.log("Canciones original: ", canciones);
const cancionesMezcladas = Array.from(canciones);
mezclarArreglo(cancionesMezcladas);
console.log("Canciones mezcladas: ", cancionesMezcladas);
console.log("Canciones original, de nuevo: ", canciones);

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:

/**
 * Mezclar un arreglo en JavaScript
 * 
 * Visita: https://parzibyte.me/blog
 */
// Nota: esta función modifica al arreglo
// internamente
const mezclarArreglo = arreglo => {
	for (let i = arreglo.length - 1; i > 0; i--) {
		let indiceAleatorio = Math.floor(Math.random() * (i + 1));
		let temporal = arreglo[i];
		arreglo[i] = arreglo[indiceAleatorio];
		arreglo[indiceAleatorio] = temporal;
	}
}
// Ejemplo 1
const mascotas = [
	"Maggie",
	"Panqué",
	"Guayaba",
	"Michi"
];
console.log("Mascotas original: ", mascotas);
mezclarArreglo(mascotas);
console.log("Mascotas mezclado: ", mascotas);

// Ejemplo 2, respaldando arreglo
const canciones = [
	"I can't win",
	"Hammer To Fall",
	"Let's dance",
	"Rock And Roll All Nite"
];
console.log("Canciones original: ", canciones);
const cancionesMezcladas = Array.from(canciones);
mezclarArreglo(cancionesMezcladas);
console.log("Canciones mezcladas: ", cancionesMezcladas);
console.log("Canciones original, de nuevo: ", canciones);