Ordenamiento de Arrays con el Método Sort en JavaScript

Curso de Manipulación de Arrays en JavaScript

Contenido del curso

Introducción

1
Manipulación de Arrays en JavaScript para Desarrollo Full Stack
01:39 min

Fundamentos del manejo de arrays

Métodos en JavaScript

Despedida

19
Manipulación de Rides con JavaScript
00:38 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:13

Ordenamiento de Arrays con el Método Sort en JavaScript

Curso de Manipulación de Arrays en JavaScript

Clase 18 de 19

Clase 18 / 19

Recursos

El método sort es mutable y consiste en ordenar un array a partir de los valores Unicode de los caracteres y este retorna un array con la misma referencia en memoria que el original.

Este proceso recibe un argumento:

Una función de comparación que compara cada elemento con otro. Por defecto, evalúa el valor Unicode del caracter.

let sortedArray = array.sort(function())

La función comparativa, que recibe como argumento el método sort, utiliza dos parámetros:

El primer elemento a comparar.
El segundo elemento a comparar.

array.sort(function(first, second))

Si la función comparativa retorna un número mayor que 0, entonces el primer elemento se sitúa antes que el segundo. Si es menor que 0, entonces el segundo elemento se sitúa antes que el primero. Esto es importante, ya que ordenar los elementos por el valor Unicode provoca resultados inesperados.

Ordenamiento de palabras

Si ordenas un array de palabras, puede ordenar correctamente por el valor Unicode de los caracteres de la palabra. Sin embargo, en algunos navegadores o entornos de ejecución (como Node) puede que esto falle, por lo tanto, debes utilizar la función localeCompare.

Ten en cuenta que las mayúsculas, minúsculas y caracteres con tilde tienen un valor Unicode diferente, por lo que debes asegurarte que todas las palabras estén en la misma condición.

const words = [
    "réservé",
    "premier",
    "communiqué",
    "café",
    "adieu",
    "éclair",
    "banana",
]

words.sort((a,b) => a.localeCompare(b))
// [ 'adieu', 'banana', 'café', 'communiqué', 'éclair', 'premier', 'réservé' ]

Ordenamiento de números

Si ordenas un array de números, provoca un ordenamiento inesperado porque ordena por el valor Unicode de los caracteres del número.

const numbers = [1, 30, 4, 21, 100000]
numbers.sort() 
console.log(numbers)
// [ 1, 100000, 21, 30, 4 ]

Para arreglar este comportamiento, es necesario utilizar la siguiente función comparativa:

De manera ascendente (a, b) => a - b
De manera descendente (a, b) => b - a

// Ascendente
const numbers = [1, 30, 4, 21, 100000]
numbers.sort((a,b) => a - b) 
console.log(numbers)
// [ 1, 4, 21, 30, 100000 ]

// Descendente
const numbers = [1, 30, 4, 21, 100000]
numbers.sort((a,b) => b - a) 
console.log(numbers)
// [ 100000, 30, 21, 4, 1 ]

Ordenamiento de objetos por su propiedad

A partir de la función comparativa puedes ordenar los elementos de cualquier forma. Cuando necesites ordenar un array de objetos, compara una propiedad de tipo numérica de la misma forma que el ordenamiento de números, ya sea de manera descendente o ascendente.

const orders = [
    {
        customerName: "Nicolas",
        total: 600,
        delivered: true,
    },
    {
        customerName: "Zulema",
        total: 120,
        delivered: false,
    },
    {
        customerName: "Santiago",
        total: 1840,
        delivered: true,
    },
    {
        customerName: "Valentina",
        total: 240,
        delivered: true,
    },
]

Por ejemplo, creemos un algoritmo que ordene los pedidos del array orders por su valor total.

orders.sort((a,b) => a.total - b.total)

console.log(orders)
/* [
  {
    customerName: 'Zulema',
    total: 120,
    delivered: false
  },
  {
    customerName: 'Valentina',
    total: 240,
    delivered: true
  },
  {
    customerName: 'Nicolas',
    total: 600,
    delivered: true
  },
  {
    customerName: 'Santiago',
    total: 1840,
    delivered: true
  }
]
*/

Contribución creada por: Andrés Guano.

Daniel Flores

Hace un año

🔀 Ordenar con sort() (mutable)

🧠 ¿Qué hace? Ordena los elementos del array modificando el original ⚠️ Por defecto, usa valores Unicode, lo que puede generar resultados inesperados.

✅ Devuelve el mismo array ya ordenado ⚠️ Es mutable: cambia el array original 🧨

📥 Sintaxis:

jsCopiarEditararray.sort((a, b) => comparación);

🔤 Ejemplo con palabras (Unicode y localeCompare):

jsCopiarEditarconst palabras = ["réservé", "premier", "communiqué", "café", "adieu", "éclair", "banana"];

palabras.sort((a, b) => a.localeCompare(b)); // ['adieu', 'banana', 'café', 'communiqué', 'éclair', 'premier', 'réservé']

📌 Tips para texto:

Usa .localeCompare() para evitar errores con acentos y mayúsculas/minúsculas

🔢 Ejemplo con números:

❌ Mal orden:

jsCopiarEditar[1, 30, 4, 21].sort(); // Resultado inesperado: [1, 100000, 21, 30, 4]

✅ Correcto:

jsCopiarEditar// Ascendente numbers.sort((a, b) => a - b);

// Descendente numbers.sort((a, b) => b - a);

📦 Ordenar objetos por propiedad:

jsCopiarEditarorders.sort((a, b) => a.total - b.total); // Ordena por el total de cada pedido (ascendente)

🧾 Resultado:

jsCopiarEditar[ { customerName: 'Zulema', total: 120 }, { customerName: 'Valentina', total: 240 }, { customerName: 'Nicolas', total: 600 }, { customerName: 'Santiago', total: 1840 } ]

📌 Tips clave:

✅ Usa funciones comparativas para controlar el orden
⚠️ Recuerda que sort() modifica el array original
✂️ Crea una copia con slice() o spread (...) si no quieres mutarlo

Comentarios (80)80 comentarios

German Cavani

Hace 5 años

Darwing Steven Sánchez Londoño

Henry Jeffersson Salinas Arenas

Hace 4 años

Luis Manuel Morales López

Leonardo Gabriel Puebla

Rafael Martínez Rodríguez

Ludwig Jonathan Perez Villamar

Geovanny Sneyder Paez Pabon

Sebastian Moreno Olivera

Brandon James Huamán Mallcco

Arnobi Zabaleta Caldera

Luis Abdel Rangel Castro

Cesar Gabriel Mejias Farreras

Joel Moises Boada Velasquez

Ricardo Rito Anguiano

Elioenai Garcia

Luis Guilermo Figueroa Hernandez

Miguel Angel Reyes Moreno

Diego Zazueta

Hace 2 años

Laura Roa

Nicolas Molina

Profesor

Rodrigo Josue Goitia Quiroga

Ever Lizarraga

Hace 3 años

Lucas Aguirre

Antonio Rafael González Ferrer

Orangel Gonzalez

Omar Barragán moreno

Jefred Bedoya

Hace 5 meses•editado

Introducción

Manipulación de Arrays en JavaScript para Desarrollo Full Stack

Fundamentos del manejo de arrays

Recorrido de Arrays con Foreach en JavaScript

Mutabilidad vs Inmutabilidad en Programación JavaScript

Uso de Map para Transformaciones en JavaScript y Renderizado HTML

Transformaciones avanzadas con map en JavaScript

Filtrado de Arrays en JavaScript con el Método Filter

Uso del método reduce en JavaScript para sumar elementos de un array

Contar elementos en un array con reduce y agrupar por rango

Métodos en JavaScript

Uso de la función "sum" en JavaScript para evaluar condiciones

Uso del método `every` en JavaScript para validaciones de arrays

Uso de los métodos find y findIndex en JavaScript

Uso del método includes en JavaScript para arrays y strings

Unificación y separación de arrays con join y split en JavaScript

Fusión de Arrays con Concat y Operador Spread en JavaScript

Aplanar Arrays en JavaScript con Flat y FlatMap

Uso de FlatMap para Extraer Fechas de Calendarios en JavaScript

Métodos Mutables e Inmutables en Arrays: Manipulación y Búsqueda

Ordenamiento de Arrays con el Método Sort en JavaScript

Despedida

Manipulación de Rides con JavaScript

Ordenamiento de Arrays con el Método Sort en JavaScript

Progreso del curso

Introducción

Fundamentos del manejo de arrays

Métodos en JavaScript

Despedida

Recursos

Recursos