Ordenar un array de objetos en JavaScript (generador de comparadores) | We.Inc
Crea un comparador con clics: ordena objetos por un número, un texto, una fecha o dos claves, con opciones de localeCompare, y ve el resultado y el código lado a lado.
Ordenar un array de objetos en JavaScript
Pasa a sort una función de comparación que mire la propiedad que te interesa. Para números, devuelve a.price - b.price. Para texto, devuelve a.name.localeCompare(b.name). Para fechas, resta las marcas de tiempo. Un resultado negativo pone a primero; uno positivo pone b primero. Usa toSorted en lugar de sort cuando el orden original deba conservarse.
(a, b) => Date.parse(a.joined) - Date.parse(b.joined)
intercambia a y b
Booleano (true primero)
(a, b) => Number(b.active) - Number(a.active)
intercambia a y b
Ordenar objetos confunde a la gente por tres motivos: el sort por defecto lo compara todo como texto, las mayúsculas van antes que las minúsculas con una simple comparación menor que, y sort reescribe el array que le pasas. El generador de abajo te deja activar cada uno de esos interruptores sobre una pequeña lista de equipo y ver cómo cambia el orden, con el comparador correspondiente listo para copiar.
Elige la propiedad por la que ordenar: nombre, edad, fecha de incorporación o un código de ticket que mezcla letras y dígitos.
Elige ascendente o descendente y, para claves de texto, comparación simple o localeCompare con la opción numeric.
Añade una segunda clave para deshacer empates, por ejemplo primero el equipo y luego el nombre.
Copia el código generado. La tabla muestra el orden que produce tu comparador en este momento.
Nunca llames a sort() sin función sobre números u objetos. Sin comparador, cada valor se convierte en texto, así que 10 queda antes que 9 y todos los objetos se vuelven [object Object].
Devuelve un número, no true o false. Un resultado booleano se convierte en 1 o 0 y da un orden poco fiable.
¿Ordenas una lista larga con localeCompare? Crea un único Intl.Collator y pasa su método compare; MDN señala que es más rápido con arrays grandes.
Coloca al final a propósito los registros con un valor ausente, por ejemplo comprobando null antes de restar, para que no queden repartidos por la lista.
Preguntas frecuentes
¿Cómo ordeno un array de objetos por una propiedad?
Usa people.sort((a, b) => a.age - b.age) para una propiedad numérica o people.sort((a, b) => a.name.localeCompare(b.name)) para un texto. Intercambia a y b para invertir el sentido.
¿Cómo ordeno por dos campos?
Compara el primer campo y pasa al segundo solo cuando el primero empata: (a, b) => a.team.localeCompare(b.team) || a.age - b.age. El || funciona porque un empate devuelve 0, que cuenta como false.
¿Es estable el sort de JavaScript?
Sí. Desde ECMAScript 2019, sort debe ser estable, así que los elementos que se comparan como iguales mantienen su orden anterior. Por eso ordenar primero por nombre y luego por equipo da una lista agrupada por equipo con los nombres en orden dentro de cada grupo.
¿sort modifica el array original?
Sí. sort reordena el array en el sitio y devuelve ese mismo array. toSorted acepta la misma función de comparación pero devuelve un array nuevo y deja intacto el orden original. Está disponible en los principales navegadores desde julio de 2023.
¿Por qué los nombres en minúscula quedan después de los que empiezan en mayúscula?
Una comparación simple con < o > compara códigos de carácter, y todas las mayúsculas tienen un código menor que todas las minúsculas. localeCompare sigue en cambio el alfabeto del idioma y, con { sensitivity: 'base' }, también trata como iguales los acentos y las mayúsculas.
Qué devuelve realmente la función de comparación
sort solo mira el signo del número que devuelves. Por debajo de cero significa que a va antes que b, por encima de cero que b va primero, y cero que se quedan como están. El tamaño del número da igual, por eso la resta funciona con números y fechas.
La resta no funciona con texto, ya que 'b' - 'a' da NaN. localeCompare devuelve un número negativo, cero o positivo para los textos, así que encaja directamente en el mismo patrón.
Fechas, valores ausentes y tipos mezclados
Al restar objetos Date se obtiene un número de milisegundos, así que a.joined - b.joined ordena de más antiguo a más reciente. Las fechas guardadas como texto en formato ISO (2026-10-14) también se ordenan bien con localeCompare, porque el año va primero, pero otros formatos como 14/10/2026 no.
Los elementos undefined siempre se mueven al final y nunca se pasan a tu función. Una propiedad undefined dentro de un objeto es otra cosa: el objeto sí llega a tu comparador, así que compruébalo tú.
Por qué sort() sin más ordena mal los números
Sin función de comparación, cada elemento se convierte en texto y se compara por unidades de código UTF-16, así que gana el primer carácter.
Orden por defecto frente a un comparador numérico
El orden por defecto pone 100 antes que 25 porque el texto '1' va antes que '2'.
Ordenaciones por varias claves, según el idioma y sin mutar
Equipo de la A a la Z, luego el más antiguo primero, sin tocar el original
La cadena || pasa a la siguiente clave solo cuando la comparación anterior es 0. toSorted devuelve un array nuevo.
Un único Intl.Collator para una lista larga
numeric: true ordena T-2 antes que T-10, y sensitivity: 'base' ignora mayúsculas y acentos.
Un helper sortBy reutilizable
Pasa los nombres de las claves en orden. Un signo menos delante de una clave la ordena de forma descendente.
Generador de comparadores
Elige cómo ordenar la lista de equipo de ejemplo y la tabla y el código se actualizan a la vez.
Ordenar por
Después por (desempate)
Nada
Sentido
Ascendente
Descendente
Comparación de texto
< y > simples
localeCompare
localeCompare, numérico y sin distinguir mayúsculas
Lista de ejemplo usada por el generador de comparadores (orden original)