Cómo ordenar datos contenidos en un Array

Para ordenar los datos de un array usamos la función sort(), como un método del propio array.

Si llamamos al método sin ninguna función como parámetro, el Array se ordena de menor a mayor, pero los datos numéricos que no sean reconidos como tales, se ordenan de menor a mayor por orden alfabético.

Si tenemos un array de este tipo: let coches = ['citroen','seat', 'audi'], al aplicar el método coches.sort() obtenemos esto: ['audi', 'citroen', 'seat']. Si queremos aplicar otros criterios de ordenación tenemos que usar la función de comparación como argumento para el método sort().

Ordenar datos numéricos

La forma básica de la función para ordenar un array con datos numéricos es esta:


        sort(function (a,b){
            return a - b;
        })
    

que se puede ver resumida así: sort((a,b) => a - b)

Ejemplo

Dado este array [215, 10, 50, 2], al aplicar la siguiente función obtenemos esto:


function ordenAsc() {
    serie.sort(function (a,b) {return a - b});
    for (let i = 0 ; i< serie.length; i++) {
        contenido +=`Elemento ${i + 1}: ${serie[i]} <br>`;
    }
    salida.innerHTML = contenido;
}
    

Si queremos ordenar de forma descendente cambiamos la salida de la función por {return b -a }:


function ordenDesc() {
    contenido = '';
    serie.sort( (a, b) => b - a);
    for (let i = 0; i < serie.length; i++) {
        contenido +=`Elemento ${i + 1}: ${serie[i]}<br>`;
    }
    salida.innerHTML = contenido;
}
    

Ordenar datos con texto

Si tenemos que ordenar texto de forma descendente, o usar un elemento de texto para ordenar una matriz multidimensional, tenemos que recurrir a los operadores mayor que y menor que (> y <). La estructura de la función es igual al caso anterior pero cambiando el operador menos (-) por uno de los dos.

Nota:

En la función de comparación que estamos escribiendo, obviamos el caso en que los valores sean iguales, y esto provoca errores en algunos navegadores. Al comparar si es únicamente mayor o menor, no especificamos qué ocurre cuando son iguales, y para evitar ese error tenemos que incluir en la función de comparación el supuesto en que son iguales, para que devuelva un valor cero. Esto ocurre con los operadores de comparación, pero no con el de la resta, porque cuando son iguales los valores, al hacer la resta de los dos nos devuelve el valor cero. Por lo tanto nuestra función function (a, b) { return a > b } debe quedar así:


        function (a, b) {
            if (a === b) {
                return 0;
            } else {
                return a > b ? 1 : -1; } 
        }
        

Ejemplo

Vamos a ordenar un array de este tipo: let coches = ['citroen','seat', 'audi']


    function ordenTxtAsc() {
        let contenido = '';
        coches.sort(function (a, b) {
            if (a === b) {
                return 0;
            } else {
                return a > b ? 1 : -1; }
        });
        for (let i = 0; i < coches.length; i++) { contenido +=`Elemento ${i + 1}: ${coches[i]} <br>`;
        }
        salida_txt.innerHTML = contenido;
    }
    

Para ordenar de forma descendente cambiamos el operador:


    function ordenTxtDesc() {
        let contenido = '';
        coches.sort(function (a, b) {
            if (a === b) {
                return 0;
            } else {
                return a > b ? 1 : -1; }
        });
        for (let i=0; i < coches.length; i++) { 
            contenido +=`Elemento ${i + 1}: ${coches[i]}<br>`;
        }
        salida_txt.innerHTML = contenido;
    }
    

Ordenar Arrays con más de una dimensión.

En este caso el planteamiento es el mismo que en los anteriores, pero en la función de comparación tenemos que indicar qué elemento del array sirve de criterio de ordenación. Eso se hace usando los índices de los elementos en el modo:

En el caso de que sean datos numéricos:


        mi_array.sort((a, b) => a[1] - b[1] )
    

En el caso de datos no numéricos (también vale para numéricos, obviamente):


        mi_array.sort(function (a, b) {
            if (a[0] === b[0]) {
                return 0;
            } else {
                return a[0] > b[0] ? 1 : -1;
            }
        })
    

Ordenar texto y números por números

Dado este array: let conjunto = [['Citroen',15000],['Seat', 12000],['Audi',1800],['Volvo',22000]];

Usamos esta función para mostrar la lista ordenada por precio de mayor a menor. Como son valores numéricos uso el operador menos (-), y eso me permite no poner el condicional igual a cero en la función de comparación. Pero hay que recordar que para datos tipo texto no valdría en todos los navegadores:


    function ordenaCjto() {
        let contenido = '';
        conjunto.sort((a,b)=> b[1] - a[1]);
        for (let i = 0; i < conjunto.length; i++){
            contenido +=`Precio: ${conjunto[i][1]} - Marca: ${conjunto[i][0]} <br>`;
        }
        salida_c.innerHTML = contenido;
    }
    

Si queremos ordenar el conjunto por los datos de texto:


    function ordenaTxtCjto() {
        let contenido = '';
        conjunto.sort(function (a, b) {
            if (a[0] == b[0]) {
                return 0;
            } else {
                return (a[0] < b[0]) ? 1 : -1; 
            }; 
        }); 
        for (let i=0; i < conjunto.length; i++) { 
            contenido +=`Precio: ${conjunto[i][1]} - Marca: ${conjunto[i][0]} <br>`;
        }
        salida_c.innerHTML = contenido;
    }