Classificar arrays é uma das tarefas mais comuns que você fará ao programar em JavaScript. Portanto, como uma programação JavaScript, é essencial que você aprenda como classificar corretamente um array porque você fará isso muito em projetos da vida real. E a técnica de classificação errada pode realmente desacelerar seu aplicativo!
No passado, os desenvolvedores da Web precisavam usar bibliotecas de terceiros, como jQuery, e escrever grandes volumes de código apenas para classificar valores dentro de uma coleção de listas. Felizmente, o JavaScript evoluiu tremendamente desde então. Hoje, você pode classificar um array JavaScript com milhares de valores em apenas uma linha de código, sem usar nenhuma biblioteca de terceiros.
Neste artigo, mostrarei como classificar coleções de arrays simples e complexas em JavaScript. Estaremos usando o JavaScript sort() método para ordenar:
- uma matriz de números
- uma matriz de cordas
- uma matriz de objetos complexos
- por nome (string)
- por ID (número)
- por data de nascimento (data)
Ao final deste tutorial, você deverá ter um entendimento completo de como o JavaScript sort() método funciona e como usá-lo para classificar uma matriz de números, strings e objetos.
JavaScript sort() método
O JavaScript sort() é um dos métodos de array mais úteis e comumente usados em JavaScript. Ele permite que você classifique rápida e facilmente uma matriz de elementos de dados em ordem crescente ou decrescente.
Você pode usar o método para classificar uma matriz de números, strings, datas ou até mesmo objetos. O sort() O método funciona pegando uma matriz de elementos e classificando-os de acordo com alguns critérios. Os critérios podem ser uma função, um operador de comparação ou uma matriz de valores.
Classificando uma matriz de números
Classificar uma matriz de números é bastante simples com o método sort método:
1 |
let numbers = [12, 88, 57, 99, 03, 01, 83, 21] |
2 |
console.log(numbers.sort()) |
3 |
|
4 |
// output [1, 12, 21, 3, 57, 83, 88, 99]
|
No código acima, o sort() método classificou o numbers em ordem crescente, que é o modo padrão.
Você também pode classificar os números de trás para frente (ou seja, em ordem decrescente). Para conseguir isso, você precisará criar a seguinte função de classificação personalizada:
1 |
function desc(a, b) { |
2 |
return b - a |
3 |
}
|
Esta função recebe dois parâmetros (a e b) que representam dois valores a serem classificados. Se retornar um número positivo, o sort() método vai entender que b deve ser classificado antes a. Se retornar um número negativo, então sort() vai entender isso a deveria vir antes b. Esta função retornará um número positivo se b > asignificado b virá antes a se a é menos do que b.
1 |
console.log(numbers.sort(desc)) |
2 |
// output [99, 88, 83, 57, 21, 12, 3, 1]
|
A seguir veremos como classificar um array de strings.
Classificando um Array de Strings em Java Script
Classificar valores de string é igualmente simples:
1 |
let names = ["Sam", "Koe", "Eke", "Victor", "Adam"] |
2 |
console.log(names.sort()) |
3 |
|
4 |
// output ["Adam", "Eke", "Koe", "Sam", "Victor"]
|
Aqui está a função para classificar as mesmas strings em ordem decrescente:
1 |
function descString(a, b) { |
2 |
return b.localeCompare(a); |
3 |
}
|
Se o segundo nome vier depois do primeiro em ordem alfabética, retornamos 1 da função, o que significa que o segundo nome virá primeiro na matriz classificada. Caso contrário, voltamos -1ou 0 se ambos forem iguais.
Agora, se você executar o método sort na matriz de nomes, com desc como argumento, você obtém uma saída diferente:
1 |
console.log(names.sort(descString)) |
2 |
|
3 |
// ["Victor", "Sam", "Koe", "Eke", "Adam"]
|
Classificando um Array de Objetos Complexos em Java Script
Até agora, classificamos apenas valores simples, como string e números. Você também pode classificar uma matriz de objetos usando o sort() método. Vamos ver como nas seções seguintes.
Classificando objeto por nome (uma propriedade de string)
Aqui temos um array de pessoas com vários objetos de pessoa. Cada objeto compreende o id, name e dob propriedades:
1 |
const pessoas = [ |
2 |
{id: 15, name: "Blessing", dob: '1999-04-09'}, |
3 |
{id: 17, name: "Aladdin", dob: '1989-06-21'}, |
4 |
{id: 54, name: "Mark", dob: '1985-01-08'}, |
5 |
{id: 29, name: "John", dob: '1992-11-09'}, |
6 |
{id: 15, name: "Prince", dob: '2001-09-09'} |
7 |
]
|
Para classificar esse array pela propriedade name, temos que criar e passar uma função de classificação personalizada para o método sort:
Esse byName função de classificação personalizada que receberá dois objetos de cada vez e comparará ambas as propriedades de nome para ver qual é maior (ou seja, qual vem primeiro em ordem alfabética):
1 |
function byName(a, b) { |
2 |
return a.name.localeCompare(b.name); |
3 |
}
|
Agora, se você executar o código novamente, obterá isto:
1 |
[
|
2 |
{id: 17, name: "Aladdin", dob: '1989-06-21'}, |
3 |
{id: 15, name: "Blessing", dob: '1999-04-09'}, |
4 |
{id: 29, name: "John", dob: '1992-11-09'}, |
5 |
{id: 54, name: "Mark", dob: '1985-01-08'}, |
6 |
{id: 32, name: "Prince", dob: '2001-09-09'} |
7 |
]
|
Classificando por ID (uma propriedade de número)
No exemplo anterior, estávamos classificando pelos nomes, que eram strings. Neste exemplo, classificaremos pelas propriedades de ID de cada objeto (números).
Para isso, podemos fazer uso da seguinte função:
1 |
function byID(a, b) { |
2 |
return parseInt(a.id) - parseInt(b.id) |
3 |
}
|
Na função usamos parseInt() para garantir que o valor seja um número, subtraímos os dois números para obter um valor negativo, positivo ou zero. Com esta função, você pode classificar qualquer array de objetos por uma propriedade numérica comum.
1 |
console.log(students.sort(byID)) |
2 |
/*
|
3 |
[
|
4 |
{id: 15, name: "Blessing", dob: '1999-04-09'},
|
5 |
{id: 17, name: "Aladdin", dob: '1989-06-21'},
|
6 |
{id: 29, name: "John", dob: '1992-11-09'},
|
7 |
{id: 32, name: "Prince", dob: '2001-09-09'}
|
8 |
{id: 54, name: "Mark", dob: '1985-01-08'},
|
9 |
]
|
10 |
*/
|
Classificando por data
Digamos que você queira criar um aplicativo que permita aos usuários baixar uma lista de nomes do banco de dados, mas deseja que os nomes sejam organizados em ordem cronológica, com base na data de nascimento (do mais velho ao mais novo).
Esta função classifica a data de nascimento cronologicamente por ano, mês e dia.
1 |
function byDate(a, b) { |
2 |
return new Date(a.dob).valueOf() - new Date(b.dob).valueOf() |
3 |
}
|
O Date().valueOf() chamada retorna um carimbo de data/hora para cada data. Em seguida, fazemos a mesma subtração dos exemplos anteriores para determinar a ordem.
Demonstração:
1 |
console.log(students.sort(byDate)) |
2 |
|
3 |
/*
|
4 |
[
|
5 |
{id: 54, name: "Mark", dob: '1985-01-08'},
|
6 |
{id: 17, name: "Aladdin", dob: '1989-06-21'},
|
7 |
{id: 29, name: "John", dob: '1992-11-09'},
|
8 |
{id: 15, name: "Blessing", dob: '1999-04-09'},
|
9 |
{id: 32, name: "Prince", dob: '2001-09-09'}
|
10 |
]
|
11 |
*/
|
Esse método específico pode ser bastante útil em situações que envolvam a ordem de datas, como um aplicativo que determina quem se qualifica para pensão ou algum outro benefício relacionado à idade.
Conclusão
No geral, a classificação de elementos em JavaScript é bastante simples e direta ao usar os vários métodos integrados. Se você precisa classificar uma matriz de números, strings, objetos ou datas, existe um método que pode fazer o trabalho facilmente. Com a ajuda desses métodos, você pode classificar de forma rápida e fácil quaisquer dados em seu aplicativo JavaScript.
