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.
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.
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.
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.
Para terminar dejo el código completo que permite randomizar los elementos de un arreglo en JS:
Puedes ejecutar el código aquí.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.