JAVASCRIPT

Ordenar arrays com Javascript

02/02/2020JAVASCRIPT

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.

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

Outros conteudos que podem ser de seu interesse

API REST em 30 segundos com NodeJS
30/12/2020JAVASCRIPT

API REST em 30 segundos com NodeJS

Nunca foi tão fácil prototipar uma API REST usando NodeJS

Saiba mais...
Jogos e desafios para quem quer estudar programação
08/05/2022JAVASCRIPT

Jogos e desafios para quem quer estudar programação

Não importa se é frontend, backend ou mobile, tem sempre um desafio esperando por você

Saiba mais...

Conteúdo sobre banco de dados sem complicação!

MySQL - Referência Rápida

 

SQL Server - Referência Rápida

 

SQL vs Mongo