Métodos sort() y reverse(): Ordenamiento de Arrays
Aprende a ordenar arrays alfabéticamente, numéricamente o con funciones personalizadas usando sort(), y a invertir el orden de los elementos con reverse().
TL;DR - Resumen rápido
- sort() ordena los elementos de un array in-place y retorna el array ordenado
- Por defecto, sort() convierte elementos a strings y ordena según su valor Unicode
- Para ordenar números correctamente, debes proporcionar una función de comparación
- reverse() invierte el orden de los elementos del array in-place
- Ambos métodos modifican el array original, crea una copia si necesitas preservarlo
Introducción a sort() y reverse()
Los métodos sort() y reverse() son herramientas fundamentales para manipular el orden de los elementos en un array. sort() permite ordenar elementos según diferentes criterios, mientras que reverse() simplemente invierte el orden existente. Ambos métodos modifican el array original y retornan la referencia al array modificado.
sort() es uno de los métodos más versátiles de JavaScript porque acepta una función de comparación personalizada que te permite definir cualquier criterio de ordenamiento. Sin embargo, su comportamiento por defecto puede sorprender a los desarrolladores que esperan un ordenamiento numérico natural. Por otro lado,reverse() es más simple pero igualmente útil para operaciones como mostrar datos en orden inverso o implementar algoritmos específicos.
Ordenamiento in-place
Ambos métodos modifican el array original (in-place). Si necesitas preservar el array original, crea una copia antes de ordenar: [...array].sort() oarray.slice().sort().
El método sort()
El método sort() ordena los elementos de un array in-place y retorna el array ordenado. El orden de ordenamiento predeterminado es ascendente, construyendo los elementos convirtiéndolos a strings y comparando sus secuencias de valores de unidades de código UTF-16.
Este comportamiento predeterminado puede causar resultados inesperados cuando ordenas números, ya que JavaScript los convierte a strings antes de comparar. Por ejemplo, el número 10 se considera "menor" que 2 porque el string "10" es lexicográficamente menor que "2". Para ordenar correctamente, debes proporcionar una función de comparación.
Ordenamiento alfabético
El ordenamiento alfabético es el comportamiento predeterminado de sort()cuando no se proporciona una función de comparación. Este ordenamiento funciona bien para strings, pero tiene limitaciones importantes como la sensibilidad a mayúsculas y minúsculas, y el ordenamiento de caracteres especiales.
El primer ejemplo muestra el ordenamiento básico de strings. El segundo ejemplo demuestra el problema de la sensibilidad a mayúsculas: las mayúsculas tienen un valor Unicode menor que las minúsculas, por lo que "Z" aparece antes que "a". El tercer ejemplo muestra cómo ordenar números usando el comportamiento predeterminado, lo que produce resultados incorrectos porque 10 se considera menor que 2.
Ordenamiento de mayúsculas y minúsculas
El ordenamiento predeterminado distingue entre mayúsculas y minúsculas. Para un ordenamiento case-insensitive, usa localeCompare() con la opciónsensitivity: 'base'.
Ordenamiento numérico
Para ordenar números correctamente, debes proporcionar una función de comparación que indique a sort() cómo comparar dos elementos. La función de comparación debe retornar un valor negativo si el primer elemento es menor, cero si son iguales, o un valor positivo si el primer elemento es mayor.
El primer ejemplo muestra la forma más concisa de ordenar números usando la función flecha (a, b) => a - b para ordenamiento ascendente. El segundo ejemplo muestra el ordenamiento descendente invirtiendo la resta. El tercer ejemplo demuestra cómo ordenar objetos por una propiedad numérica específica.
- Usa <code>(a, b) => a - b</code> para ordenamiento numérico ascendente
- Usa <code>(a, b) => b - a</code> para ordenamiento numérico descendente
- Para objetos, accede a la propiedad: <code>(a, b) => a.propiedad - b.propiedad</code>
- La función de comparación debe retornar número, no booleano
- El ordenamiento es estable: elementos iguales mantienen su orden relativo
Función de comparación personalizada
La función de comparación personalizada te permite definir cualquier criterio de ordenamiento complejo. Puedes ordenar por múltiples propiedades, usar criterios dinámicos, o implementar lógica especializada según tus necesidades específicas.
El primer ejemplo muestra cómo ordenar por múltiples propiedades: primero por edad y luego por nombre si las edades son iguales. El segundo ejemplo demuestra un ordenamiento dinámico donde la propiedad de ordenamiento se determina en tiempo de ejecución. El tercer ejemplo muestra cómo ordenar strings de forma case-insensitive usando localeCompare().
localeCompare() para strings
El método localeCompare() es la forma más robusta de ordenar strings porque respeta las reglas de ordenamiento del idioma local, incluyendo acentos y caracteres especiales. Usa localeCompare('es') para español.
El método reverse()
El método reverse() invierte el orden de los elementos de un array in-place. El primer elemento del array se convierte en el último, y el último elemento se convierte en el primero. Este método es más simple que sort() pero igualmente útil para diversas operaciones.
reverse() modifica el array original y retorna la referencia al array modificado. A diferencia de sort(), reverse() no acepta parámetros ni funciones de comparación. Simplemente invierte el orden existente sin aplicar ningún criterio de ordenamiento.
Sintaxis y usos de reverse()
reverse() no acepta parámetros y se usa de forma directa. Es especialmente útil cuando necesitas mostrar datos en orden inverso, implementar algoritmos específicos, o simplemente cambiar la dirección de un array.
El primer ejemplo muestra el uso básico de reverse() para invertir un array de números. El segundo ejemplo demuestra cómo invertir un array de strings. El tercer ejemplo muestra cómo invertir un array de objetos, lo cual es útil para mostrar listas en orden inverso sin modificar la fuente de datos original.
- Usa reverse() para mostrar listas en orden cronológico inverso
- Combina sort() y reverse() para ordenamiento descendente complejo
- Invierte arrays para implementar algoritmos específicos como palíndromos
- Usa reverse() en cadenas convirtiéndolas primero a array
- Crea una copia antes de invertir si necesitas preservar el original
Errores Comunes
Al trabajar con sort() y reverse(), hay varios errores comunes que puedes encontrar, especialmente relacionados con el comportamiento predeterminado de sort() y la mutación del array original.
Error: Ordenar números sin función de comparación
El error más común con sort() es ordenar números sin proporcionar una función de comparación. Esto produce resultados incorrectos porque JavaScript convierte los números a strings antes de compararlos.
El problema es que sort() convierte cada número a string y los compara lexicográficamente. Por lo tanto, "10" es menor que "2" porque el carácter "1" tiene un valor Unicode menor que "2". La solución es siempre proporcionar una función de comparación cuando ordenes números.
Error: No crear copia antes de ordenar
Otro error común es no crear una copia del array antes de ordenar, lo que modifica el array original de forma inesperada. Esto puede causar bugs difíciles de rastrear cuando el array se usa en múltiples lugares de la aplicación.
El ejemplo muestra que sort() y reverse() modifican el array original. Si necesitas preservar el array original, crea una copia usando el operador spread [...array] o el método slice() antes de ordenar o invertir.
Encadenamiento de métodos
Cuando encadenas métodos como array.slice().sort().reverse(), asegúrate de crear la copia primero. array.sort().reverse() modificará el array original dos veces.
Error: Ordenamiento case-sensitive inesperado
El ordenamiento predeterminado de sort() es case-sensitive, lo que significa que las mayúsculas se ordenan antes que las minúsculas según sus valores Unicode. Esto puede producir resultados inesperados en interfaces de usuario.
El ejemplo muestra que "Z" aparece antes que "a" porque el valor Unicode de "Z" (90) es menor que el de "a" (97). Para un ordenamiento case-insensitive, usalocaleCompare() con la opción sensitivity: 'base' o convierte todos los elementos a mayúsculas o minúsculas antes de ordenar.
Resumen: Métodos sort() y reverse()
Conceptos principales:
- •sort() ordena elementos in-place según una función de comparación
- •reverse() invierte el orden de los elementos in-place
- •sort() sin argumentos convierte elementos a strings y ordena por Unicode
- •La función de comparación retorna negativo, cero o positivo
- •Ambos métodos retornan la referencia al array modificado
Mejores prácticas:
- •Siempre usa función de comparación para ordenar números
- •Usa localeCompare() para ordenar strings de forma robusta
- •Crea una copia del array antes de ordenar si necesitas el original
- •Usa (a, b) => a - b para ordenamiento numérico ascendente
- •Combina sort() y reverse() para ordenamiento descendente complejo