Cómo ordenar un array con el método sort() de JavaScript

Resumen: en este tutorial, aprenderás a usar el método sort() de Array en JavaScript para ordenar arreglos de números, cadenas y objetos.

Introducción al método sort() de Array en JavaScript

El método sort() te permite ordenar los elementos de una matriz o un arreglo. Además de regresarte el array ordenado, el método sort() cambia las posiciones de los elementos en la matriz original.

De forma predeterminada, el método sort() ordena los elementos de un array en orden ascendente con el valor más pequeño primero y el valor más grande al final.

El método sort() convierte elementos en cadenas y compara las cadenas para determinar el orden.

Considera el siguiente ejemplo:

let numbers = [0, 1 , 2, 3, 10, 20, 30 ];
numbers.sort();
console.log(numbers);

Resultado:

[ 0, 1, 10, 2, 20, 3, 30 ]

En este ejemplo, el método sort() coloca 10 antes que 2 porque la cadena "10" viene antes que "2" al hacer una comparación de cadenas.

Para solucionar esto, debes pasar una función de comparación al método sort(). El método sort() utilizará la función de comparación para determinar el orden de los elementos.

A continuación se ilustra la sintaxis del método sort():

array.sort(comparefunction)

El método sort() acepta un argumento opcional que es una función que compara dos elementos del array.

Si omites la función de comparación, el método sort() ordena los elementos con el orden de clasificación en función de los valores de punto de código Unicode de los elementos, como se mencionó anteriormente.

La función de comparación del método sort() acepta dos argumentos y devuelve un valor que determina el orden de clasificación. A continuación, se ilustra la sintaxis de la función de comparación:

function compare(a,b) {
  // ...
}

La función compare() acepta dos argumentos a y b. El método sort() ordenará los elementos según el valor de retorno de la función compare() con las siguientes reglas:

• Si compare(a,b) es menor que cero, el método sort() ordena a con un índice más bajo que b. En otras palabras.
• Si compare(a,b) es mayor que cero, el método sort() ordena b a un índice más bajo que a, es decir, b aparecerá primero.
• Si compare(a,b) devuelve cero, el método sort() considera que a es igual a b y deja sus posiciones sin cambios.

Para solucionar el problema de ordenar el número, puedes usar la siguiente sintaxis:

let numbers = [0, 1 , 2, 3, 10, 20, 30 ];
numbers.sort( function( a , b){
    if(a > b) return 1;
    if(a < b) return -1;
    return 0;
});

console.log(numbers);

Resultado:

[ 0,  1,  2, 3, 10, 20, 30 ]

O puedes definir la función de comparación usando la sintaxis de la función de flecha:

let numbers = [0, 1 , 2, 3, 10, 20, 30 ];
numbers.sort((a,b) => {
    if(a > b) return 1;
    if(a < b) return -1;
    return 0;
});

console.log(numbers);

Y el siguiente es el más simple ya que los elementos del arreglo son números:

let numbers = [0, 1, 2, 3, 10, 20, 30];
numbers.sort((a, b) => a - b);

console.log(numbers);

Ordenar un array de cadenas

Supongamos que tienes un array de cadenas con nombres de animales de la siguiente manera:

let animals = [
    'cat', 'dog', 'elephant', 'bee', 'ant'
];

Para ordenar los elementos del array de animales en orden ascendente alfabéticamente, usa el método sort() sin pasar la función de comparación como se muestra en el siguiente ejemplo:

let animals = [
    'cat', 'dog', 'elephant', 'bee', 'ant'
];
animals.sort();

console.log(animals);

Resultado:

[ 'ant', 'bee', 'cat', 'dog', 'elephant' ]

Para ordenar la matriz de animales en orden descendente, debes cambiar la lógica de la función de comparación y pasarla al método sort() como en el siguiente ejemplo.

let animals = [
    'cat', 'dog', 'elephant', 'bee', 'ant'
];

animals.sort((a, b) => {
    if (a > b)
        return -1;
    if (a < b)
        return 1;
    return 0;
});

console.log(animals);

Resultado:

[ 'elephant', 'dog', 'cat', 'bee', 'ant' ]

Supongamos que tienes una matriz que contiene elementos tanto en mayúsculas como en minúsculas de la siguiente manera:

// sorting array with mixed cases
let mixedCaseAnimals = [
    'Cat', 'dog', 'Elephant', 'bee', 'ant'
];

Para ordenar esta matriz alfabéticamente, debes usar una función de comparación personalizada para convertir todos los elementos al mismo caso, por ejemplo, mayúsculas para comparar y pasar esa función al método sort().

let mixedCaseAnimals = [
    'Cat', 'dog', 'Elephant', 'bee', 'ant'
];

mixedCaseAnimals.sort(function (a, b) {
    let x = a.toUpperCase(),
        y = b.toUpperCase();
    return x == y ? 0 : x > y ? 1 : -1;

});

Resultado:

[ 'ant', 'bee', 'Cat', 'dog', 'Elephant' ]

En este tutorial, has aprendido a utilizar el método sort()  de Array en JavaScript para ordenar arreglos.