HOWTO · TypeScript

Ordenar Array de objetos en TypeScript

Este artículo muestra cómo ordenar un array de objetos en TypeScript.

En esta página

Ordena un array de objetos tipados con employeesList.sort((a, b) => a.empId - b.empId). El comparador devuelve un número negativo cuando a debe ir primero, uno positivo cuando b debe ir primero y cero cuando los valores comparados son iguales. Invierte la resta para ordenar de forma descendente o compara otra propiedad cuando coincidan los valores de la primera clave. sort() modifica el array original; si necesitas conservar el orden inicial, usa la sintaxis de propagación para ordenar una copia.

Definir un tipo de objeto para los registros

Una interfaz describe las propiedades que debe incluir cada registro. En este caso, cada empleado tiene un empId numérico y un empDesignation de tipo cadena. Usar un tipo compartido permite que TypeScript compruebe tanto el array como los nombres de las propiedades del comparador. La interfaz es un contrato de tiempo de compilación: ayuda a detectar nombres de propiedad mal escritos mientras editas el código, pero no valida en tiempo de ejecución los datos recibidos de una fuente externa. Asegúrate de que los tipos de las propiedades sean compatibles con los valores que usa el comparador.

Crear un array de objetos en TypeScript

Declara el array como Employee[] para exigir que cada elemento coincida con la interfaz. En TypeScript, define interface Employee { empId: number; empDesignation: string } y declara const employeesList: Employee[] = [...]. El ejemplo incluye dos empleados con el mismo empId; sus cargos aportan una segunda clave útil para el comparador final. Los nombres de las propiedades de los datos y de la función de ordenación deben coincidir exactamente. TypeScript comprueba cada literal de objeto con Employee, por lo que durante la comprobación de tipos se notificará si falta una propiedad obligatoria o si un valor tiene un tipo incorrecto. El ejemplo ejecutable de abajo usa literales de objeto compatibles con JavaScript para poder ejecutarse directamente en Node.js; las anotaciones de TypeScript deben ir en el archivo .ts.

Ordenar objetos por una o varias propiedades

El comparador numérico a.empId - b.empId ordena los identificadores de forma ascendente y devuelve cero cuando hay un empate. Para ordenar de forma descendente, usa b.empId - a.empId. Para ordenar por una segunda propiedad, devuelve la comparación de los identificadores cuando no sea cero y, si coinciden, compara empDesignation. Un comparador debe devolver cero para los registros que sean iguales según ambas claves; devolver -1 en todos los empates puede dar al algoritmo de ordenación una regla de orden incoherente. Para otros campos de texto, usa una comparación de cadenas en lugar de una resta. localeCompare() es una opción práctica cuando importa el orden propio de un idioma; su resultado puede depender de la configuración regional, así que elige una configuración explícita si necesitas un orden regional coherente. Si una propiedad puede faltar, decide cómo deben ordenarse esos registros y trata ese caso antes de comparar los valores.

Ejecuta este ejemplo:

const employeesList = [
  { empId: 20, empDesignation: "senior engineer" },
  { empId: 14, empDesignation: "junior engineer" },
  { empId: 14, empDesignation: "developer" },
  { empId: 25, empDesignation: "program manager" },
  { empId: 12, empDesignation: "director" },
];

const byIdAscending = [...employeesList].sort((a, b) => a.empId - b.empId);
const byIdDescending = [...employeesList].sort((a, b) => b.empId - a.empId);
const byIdThenDesignation = [...employeesList].sort((a, b) =>
  a.empId - b.empId || a.empDesignation.localeCompare(b.empDesignation)
);

console.log(byIdAscending.map((employee) => employee.empId).join(", "));
console.log(byIdDescending.map((employee) => employee.empId).join(", "));
console.log(byIdThenDesignation.map((employee) => `${employee.empId}: ${employee.empDesignation}`).join(" | "));
12, 14, 14, 20, 25
25, 20, 14, 14, 12
12: director | 14: developer | 14: junior engineer | 20: senior engineer | 25: program manager

La sintaxis de propagación hace que cada operación de ordenación trabaje sobre una copia y deja employeesList en el orden en que se declaró. Las dos primeras líneas muestran los identificadores en sentidos opuestos. La última línea muestra cada identificador junto con su cargo y solo compara los cargos de los empleados cuyos identificadores coinciden. En una aplicación real, elige una propiedad secundaria que permita ordenar los empates de una forma útil para tus lectores; cuando haga falta, añade más comparaciones siguiendo el mismo patrón.