Uso del método sort() para ordenar los valores de un array

El método sort() permite ordenar los valores de un array haciendo una comparación por pares de valores y desplazándolos dentro del array según el criterio de ordenación elegido.

Para ampliar su funcionalidad se puede usar una función auxiliar que recibe dos parámetros, los cuales hacen referencia a cada uno de los valores que se está comparando en cada iteración.

Si el array a ordenar contiene a su vez más arrays se puede usar la notación por posición dentro de la función auxiliar para indicar qué campo del segundo array queremos usar como criterio de ordenación.

Primer caso: Array que contiene texto

En este caso, si queremos ordenar el array de forma ascendente, solo tenemos que aplicar el método sobre el array sin usar ningún parámetro adicional.


        let pintores = ['Picaso', 'Dalí', 'Velázquez', 'Goya', 'Antonio López', 'Tàpies'];
        document.querySelector('#btn_o1').onclick = () => {
            pintores.sort();
            document.querySelector('#orden_1').textContent = pintores;
        }

Ordena este array:

Ordenar arrays numéricos

En este caso ya tenemos que recurrir a una función dentro del método sort para indicar si queremos ordenar de forma ascendente o descendente.

  • Esta función incluye dos parámetros que hacen referencia al primer y segundo valor respectivos de la cadena de comparación que se va a ejecutar por cada par de valores del array.
  • Si queremos un orden ascendente la función de comparación retornará la resta del primer valor menos el segundo, y si el orden es descendente lo hará al revés.

        let edades = [48, 23, 22, 42, 50, 5, 10, 11, 15, 16, 16, 20, 23, 74, 67, 95, 61];
        document.querySelector('#orden_2').textContent = edades;
        function numAsc(a, b) {
            return a - b;
        }
        function numDsc(a, b) {
            return b - a;
        }
        document.querySelector('#btn_o2').onclick = () => {
            edades.sort(numAsc);
            document.querySelector('#orden_2').textContent = edades;
        }
        document.querySelector('#btn_o3').onclick = () => {
            edades.sort(numDsc);
            document.querySelector('#orden_2').textContent = edades;
        }

Ordenar texto Descendente

En este caso nos tenemos que basar en la función anterior pero cambiando el operador "-" por ">", y comprobando primero si los valores a ordenar son iguales:

  1. Comprobamos si los dos valores son iguales para evitar errores en algunos navegadores
  2. El operador ">" sirve tanto para ordenar datos tipo texto como número

        function ordenaTxtDesc(a, b) {
            if (a === b) {
                return 0;
            } else {
                return a > b ? -1 : 1;
            }
        }
        document.querySelector('#btn_o4').onclick = () => {
            pintores.sort(ordenaTxtDesc);
            document.querySelector('#orden_3').textContent = pintores;
        }

Usar una sola función para ordenar texto y número de forma ascendente y descendente.

Si parametrizamos la función la podemos utilizar en cualqueir contexto que necesitemos ordenar 1 array

  1. Pasamos el array a ordenar como primer parámetro
  2. Indicamos el tipo de orden como segundo parámetro, que será 1 para orden ascendente y -1 para descendente
  3. Como la función siempre retorna 1 o -1 podemos invertir ese resultado multiplicándolo por el segundo parámetro

        let mas_caros = [['Picaso', 9000], ['Dalí', 5000], ['Velázquez', 12000], ['Goya', 8000], ['Antonio López', 7000], ['Tàpies', 6000]];
        function ordenaTodo(datos, orden) {
            datos.sort((a, b) => {
                if (a === b) {
                    return 0;
                } else {
                    return (a > b ? 1 : -1) * orden;
                }
            })
            document.querySelector('#orden_4').textContent = datos;
        }
        document.querySelector('#btn_o5').onclick = () => { ordenaTodo(pintores, 1) }
        document.querySelector('#btn_o6').onclick = () => { ordenaTodo(pintores, -1) }
        document.querySelector('#btn_o7').onclick = () => { ordenaTodo(edades, 1) }
        document.querySelector('#btn_o8').onclick = () => { ordenaTodo(edades, -1) }

Ordenar Arrays de más de una dimensión

Cuando el array principal a ordenar está compuesto por otros arrays y queremos usar un campo del segundo array como criterio de ordenación usaremos la misma función que en el caso anterior, pero indicando en los parámetros a y b qué campo de a y b queremos usar como criterio de ordenación.

  1. Tenemos un array de dos dimensiones
  2. Hemos preparado 1 función distinta para ordenar por cada uno de los campos de forma ascendente 

        function primerParmetro(a, b) {
            if (a[0] === b[0]) {
                return 0
            } else {
                return a[0] > b[0] ? 1 : -1
            }
        }
        function segundoParmetro(a, b) {
            if (a[1] === b[1]) {
                return 0
            } else {
                return a[1] > b[1] ? 1 : -1
            }
        }
        function cotizaPintor() {
            mas_caros.sort(primerParmetro)
            document.querySelector('#orden_5').textContent = mas_caros
        }
        function cotizaDos() {
            mas_caros.sort(segundoParmetro)
            document.querySelector('#orden_5').textContent = mas_caros
        }
        document.querySelector('#btn_o9').onclick = cotizaPintor
        document.querySelector('#btn_o10').onclick = cotizaDos

Todo junto

Vamos a hacer una función única que permita ordena un array de 2 dimensiones por cualquiera de sus columnas, especificando también el tipo de orden (ascendente o descendente)

  1. Configuramos la función con 3 parámetros: datos a ordenar, campo por el que ordenar y criterio de ordenación
  2. La función después de ordenar el array llama a una nueva función para crear un listado en el DOM
  3. Esa función recibe dos parámetros: el listado de datos y el id del elemento del DOM en el que insertar los datos

        function ordenArrayMultiple(datos, campo, orden) {
            datos.sort((a, b) => {
                if (a[campo] === b[campo]) {
                    return 0;
                } else {
                    return (a[campo] > b[campo] ? 1 : -1) * orden
                }
            })
            creaListado(datos, '#cotizaciones');
        }
        function creaListado(lista, destino) {
            //identificar el destino en el DOM
            let nodo_destino = document.querySelector(destino);
            if (!nodo_destino || !lista) {
                return;
            }
            nodo_destino.innerHTML = '';
            let contenedor_ul = document.createElement('ul');
            lista.forEach((elemento) => {
                let elemento_lista = document.createElement('li');
                elemento_lista.textContent = elemento[0] + ' -> ' + elemento[1];
                contenedor_ul.append(elemento_lista);
            })
            nodo_destino.append(contenedor_ul);
        }
        document.querySelector('#btn_total_1').onclick = () => ordenArrayMultiple(mas_caros, 0, 1)
        document.querySelector('#btn_total_2').onclick = () => ordenArrayMultiple(mas_caros, 0, -1)
        document.querySelector('#btn_total_3').onclick = () => ordenArrayMultiple(mas_caros, 1, 1)
        document.querySelector('#btn_total_4').onclick = () => ordenArrayMultiple(mas_caros, 1, -1)

En el siguiente listado muestra los datos según el criterio de ordenación seleccionado