Classificação de array JavaScript: classificando elementos de array

Resumo : neste tutorial, você aprenderá como usar o sort()método JavaScript Array para classificar matrizes de números, strings e objetos.

Introdução ao sort()método JavaScript Array

O sort()método permite classificar os elementos de um array no local. Além de retornar o array ordenado, o sort()método altera as posições dos elementos do array original.

Por padrão, o sort()método classifica os elementos da matriz em ordem crescente, com o menor valor primeiro e o maior valor por último.

O sort()método converte elementos em strings e compara as strings para determinar os pedidos.

Considere o seguinte exemplo:

let numbers = [0, 1 , 2, 3, 10, 20, 30 ];
numbers.sort();
console.log(numbers);Linguagem de código:  JavaScript  ( javascript )

A saída é:

[ 0, 1, 10, 2, 20, 3, 30 ]Linguagem de código:  JSON/JSON com comentários  ( json )

Neste exemplo, o sort()método coloca 10 antes de 2 porque a string “10” vem antes de “2” ao fazer uma comparação de strings.

Para corrigir isso, você precisa passar uma função de comparação para o sort()método. O sort(método ) usará a função compare para determinar as ordens dos elementos.

O seguinte ilustra a sintaxe do sort()método:

array.sort(comparefunction)Linguagem de código:  CSS  ( css )

O sort()método aceita um argumento opcional que é uma função que compara dois elementos do array.

Se você omitir a função de comparação, o sort()método classificará os elementos com a ordem de classificação baseada nos valores de ponto de código Unicode dos elementos, conforme mencionado anteriormente.

A função compare do sort()método aceita dois argumentos e retorna um valor que determina a ordem de classificação. O seguinte ilustra a sintaxe da função de comparação:

function compare(a,b) {
  // ...
}Linguagem de código:  JavaScript  ( javascript )

A compare()função aceita dois argumentos ae b. O sort()método classificará os elementos com base no valor de retorno da compare()função com as seguintes regras:

1. Se compare(a,b)for menor que zero, o sort()método classifica apara um índice inferior a b. Em outras palavras, avirá primeiro.
2. Se compare(a,b)for maior que zero, o sort()método classifica bpara um índice menor que a, ou seja, b virá primeiro.
3. Se compare(a,b)retornar zero, o sort()método considera a igual a b e deixa suas posições inalteradas.

Para corrigir o problema de classificação do número, você pode usar a seguinte sintaxe:

let numbers = [0, 1 , 2, 3, 10, 20, 30 ];
numbers.sort( function( a , b){
    if(a > b) return 1;
    if(a < b) return -1;
    return 0;
});

console.log(numbers);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 0,  1,  2, 3, 10, 20, 30 ]Linguagem de código:  JSON/JSON com comentários  ( json )

Ou você pode definir a função de comparação usando a sintaxe da função de seta :

let numbers = [0, 1 , 2, 3, 10, 20, 30 ];
numbers.sort((a,b) => {
    if(a > b) return 1;
    if(a < b) return -1;
    return 0;
});

console.log(numbers);Linguagem de código:  JavaScript  ( javascript )

E o seguinte é o mais simples, pois os elementos do array são números:

let numbers = [0, 1, 2, 3, 10, 20, 30];
numbers.sort((a, b) => a - b);

console.log(numbers);Linguagem de código:  JavaScript  ( javascript )

Classificando uma matriz de strings

Suponha que você tenha um array de strings animalscom o seguinte nome:

let animals = [
    'cat', 'dog', 'elephant', 'bee', 'ant'
];Linguagem de código:  JavaScript  ( javascript )

Para classificar os elementos do animalsarray em ordem alfabética crescente, você usa o sort()método sem passar a função compare conforme mostrado no exemplo a seguir:

let animals = [
    'cat', 'dog', 'elephant', 'bee', 'ant'
];
animals.sort();

console.log(animals);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'ant', 'bee', 'cat', 'dog', 'elephant' ]Linguagem de código:  JSON/JSON com comentários  ( json )

Para classificar o animalsarray em ordem decrescente, você precisa alterar a lógica da função de comparação e passá-la para o sort()método como no exemplo a seguir.

let animals = [
    'cat', 'dog', 'elephant', 'bee', 'ant'
];

animals.sort((a, b) => {
    if (a > b)
        return -1;
    if (a < b)
        return 1;
    return 0;
});

console.log(animals);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'elephant', 'dog', 'cat', 'bee', 'ant' ]Linguagem de código:  JSON/JSON com comentários  ( json )

Suponha que você tenha um array que contém elementos em letras maiúsculas e minúsculas, como segue:

// sorting array with mixed cases
let mixedCaseAnimals = [
    'Cat', 'dog', 'Elephant', 'bee', 'ant'
];Linguagem de código:  JavaScript  ( javascript )

Para classificar esse array em ordem alfabética, você precisa usar uma função de comparação personalizada para converter todos os elementos para o mesmo caso, por exemplo, letras maiúsculas para comparação e passar essa função para o sort()método.

let mixedCaseAnimals = [
    'Cat', 'dog', 'Elephant', 'bee', 'ant'
];

mixedCaseAnimals.sort(function (a, b) {
    let x = a.toUpperCase(),
        y = b.toUpperCase();
    return x == y ? 0 : x > y ? 1 : -1;

});Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'ant', 'bee', 'Cat', 'dog', 'Elephant' ]Linguagem de código:  JSON/JSON com comentários  ( json )

Classificando uma matriz de strings com caracteres não ASCII

O sort()método está funcionando bem com strings com caracteres ASCII. Entretanto, para strings com caracteres não-ASCII, por exemplo, é, è, etc., o sort()método não funcionará corretamente. Por exemplo:

let animaux = ['zèbre', 'abeille', 'écureuil', 'chat'];
animaux.sort();

console.log(animaux);Linguagem de código:  JavaScript  ( javascript )

Como você pode ver, a écureuilstring deve vir antes da zèbrestring.

Para resolver isso, você usa o localeCompare()método do Stringobjeto para comparar strings em uma localidade específica, assim:

animaux.sort(function (a, b) {
    return a.localeCompare(b);
});
console.log(animaux);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'abeille', 'chat', 'écureuil', 'zèbre' ]Linguagem de código:  JSON/JSON com comentários  ( json )

Os elementos da animauxmatriz agora estão na ordem correta.

Classificando uma matriz de números

Suponha que você tenha uma matriz de números nomeada scorescomo no exemplo a seguir.

let scores = [
    9, 80, 10, 20, 5, 70
];Linguagem de código:  JavaScript  ( javascript )

Para classificar numericamente uma matriz de números, você precisa passar para uma função de comparação personalizada que compara dois números.

O exemplo a seguir classifica a scoresmatriz numericamente em ordem crescente.

let scores = [
    9, 80, 10, 20, 5, 70
];
// sort numbers in ascending order
scores.sort((a, b) => a - b);

console.log(scores);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 5, 9, 10, 20, 70, 80 ]Linguagem de código:  JSON/JSON com comentários  ( json )

Para classificar numericamente uma matriz de números em ordem decrescente, basta inverter a lógica na função de comparação, conforme mostrado no exemplo a seguir:

let scores = [
    9, 80, 10, 20, 5, 70
];
// descending order
scores.sort((a, b) => b - a);
console.log(scores);Linguagem de código:  JavaScript  ( javascript )

Saída:

[80, 70, 20, 10, 9, 5]Linguagem de código:  JSON/JSON com comentários  ( json )

Classificando uma matriz de objetos por uma propriedade especificada

A seguir está uma matriz de employeeobjetos, onde cada objeto contém três propriedades name: salarye hireDate.

let employees = [
    {name: 'John', salary: 90000, hireDate: "July 1, 2010"},
    {name: 'David', salary: 75000, hireDate: "August 15, 2009"},
    {name: 'Ana', salary: 80000, hireDate: "December 12, 2011"}
];Linguagem de código:  JavaScript  ( javascript )

Classificando objetos por uma propriedade numérica

O exemplo a seguir mostra como classificar os funcionários em salaryordem crescente.

// sort by salary
employees.sort(function (x, y) {
    return x.salary - y.salary;
});

console.table(employees);Linguagem de código:  JavaScript  ( javascript )

Saída:

Este exemplo é semelhante ao exemplo de classificação de uma matriz de números em ordem crescente. A diferença é que ele compara as salarypropriedades de dois objetos.

Classificando objetos por uma propriedade de string

Para classificar a employeesmatriz por namepropriedade sem distinção entre maiúsculas e minúsculas, você passa a função de comparação que compara duas strings sem distinção entre maiúsculas e minúsculas da seguinte maneira:

employees.sort(function (x, y) {
    let a = x.name.toUpperCase(),
        b = y.name.toUpperCase();
    return a == b ? 0 : a > b ? 1 : -1;
});

console.table(employees);Linguagem de código:  JavaScript  ( javascript )

Classificando objetos pela propriedade data

Suponha que você queira classificar os funcionários com base na data de contratação de cada funcionário.

Os dados da data de contratação são armazenados na hireDatepropriedade do objeto funcionário. Porém, é apenas uma string que representa uma data válida, não o Dateobjeto. 

Portanto, para classificar os funcionários por data de contratação, primeiro você precisa criar um Dateobjeto válido a partir da sequência de datas e, em seguida, comparar duas datas, o que é o mesmo que comparar dois números.

Aqui está a solução:

employees.sort(function (x, y) {
    let a = new Date(x.hireDate),
        b = new Date(y.hireDate);
    return a - b;
});

console.table(employees);Linguagem de código:  JavaScript  ( javascript )

Otimizando sort()o método JavaScript Array

Na verdade, o sort()método chama a função compare várias vezes para cada elemento do array.

Veja o exemplo a seguir:

let rivers = ['Nile', 'Amazon', 'Congo', 'Mississippi', 'Rio-Grande'];

rivers.sort(function (a, b) {
    console.log(a, b);
    return a.length - b.length;
});Linguagem de código:  JavaScript  ( javascript )

Saída:

Amazon Nile
Congo Amazon
Congo Amazon
Congo Nile
Mississippi Congo
Mississippi Amazon
Rio-Grande Amazon
Rio-Grande Mississippi

Como funciona:

1. Primeiro, declare um array riversque consiste nos nomes de rios famosos.
2. Segundo, classifique o riversarray pelo comprimento de seu elemento usando o sort()método. Nós enviamos os elementos do riversarray para o console da web sempre que o sort()método invoca a função de comparação.

Conforme mostrado no resultado acima, cada elemento foi avaliado múltiplas vezes, por exemplo, Amazônia 4 vezes, Congo 2 vezes, etc.

Se o número de elementos da matriz estiver aumentando, isso diminuirá potencialmente o desempenho.

Você não pode reduzir o número de vezes que a função de comparação é executada. No entanto, você pode reduzir o trabalho que a comparação deve realizar. Esta técnica é chamada de Transformada Schwartziana .

Para implementar isso, você segue estas etapas:

1. Primeiro, extraia os valores reais em um array temporário usando o método map() .
2. Segundo, classifique o array temporário com os elementos que já foram avaliados (ou transformados).
3. Terceiro, percorra o array temporário para obter um array com a ordem correta.

Aqui está a solução:

// temporary array holds objects with position
// and length of element
var lengths = rivers.map(function (e, i) {
    return {index: i, value: e.length };
});

// sorting the lengths array containing the lengths of
// river names
lengths.sort(function (a, b) {
    return +(a.value > b.value) || +(a.value === b.value) - 1;
});

// copy element back to the array
var sortedRivers = lengths.map(function (e) {
    return rivers[e.index];
});

console.log(sortedRivers);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'Nile', 'Congo', 'Amazon', 'Rio-Grande', 'Mississippi' ]Linguagem de código:  JSON/JSON com comentários  ( json )

Neste tutorial, você aprendeu como usar o sort()método JavaScript Array para classificar matrizes de strings, números, datas e objetos.