Uno de los métodos más utilizados para ordenar elementos en un arreglo es el método .sort de JavaScript. Si bien es un método conocido por muchos, aún existen personas que quieren conocer más acerca de su uso y aplicaciones prácticas.
En este artículo, vamos a profundizar en el método .sort de JavaScript, y a mostrar varios casos de uso prácticos para diferentes tipos de arreglos.
¿Qué es el método .sort?
El método .sort de JavaScript es una función incorporada que se utiliza para ordenar los elementos de un arreglo. Básicamente, este método toma un arreglo y lo reordena de manera que los elementos estén en orden ascendente o descendente, según sea necesario.
La sintaxis del método .sort es la siguiente:
js
arr.sort([compareFunction]);
Donde arr es el arreglo que deseas ordenar, y compareFunction es una función opcional que define el criterio de ordenamiento personalizado.
En ausencia de una función de comparación, el método .sort ordena los elementos del arreglo en orden alfabético si son cadenas de texto, y en orden numérico si son valores numéricos.
Ahora bien, si el arreglo contiene objetos, el método .sort ordenará los objetos en función del valor de una propiedad especificada en la función de comparación.
Ordenando arreglos numéricos
Si deseas ordenar un arreglo de números utilizando el método .sort, puedes hacerlo de manera sencilla. A continuación, te mostraremos cómo:
js
const arr = [5, 8, 1, 7];arr.sort();console.log(arr); // [1,5, 7, 8]
Para ordenar un arreglo númerico en orden ascendente, simplemente se llama al método .sort() sin pasarle ningún argumento. El método ordena los elementos en orden ascendente según su valor.
Ten en cuenta que valores superiores a 9 van antes que el 2 según su valor unicode. Si el arreglo de números contines valores superiores a 9 debemos recurrir a la función de comparación.
js
const numeros = [4, 2, 7, 10, 12, 11, 1, 3, 5];numeros.sort();console.log(numeros); //[1, 10, 11, 12, 2, 3, 4, 5, 7]// #### Utilizando la función de comparación ####const numeros = [4, 2, 7, 10, 12, 11, 1, 3, 5];numeros.sort((a, b) => a - b);console.log(numeros); // [1, 2, 3, 4, 5, 7, 10, 11, 12]
La función hace una resta de a - b, si el resultado es negativo se considera que a es menor que b y se colocará primero en el ordenamiento, de lo contrario si el resultado es positivo se considera que a es mayor que b y se colocará después en el ordenamiento.
Si resultado es cero, significa que ambos elementos son iguales y no es necesario cambiar su orden.
Ordenar arreglo de números en forma descendente en javascript
Si necesitas ordenar el arreglo en forma descendete despues de aplicar el método .sort() puedes usar .reverse() para obtener el arreglo ordenado en forma inversa
js
const arr = [9, 13, 20, 10, 5, 8, 1, 7];arr.sort((a, b) => a - b).reverse();console.log(arr); //[(20, 13, 10, 9, 8, 7, 5, 1)];
También en la función de comparación puedes invertir el orden de comparación y restar b - a para obtenerel array ordenado en forma descendente sin usar el método .reverse()
js
const numeros2 = [4, 2, 7, 10, 12, 11, 1, 3, 5];numeros2.sort((a, b) => b - a);console.log(numeros2); // [12, 11, 10, 7, 5, 4, 3, 2, 1]
Ordenando arrays de cadenas de texto con javascript
también se puedes utilizar esta función para ordenar arrays compuestos por strings:
js
const arr = ["manzana", "naranja", "banana", "uva"];arr.sort();
En este ejemplo, el método .sort ordenará los elementos del arregloarren orden alfabético. Si deseas ordenar el arreglo en orden inverso, puedes hacer lo siguiente:
js
const arr = ["manzana", "naranja", "banana", "uva"];arr.sort((a, b) => b.localeCompare(a));
En este caso, se usa la función localeCompare para comparar las cadenas de texto y ordenar el arreglo en orden descendente.
Ten en cuenta que el método .sort trata las cadenas de texto como si estuvieran en minúsculas, lo que significa que las letras mayúsculas y minúsculas no se ordenan de manera diferente.
Si deseas que el método .sort tenga en cuenta las mayúsculas y minúsculas, puedes hacer lo siguiente:
js
const arr = ["Manzana", "naranja", "banana", "Uva"];arr.sort((a, b) => a.localeCompare(b, "es", { sensitivity: "accent" }));
En este caso, utilizamos la opción sensitivity para indicarle a la función localeCompare que tenga en cuenta las diferencias entre mayúsculas y minúsculas.
Ten en cuenta que el método .sort también puede tratar de manera diferente los caracteres especiales, como las letras acentuadas o las diéresis.
Si necesitas un ordenamiento más preciso, puedes utilizar bibliotecas externas o funciones personalizadas.
Ordenando arreglos de objetos con el método .sort
En este caso, el método .sort ordenará los objetos del arreglo en función de una propiedad específica de cada objeto. ejemplo:
js
const personas = [{ nombre: "Juan", edad: 25 },{ nombre: "Ana", edad: 20 },{ nombre: "Pedro", edad: 30 },];
Podemos ordenar este arreglo por edad de la siguiente manera:
js
personas.sort((a, b) => a.edad - b.edad);
En este caso, utilizamos una función de comparación que compara la propiedad edad de cada objeto y devuelve un valor negativo, cero o positivo, según corresponda. Esto ordenará el arreglo en función de la propiedad edad.
También podemos ordenar el arreglo en orden descendente de la siguiente manera:
js
personas.sort((a, b) => b.edad - a.edad);
Para este caso, simplemente se cambia el orden de los argumentos en la función de comparación.
Si quieremos ordenar el arreglo en función de otra propiedad, como el nombre, podemos hacer lo siguiente:
js
personas.sort((a, b) => a.nombre.localeCompare(b.nombre));
En este caso, utilizamos la función localeCompare para comparar los valores de la propiedad nombre de cada objeto y ordenar el arreglo en orden alfabético.
Ten en cuenta que el método .sort modificará el arreglo original en lugar de crear uno nuevo. Si necesitas crear una copia del arreglo antes de ordenarlo, puedes utilizar el operador de propagación o la función slice.
Usos adicionales del método .sort
Además de ordenar arreglos, el método .sort tiene otros usos útiles en JavaScript.
Eliminación de elementos duplicados de un arreglo
Si tenemos un arreglo que contiene elementos duplicados y queremos eliminarlos, podemos utilizar la función .sort:
js
const numeros = [2, 5, 1, 6, 3, 5, 1, 2];const numerosSinDuplicados = [...new Set(numeros)].sort();
En este ejemplo, utilizamos el operador de propagación para crear una copia del arreglo original y eliminamos los elementos duplicados utilizando el objeto Set de JavaScript. Luego, utilizamos el método .sort para ordenar el arreglo resultante.
Ordenamiento de subconjuntos de arreglos
Si queremos ordenar solo un subconjunto de elementos de un arreglo, podemos utilizar el método .slice para crear un nuevo arreglo que contenga solo los elementos que deseamos ordenar y luego aplicar .sort a ese subconjunto.
js
const numeros = [2, 5, 1, 6, 3];const numerosOrdenados = numeros.slice(1, 4).sort();
En este ejemplo, utilizamos el método .slice para crear un nuevo arreglo que contiene los elementos desde la posición 1 hasta la posición 3 del arreglo original. Luego, utilizamos el método .sort para ordenar ese subconjunto.
Combinación del método .sort con otros métodos de arreglo de JavaScript
Para ejemplificar de forma clara como podemos combinar el método .sort con otros métodos de javascript veamos el siguiente ejemplo:
Dado un arreglo de números debemos filtrar solo aquellos que sean primos y ordenarlos de mayor a menor, típica tarea de programación.
js
const numeros = [2, 3, 5, 7, 90, 34, 911, 13, 17, 19, 23, 42];const numerosPrimos = numeros.filter(numero => {for (let i = 2; i < numero; i++) {if (numero % i === 0) {return false;}}return true;});const numerosPrimosDeMayorAmenor = numerosPrimos.sort((a, b) => b - a);console.log(numerosPrimosDeMayorAmenor); // [911, 23, 19, 17, 13, 7, 5, 3, 2]
Conclusiones finales
Recuerda que el método .sort es una herramienta poderosa, pero que debe utilizarse con precaución y sabiduría. Al trabajar con arreglos grandes, asegúrate de optimizar el proceso de ordenamiento y combinar el método .sort con otros métodos de arreglo para obtener los mejores resultados.
Esperamos que esta publicación haya sido útil y clara para ti. Si tienes preguntas o deseas compartir tus experiencias utilizando el método .sort.
Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.
Sobre mi