Neste artigo, você vai aprender como ordenar arrays de números e ordenar array de objetos no JavaScript.

Um array em JavaScript possui um método chamado sort, que permite a ordenação de um array. Vamos começar com um exemplo simples, um array de números.

var numeros =[10, 1, 6, 3, 2, 8, 9, 10, 5];

numeros.sort();

console.log(numeros);

Perceba que no console o número "10" vai aparecer antes do número "2", para a ordenação ser feita de forma correta, temos que passar uma função de comparação para o método "sort". Vamos fazer a seguinte alteração:

function ordenar_numeros(a, b){

return a - b;

}

var numeros =[10, 1, 6, 3, 2, 8, 9, 10, 5];

numeros.sort(ordenar_numeros);

console.log(numeros);

Agora você deve ver em seu console a ordenação feita de forma correta.

Vamos agora fazer a ordenação de um array de objetos, nosso objetivo será ordenar pelo nome que está dentro de cada objeto. Primeiro, vamos criar o nosso array de objetos:

var alunos = [ 

{ id: 1, nome: 'João' },

{ id: 2, nome: 'Lucas'},

{ id: 3, nome: 'Matheus'},

{ id: 4, nome: 'Thiago'},

{ id: 5, nome: 'Simeão'},

{ id: 6, nome: 'José'},

{ id: 7, nome: 'Maria'},

{ id: 8, nome: 'Gabriel'}

];

Da mesma forma que fizemos para o array de números, vamos utilizar o método sort e vamos criar uma função de ordenação. Vamos utilizar o código a seguir:

function ordenar(a,b) {

if (a.nome < b.nome)

     return -1;

  if (a.nome > b.nome)

    return 1;

  return 0;

}

alunos.sort(ordenar);

console.log(ordenar);

Ao conferir o resultado no console, você vai perceber que nossa ordenação quase funcionou. Eu tenho um problema com os nomes que começam com a letra "J". O resultado foi primeiro "José" e depois "João". O correto seria o contrário. Qual o motivo do erro?

A funçao de ordenação diferencia maiúsculas de minúsculas, além disso, ela considera caracteres acentuados como "maiores" que os demais. Para resolver ambos os problemas, seria necessário padronizar os nomes para minúsculo ou maiúsculo, e removendo os acentos.

Considerando isso, vamos ajustar a nossa função de ordenação e fazer um novo teste:

function ordenar(a,b) {

var item1 = a.nome.toLowerCase().replace(/[àáâãäå]/,"a").replace(/[èéêë]/,"e").replace(/[ìíîï]/,"i").replace(/[òóôõö]/,"o").replace(/[ùúûü]/,"u").replace(/[ç]/,"c").replace(/[^a-z0-9]/gi,'')

var item2 = b.nome.toLowerCase().replace(/[àáâãäå]/,"a").replace(/[èéêë]/,"e").replace(/[ìíîï]/,"i").replace(/[òóôõö]/,"o").replace(/[ùúûü]/,"u").replace(/[ç]/,"c").replace(/[^a-z0-9]/gi,'')

return item1 < item2 ? -1 : item1 > item2 ? 1 : 0;

}

alunos.sort(ordenar);

console.log(alunos);

Comparando com a primeira solução, antes de fazer as comparações (que foram simplicadas em apenas uma linha de código), foi feita a padronização do nome, que ficou em minúsculo, e o nome também ficou sem acentos. Essa alteração foi feita apenas para fins de ordenação, no array atualizado o nome original foi mantido.