Ordenar arrays com Javascript

Ordenar arrays com Javascript

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

Ferramentas de Inteligência Artificial para criar apresentações
21/01/2024JAVASCRIPT

Ferramentas de Inteligência Artificial para criar apresentações

Se você não domina PowerPoint e quer fazer uma apresentação, a Inteligência Artificial pode te ajudar

Saiba mais...
Sites e aplicativos para praticar o seu inglês
06/11/2022JAVASCRIPT

Sites e aplicativos para praticar o seu inglês

Veja dicas de como melhorar o seu inglês sem colocar a mão no bolso

Saiba mais...

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