Ordenar arrays Javascript

  • Por
Funciones básicas para ordenar arrays en Javascript, basadas en las disponibles en PHP para la ordenación de arrays, que nos ofrecen en las librerías php.js.
En cualquier lenguaje de programación se utilizan estructuras de datos y en concreto los arrays (tablas o matrices en español) son una de las más sencillas y más utilizadas. En Javascript, el popular lenguaje de programación del lado del cliente para desarrollar páginas web, disponemos también de los arrays y se utilizan bastante. Una de las tareas más habituales que podemos desear realizar con arrays es ordenarlos, de modo que sus elementos se dispongan de mayor a menor o viceversa.

Javascript es un lenguaje potente, que permite hacer muchas cosas, pero el lenguaje en si no tiene un juego de funciones muy grande, como el que podemos conocer de otros lenguajes como PHP. En un pasado artículo presentamos las librerías php.js, que son un paquete de funciones disponibles en PHP, portadas a Javascript y que ponen a disposición gratuitamente para cualquier desarrollador. En este artículo vamos a aprender a ordenar arrays de una manera cómoda utilizando funciones como sort() disponibles en PHP y ahora también en Javascript.

Para hacer las ordenaciones de elementos de un array tenemos primero de declarar el array y definir varios elementos. Vamos a trabajar con un array como este:

var mi_array = [12, 923, 4, 1024, 405, 56];

Nota: observar la declaración del array, que se hace al mismo tiempo que la inserción de varios elementos, por medio de los corchetes y separando por comas cada uno de los valores que queremos meter en la matriz. Si deseamos conocer otras maneras de declarar arrays, insertar elementos, así como otras cosas relacionadas, por favor, consultar los artículos sobre arrays del manual de Javascript.

Orden de un array con sort()

Como primer paso, vamos a ordenar el array por sus elementos, de menor a mayor, que sería el orden más típico que podamos necesitar. Para ello vamos a utilizar la función sort(), que es una función existente en PHP (portada ahora también a Javascript por medio de phpjs.org) que ordena las matrices por los valores almacenados en sus casillas, de manera ascendente.

Nota: Esta función, como habíamos dicho, es originaria de PHP y no está disponible de manera predeterminada en el lenguaje Javascript. Para disponer de ella necesitamos utilizar las librerías php.js. Por lo que tendremos que haber descargado esas librerías, en un paquete que incluya esa función, o bien en un paquete que hagamos nosotros mismos donde la seleccionemos. Otra opción es ir a sitio de phpjs.org y acceder a la página de documentación de esta función, donde podremos ver el código fuente y copiarlo en nuestro archivo de código Javascript. La página donde está explicada esa función y podemos ver su código fuente completo está en: http://phpjs.org/functions/sort:519

Además, en esa página de documentación, podremos observar que sort() requiere de otra función de las librerías php.js llamada i18n_loc_get_default() para correr bien y que deberemos descargar también. Si pasamos por la sección "Compile" de phpjs.org y seleccionamos la función sort(), veremos que también se selecciona automáticamente la función requerida.

En la llamada a sort() tenemos que indicar como parámetro la variable que tiene el array a ordenar y recibiremos como valor de respuesta el array ordenado.

var array_ordenado = sort(mi_array);

Para ver si el array está ordenado habría que hacer un recorrido a cada una de sus casillas y mostrar de algún modo sus contenidos. Esto lo podemos hacer con un bucle y mostrando cada uno de sus elementos, por ejemplo, en una caja de alerta. Utilizaríamos un código como este:

for(i=0; i<array_ordenado.length; i++){
   alert (array_ordenado[i]);
}

Pero ya que estamos aprendiendo a manejar las librerías de php.js, vamos a aprovecharnos de una función útil de PHP que muestra el contenido de una variable, incluso de algunas estructuras de datos, como arrays, y objetos. Se trata de la función print_r(), que también tendremos que descargar en algún paquete del sitio de php.js.

Nota: ya que recomendamos usar print_r() creo conveniente decir que esta función requiere para funcionar de la función echo(). Así que deberemos asegurarnos que disponemos de ambas funciones para que print_r() vaya bien. En la propia documentación de print_r() podemos ver en detalle todas sus dependencias. Si en la sección "Compile" de phpjs.org decidimos descargar print_r(), la función dependiente echo() se seleccionará automáticamente.

Por ejemplo, podemos observar este código completo, que declara el array, lo ordena y por último muestra su contenido completo con print_r().

<pre>
               
<script>
var mi_array = [12, 923, 4, 1024, 405, 56];
array_ordenado = sort(mi_array);

document.write("<b>Ordenado ascendente:</b><br>" + print_r(array_ordenado, true));
</script>

</pre>

Como hemos visto, el código está metido dentro de una etiqueta PRE de HTML, para que la salida de print_r() se muestre preformateada y se observe mejor en la página web, con sus saltos de línea y tabulaciones.

Ordenar un array de manera descendente con rsort()

La función rsort() hace lo mismo que sort(), pero devuelve el array ordenado de manera descendente. La "r" viene de "reverse" y viene a significar que el orden se realiza de manera inversa.

Nota: El código fuente y toda la documentación sobre rsort() y su función requerida i18n_loc_get_default() (la comentada anteriormente, sort(), también requería esa función para su correcto uso) la podemos ver en la página http://phpjs.org/functions/rsort:506

El uso de rsort(), como bien debemos suponer, es bastante sencillo. Se trata simplemente de enviar el array que deseamos ordenar como parámetro y se recibe como valor de respuesta un nuevo array ordenado.

array_descendente = rsort(mi_array);

Si lo deseamos, podemos ver el contenido de este array a partir de una llamada a la función print_r() comentada anteriormente.

document.write("<b>Ordenado descendente:</b><br>" + print_r(array_descendente,true));

Para acabar, hemos puesto una página donde se pueden ver estas dos ordenaciones de elementos del array en marcha.