Ao contrário do indicado nos comentários e em outra resposta (que foi apagada), não precisa inverter o array. Basta trocar o a
e b
na comparação:
let words = ['pé', 'pato', 'ás', 'abelha'];
words.sort((a, b) => b.localeCompare(a));
console.log(words); // [ 'pé', 'pato', 'ás', 'abelha' ]
Ou seja, em vez de a.localeCompare(b)
, basta trocar para b.localeCompare(a)
, que a ordenação já será em ordem descrescente. Afinal, a ideia da função de callback passada para sort
é que ela deve retornar um número negativo se o primeiro parâmetro (no caso, a
) for menor que o segundo (b
). Ao inverter a chamada (em vez de verificar se a
é menor que b
, vejo se b
é menor que a
), o resultado acaba ficando "invertido", e o resultado será o array ordenado em ordem descrescente.
Já para considerar letras maiúsculas e minúsculas, não precisa de toUpperCase
, pois o próprio localeCompare
possui opções para configurar este comportamento. No caso, basta usar a opção sensitivity
. De acordo com a documentação, há vários valores diferentes para ter os mais diversos resultados:
sensitivity |
Diferencia acentos? |
Diferencia maiúsculas e minúsculas? |
Exemplo |
"base" |
não |
não |
a = á a = A |
"accent" |
sim |
não |
a ≠ á a = A |
"case" |
não |
sim |
a = á a ≠ A |
"variant" |
sim |
sim |
a ≠ á a ≠ A |
Um detalhe importante é que a ideia de localeCompare
é fazer comparações de acordo com as regras de determinado locale (conforme já explicado aqui). Ao não informar um locale, ele usa a implementação default do ambiente no qual o código está rodando (que pode ser o idioma configurado no browser/SO, por exemplo, mas vale lembrar que isso varia conforme a implementação).
De qualquer forma, se quer uma ordenação específica, sugiro informar o locale. Por exemplo, se quer que a ordenação siga as regras da língua portuguesa do Brasil (já que também existem as regras de Portugal, entre outros), pode usar 'pt-BR'
. Lembrando que há diferenças no caso de ter letras maiúsculas, por exemplo:
let locale = 'pt-BR';
let words = ['Ás', 'ás', 'Ás', 'joão', 'João'];
words.sort((a, b) => b.localeCompare(a, locale));
// maiúsculas antes
console.log(words); // [ 'João', 'joão', 'Ás', 'Ás', 'ás' ]
words = ['Ás', 'ás', 'Ás', 'joão', 'João'];
words.sort((a, b) => b.localeCompare(a, locale, { sensitivity: 'base' }));
// minúsculas e maiúsculas são iguais, mantém a ordem em que estão no array
console.log(words); // [ 'joão', 'João', 'Ás', 'ás', 'Ás' ]
A regra padrão do locale pt-BR
é colocar as maiúsculas depois (mas como está ordenando em ordem decrescente, "João" ficou antes de "joão"). Já se usarmos sensitivity: 'base'
, o "J" e "j" passam a ser considerados a mesma letra, e como a ordenação é estável a partir do ES2019, eles ficam na mesma ordem em que estavam no array original. Ou seja, não precisa usar toUpperCase
.
Aliás, como curiosidade, este é um caso em que usar reverse
daria um resultado diferente:
let locale = 'pt-BR';
let words = ['Ás', 'ás', 'Ás', 'joão', 'João'];
words.sort((a, b) => b.localeCompare(a, locale, { sensitivity: 'base' }));
// minúsculas e maiúsculas são iguais, mantém a ordem em que estão no array
console.log(words); // [ 'joão', 'João', 'Ás', 'ás', 'Ás' ]
words = ['Ás', 'ás', 'Ás', 'joão', 'João'];
// ordenando em ordem crescente
words.sort((a, b) => a.localeCompare(b, locale, { sensitivity: 'base' }));
console.log(words); // [ 'Ás', 'ás', 'Ás', 'joão', 'João' ]
words.reverse(); // invertendo
console.log(words); // [ 'João', 'joão', 'Ás', 'ás', 'Ás' ]
Veja que b.localeCompare(a, locale, { sensitivity: 'base' })
faz com que "joão" fique antes de "João" (pois o "j" e "J" são considerados iguais, e como a ordenação é estável, eles mantém a ordem em que estavam no array).
Agora, se trocarmos a
e b
no localeCompare
(ou seja, ordem crescente), ocorre a mesma coisa ("joão" fica antes de "João", já que sensitivity: 'base'
faz a comparação case insentivive). E depois, ao inverter o array, "João" passa a ficar antes de "joão".
Se não fizer diferença (e eu entendo que não faz, afinal, se a ordenação é case insensitive, tanto faz "João" estar antes ou depois de "joão"), ainda sim eu usaria a primeira opção, já que reverse
acaba percorrendo o array mais uma vez, de forma desnecessária - para que fazer isso, se o localeCompare
já retorna na ordem que precisa?
Comportamento similar pode ser visto com caracteres acentuados:
let locale = 'pt-BR';
let words = ['as', 'ás', 'as', 'ás'];
words.sort((a, b) => b.localeCompare(a, locale));
// maiúsculas antes
console.log(words); // [ 'ás', 'ás', 'as', 'as' ]
words = ['as', 'ás', 'as', 'ás'];
words.sort((a, b) => b.localeCompare(a, locale, { sensitivity: 'base' }));
console.log(words); // [ 'as', 'ás', 'as', 'ás' ]
O locale pt-BR
coloca as letras acentuadas depois das não-acentuadas (mas como é ordem decrescente, então os acentos vieram primeiro). Por isso no primeiro caso todas as ocorrências de "ás" vieram antes de "as".
Mas a opção sensitivity: 'base'
faz com que não haja esta diferenciação (ou seja, a
e á
são consideradas a mesma letra), portanto elas mantém a ordem em que estavam no array original (desde que o seu browser já esteja de acordo com o ES2019, que garante que a ordenação é estável).
Você também poderia usar caseFirst: 'lower'
para colocar as minúsculas primeiro, mudar o sensitivity
de acordo com a tabela já informada acima, etc, enfim, localeCompare
já te dá inúmeras opções para ordenar da forma desejada.
Resumindo...
Para a ordem em si, basta trocar o a
e b
de lugar (a.localeCompare(b)
para ordem crescente, b.localeCompare(a)
para decrescente), sem a necessidade de ficar invertendo o array. Quanto às demais regras (acentos, maiúsculas/minúsculas, etc), basta usar as opções de localeCompare
(veja a documentação para mais detalhes).
Por fim, você também pode usar um Intl.Collator
, que funciona de maneira similar à localeCompare
(inclusive, aceita as mesmas opções):
let ordem = new Intl.Collator('pt-BR', { sensitivity: 'base' });
let words = ['pé', 'pato', 'ás', 'abelha', 'as'];
words.sort((a, b) => ordem.compare(b, a));
console.log(words);
A ideia é basicamente a mesma: ordem.compare(a, b)
para ordem crescente, e ordem.compare(b, a)
para decrescente. E para as regras de ordenação de maiúsculas/minúsculas, acentos, etc, use as opções já mencionadas.
A diferença é que, segundo a documentação, Intl.Collator
tem desempenho melhor que localeCompare
quando a quantidade de comparações a serem feitas for muito grande (por exemplo, se for ordenar um array com muitas strings). Mas o funcionamento das regras de ordenação são os mesmos.
words.reverse();
Intl.Collator().compare(b,a)
(invertera
eb
, a mesma ideia que fiz na minha resposta). Aliás, como já explicado aqui,Collator
elocaleCompare
funcionam da mesma maneira, a única diferença é que oCollator
é mais performático caso precise fazer várias comparações