JavaScript: Ordenación de Arrays (Arrays de Objetos)

El metodo sort() se usa para ordenar los valores de un array en JavaScript y este nos va a devolver el mismo array ya ordenado, aunque siendo sus resultados algo imprevisibles. Vamos a ver cómo trabajar con este método a través de unos ejemplos prácticos.

El método sort() funciona de tal manera que convierte todos sus elementos a cadenas y compara su valores en las tablas Unicode. Por lo que cuando estamos ordenando un array numérico, case sensitive, con acentos u otro tipo de caracteres especiales sus resultados pueden desconcertarnos.

Veamos este tipo de comportamiento con un ejemplo: tenemos un array de elementos en mayúsculas y acentuados (el resultado que obtenemos es una ordenación a medias).

El resultado de la ordenación anterior no es correcta por lo que tendremos que recurrir a una función de ordenación. Opcionalmente sort() nos permite usar una función de ordenación y que nos va a permitir definir el orden de los elementos dentro de un array.

En este caso para ordenar las cadenas usaremos el método localeCompare() que nos permite comparar una cadena con otra (retornando un número positivo, negativo o cero). Por lo que ya tenemos una ordenación más lógica en este tipo de casos.

Ordenación de arrays numéricos

Ya hemos comentado anteriormente que sort() convierte los elementos del array a cadenas por lo que con los números nos va a pasar lo mismo y tampoco no devolverá una ordenación lógica.

Para realizar una ordenación lógica tendremos que recurrir a una función de ordenación.

Ordenación de array de objetos por valor de su propiedad

Los objetos de un array también pueden ser ordenados por el valor de sus propiedades. La función de ordenación si retorna 1 indica que la propiedad b tiene precedencia sobre la propiedad a y al contrario cuando retorna -1.

Ahora vamos a crear un ejemplo algo mas complejo donde tendremos que ordenar las opciones de un campo <select>.  Por lo que primero leemos las opciones del selector y a continuación creamos un array de objetos temporal con todos su valores y atributos. Finalmente ordenaremos este array de objetos por una de sus propiedades y rehacemos las opciones del selector usando el nuevo array que hemos creado.

El resultado es un campo <select> con todos los valores de sus opciones ordenados alfabéticamente.

 

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.