Ordenação de array de objetos por string: 5 maneiras para JavaScript

Ordenação de array de objetos por propriedade de string: analisando uma pergunta popular do Stack Overflow

Imagine: você tem uma lista de usuários, produtos ou artigos. Cada elemento é um objeto com várias propriedades: nome, preço, data, classificação. E você precisa ordenar tudo isso, digamos, pelo sobrenome em ordem alfabética. Uma tarefa que parece simples, mas na prática traz surpresas. Não é à toa que a pergunta "Sort array of objects by string property value" no Stack Overflow tenha milhares de visualizações e dezenas de respostas.

Neste artigo, não vamos apenas fornecer o código pronto. Vamos analisar 5 maneiras de ordenação, do básico ao avançado, identificar as armadilhas típicas e mostrar como evitá-las. Ao final, você será capaz de ordenar qualquer dado com uma mão nas costas.

O que é ordenação de array de objetos em JavaScript?

Em JavaScript, existe o método nativo Array.prototype.sort(). Mas com objetos, ele não funciona de forma óbvia. Se você chamar sort() sem argumentos, ele tentará comparar os elementos como strings. Para números, isso traz uma surpresa: [1, 20, 3].sort() retornará [1, 20, 3], e não [1, 3, 20]. Para objetos, é uma bagunça completa.

Portanto, precisamos de uma função de comparação (comparator). Ela recebe dois elementos e retorna:

\n
• um número negativo, se o primeiro elemento for menor que o segundo;
\n
• 0, se forem iguais;
\n
• um número positivo, se o primeiro for maior.
\n

Aqui está a estrutura básica de ordenação de um array de objetos por uma propriedade de string:

// Array original\nconst users = [\n    { name: 'Иван', age: 25 },\n    { name: 'Анна', age: 30 },\n    { name: 'Борис', age: 22 }\n];\n\n// Ordenação pelo campo name\nusers.sort((a, b) => {\n    if (a.name < b.name) return -1;\n    if (a.name > b.name) return 1;\n    return 0;\n});\n\nconsole.log(users);\n// [{ name: 'Анна', age: 30 }, { name: 'Борис', age: 22 }, { name: 'Иван', age: 25 }]

Este código funciona, mas é verboso. Vamos ver como torná-lo mais elegante.

5 maneiras de ordenar um array de objetos por string

Maneira 1: Função de comparação clássica

O método mais transparente. Adequado para qualquer string, incluindo cirílico, desde que você use a ordem alfabética correta. A comparação com < e > leva em conta os códigos de caracteres em Unicode, o que para o russo dá um resultado inesperado: "ё" ficará no final do alfabeto, e "я" ficará perto de "а".

const products = [\n    { title: 'Яблоко', price: 50 },\n    { title: 'Ёлка', price: 200 },\n    { title: 'Ананас', price: 150 }\n];\n\n// Problema: 'Ёлка' ficará depois de 'Яблоко'\nproducts.sort((a, b) => {\n    if (a.title < b.title) return -1;\n    if (a.title > b.title) return 1;\n    return 0;\n});

Quando usar: para strings em inglês, onde a ordem alfabética coincide com o Unicode.

Maneira 2: localeCompare — o salvador do cirílico

O método String.prototype.localeCompare() leva em conta as regras de ordenação para um idioma específico. Para o russo, passamos 'ru'.

users.sort((a, b) => a.name.localeCompare(b.name, 'ru'));\n\nconsole.log(users);\n// [{ name: 'Анна', age: 30 }, { name: 'Борис', age: 22 }, { name: 'Иван', age: 25 }]

Este código é mais limpo, mais curto e lida corretamente com "ё", "й" e outras letras. Se precisar ordenar em ordem decrescente, basta trocar a e b:

users.sort((a, b) => b.name.localeCompare(a.name, 'ru'));

Quando usar: sempre que você trabalhar com cirílico ou dados multilíngues.

Maneira 3: Ordenação com distinção entre maiúsculas e minúsculas

Por padrão, localeCompare diferencia maiúsculas de minúsculas: "apple" ficará antes de "Banana", porque a letra minúscula tem