Como Ordenar um Array - O método sort

Neste tutorial de nossa Apostila de JavaScript, vamos aprender o que é, para que serve e como usar o método sort para ordenar elementos de um array.

Estudar array pela Apostila JavaScript Progressivo

Por que ordenar ?

Uma das coisas mais importantes no mundo da computação, é o sorting, ou seja, a ordenação, a classificação de elementos segundo alguma propriedade.

Por exemplo, ordenar números em ordem crescente ou decrescente.

Certamente você já acessou algum site de loja online e ficou pesquisando o preço de produtos.
Lá, existiam as opções:

Ordenar por menor preço
Ordenar por maior preço
Ordenar por mais vendidos
Ordenar por mais bem avaliados

Isso nada mais é que ordenação de arrays.
Você tem um vetor, onde cada elemento é um produto e você pode ordenar do mais barato pro mais caro, do mais caro pro mais barato, os mais acessados, os mais comprados etc etc.

O JavaScript provém, de maneira nativa, métodos (funções) que já fazem isso por você, e é o que vamos estudar agora.

Ordenar um Array - Método sort

Todo objeto do tipo array, ou seja, todo e qualquer vetor, tem uma função embutida, um método, chamado sort().

Para invocarmos o método sort() do array de nome vetor, basta fazermos:
vetor.sort()

Mas aí tem um porém, sem passar nenhum argumento, ele vai fazer uma ordenação de STRINGS, ou seja, alfabética, de texto.

Já se fizermos:
sorte(a,b)

Ele retorna:
Número negativo : se o primeiro argumento for menor que o segundo
0 : se os argumento são iguais
Número positivo: se o primeiro argumento for maior que o segundo

Como Ordenar Números com o Método sort

Existe um parâmetro no método sort: funcaoOrdena
É uma função de comparação, que podemos usar como argumento para fazer a ordenação dos elementos de um array.

Vamos criar uma função de ordenação chamada funcaoOrdena que simplesmente subtrai o primeiro número do segundo:

function funcaoOrdena( x, y )
{
 return parseInt( x ) - parseInt( y );
}

Agora basta passarmos essa função como argumento para o método sort.

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body onload="main()">
 </body>
</html>

Código script.js:

function main()
{
 var vetor = [10, 2, 5, 4, 3, 1];

 document.write("Vetor: " + vetor + "<br />");
 document.write("Chamando a função ordena()..."+ "<br />");
 ordena(vetor);
 document.write("Vetor: " + vetor + "<br />");
}

function ordena (vetor)
{
 vetor.sort( funcaoOrdena );
}

function funcaoOrdena( x, y )
{
 return parseInt( x ) - parseInt( y );
}

Resultado:
Vetor: 10,2,5,4,3,1
Chamando a função ordena()...
Vetor: 1,2,3,4,5,10

O que ocorreu por trás dos panos é que o método sort mandou de dois em dois números do array, para a função funcaoOrdena e baseado no retorno dela, foi ordenando os elementos.

Se a função de comparação é:
funcao(x,y)
{
return x-y;
}

A sort ordena os números na ordem crescente.
Se for:
funcao(x,y)
{
return y-x;
}

Ela retorna na ordem decrescente.
Note que usamos parseInt apenas para nos certificarmos que estamos lidando com números inteiros. Se você estiver usando números no array, como float, e não usar parseInt vai dar tudo certo também, sem problemas.

JavaScript Progressivo