2

De acordo com o MDN:

o sort() altera o array original, se está utilizando uma abordagem funcional a função de comparação pode ser invocada diversas vezes, e pode causar execesso de processamento.Quanto mais trabalho a funcaoDeComparacao fizer, e quanto mais elementos houverem para ordenar seria legal considerar o uso de um map para ordenar.

gostaria de um exemplo em um caso real que eu poderia substituir o sort() pelo map(), em qual situação utilizo o map() no lugar do sort(), realmente impacta na performance?

e qual a diferença utilizando a - b e a > b se os dois tem o mesmo objetivo de ordenar

2 Respostas 2

4

O .map() não serve para ordenar, mas sim para mapear uma entidade para outra.

let Pessoa1 = function (nome, sobrenome) {
  this.nome = nome;
  this.sobrenome = sobrenome;
}

let Pessoa2 = function (nome, email) {
  this.nome = nome;
  this.email = email;
}

let pessoas1 = [
  new Pessoa1("Nome1", "Sobrenome1"),
  new Pessoa1("Nome2", "Sobrenome2"),
  new Pessoa1("Nome3", "Sobrenome3"),
  new Pessoa1("Nome4", "Sobrenome4")
];

let pessoas2 = pessoas1.map(function (pessoa1) {
  let nome = pessoa1.nome + " " + pessoa1.sobrenome;
  let email = nome.toLowerCase().replace(" ", ".") + "@stack.com";
  return new Pessoa2(nome, email);
});

console.log(pessoas2);

Como pode ver acima, o map não realizou a ordenação, apenas a transformação de um array em outro.

por um outro lado, o sort faz à ordenação dos elementos, para tal usa função de comparação, que deve receber dois valores e retornar um numero.

  • Se ao receber A e B retornar um numero menor que 0, então B deve aparecer antes de A.
  • Se ao receber A e B retornar 0, então B e A devem manter à sua ordem atual (porem este comportamento não é garantido).
  • Se ao receber A e B retornar um numero maior que 0, então A deve aparecer antes de B.

Neste caso pouco importa se a função retorna -1 ou -65535, a função de comparação não olha a grandeza do numero, apenas se ele é maior ou menor que 0.

vamos à um exemplo com palavras.

var frutas = [ 'Laranja', 'Banana', 'Maça' ];
frutas.sort(function (frutaA, frutaB) {
  if (frutaA == frutaB)
    return 0;
  if (frutaA < frutaB)
    return -1
  if (frutaA > frutaB)
    return 1
});
// ordenada por ordem alfabetica.
console.log(frutas);

mas isto tudo depende do seu critério de ordenação.:

var frutas = [ 'Laranja', 'Banana', 'Maça' ];
frutas.sort(function (frutaA, frutaB) {
  if (frutaA.length == frutaB.length)
    return 0;
  if (frutaA.length < frutaB.length)
    return -1
  if (frutaA.length > frutaB.length)
    return 1
});

console.log(frutas);

claro, que a ordenação acima utiliza numeros, então ela pode ser simplificada para.:

var frutas = [ 'Laranja', 'Banana', 'Maça' ];
frutas.sort(function (frutaA, frutaB) {
  return frutaA.length - frutaB.length;
});

console.log(frutas);

Então, você pode usar qual quer tipo de objeto, deste que tenha uma função de comparação apropriada para à ordenação desejada, abaixo segue uma ordenação com datas.:

var datas = [ 
  new Date(1990, 1, 12), 
  new Date(1985, 25, 1), 
  new Date(1990, 1, 10) 
];
datas.sort(function (dataA, dataB) {
  return dataA.getTime() - dataB.getTime();
});

console.log(datas);

e por fim, você pode vir à combinar o sort e o map

var datas = [ 
  new Date(1990, 1, 12), 
  new Date(1985, 25, 1), 
  new Date(1990, 1, 10) 
];
datas = datas.sort(function (dataA, dataB) {
  return dataA.getTime() - dataB.getTime();
}).map(function (data) {
  return data.toLocaleDateString("pt-BR");
});

console.log(datas);

1
  • obrigada pela explicação, ótima! Commented 31/05/2017 às 18:46
2

Use map() quando: é preciso traduzir/mapear todos os elementos em um array para outro conjunto de valores.

Exemplo: converter temperatura de Fahrenheit para Celsius.

var fahrenheit = [ 0, 23, 45, 55, 85, 90, 100, 150, 200 ];
 
var celcius = fahrenheit.map( function( elem ) {
    return Math.round( ( elem - 32 ) * 5 / 9 );
} ); 

console.log(celcius);

O que map() faz:

percorre o array da esquerda para a direita invocando uma função de retorno em cada elemento com parâmetros.

Para cada chamada de retorno, o valor devolvido se torna o elemento do novo array.

Depois que todos os elementos foram percorridos, map() retorna o novo array com todos os elementos “traduzidos”.

sort()

Já o método sort() permite que seus scripts classifiquem entradas de um array por quase todo tipo de critério que você possa associar a uma entrada.

Para entradas consistindo em strings, o critério pode ser sua ordem alfabética, tamanho da string etc.. como por exemplo:

solarSys = new Array(9)
solarSys[0] = "Mercurio"
solarSys[1] = "Venus"
solarSys[2] = "Terra"
solarSys[3] = "Marte"
solarSys[4] = "Jupiter"
solarSys[5] = "Saturno"
solarSys[6] = "Urano"
solarSys[7] = "Netuno"
solarSys[8] = "Plutão"
// comparison functions
function compare1(a,b) {
	// ordem alfabética decrescente
	if (a > b) {return -1}
	if (b > a) {return 1}
	return 0
}
function compare2(a,b) {
	// último caractere dos nomes dos planetas
	var aComp = a.charAt(a.length - 1)
	var bComp = b.charAt(b.length - 1)
	if (aComp < bComp) {return -1}
	if (aComp > bComp) {return 1}
	return 0
}
function compare3(a,b) {
	// tamanho dos nomes dos planetas
	return a.length - b.length
}
// comparar e exibir matriz
function sortIt(form, compFunc) {
	var delimiter = ";"
	if (compFunc == null) {
		solarSys.sort()
	} else {
		solarSys.sort(compFunc)
	}
	// display results in field
	form.output.value = unescape(solarSys.join(delimiter))
}
Este documento contém uma matriz de planetas em nosso sistema solar.
<FORM>
<p>Clique em um botão para ordenar a matriz:<P>
<INPUT TYPE="button" VALUE="Alfabetica A-Z" onClick="sortIt(this.form)">
<INPUT TYPE="button" VALUE="Alfabetica Z-A" onClick="sortIt(this.form,compare1)">
<INPUT TYPE="button" VALUE="Ultimo Caractere" onClick="sortIt(this.form,compare2)">
<INPUT TYPE="button" VALUE="Tamanho do nome" onClick="sortIt(this.form,compare3)">
<INPUT TYPE="button" VALUE="Reset" onClick="self.location.reload()">
<INPUT TYPE="text" NAME="output" SIZE=62>
</TEXTAREA>
</FORM>

Para entradas numéricas, o critério pode ser sua ordem numérica.

Primeiro veja o tipo de classificação que você pode fazer com o método sort() isoladamente (por exemplo sem chamar uma função de comparação). Quando nenhum dos parâmetros é especificado, o javascript apanha um instantâneo do conteúdo do array e converte os itens em strings. A partir daí, realiza uma classificação de strings dos valores. Os valores ASCII dos caracteres controlam a classificação, o que significa que os números são classificados por seus valores de strings, e não seu valores numéricos. Esse fato possui forte implicações se o seu array consiste em dados numéricos: o valor 201 vem antes de 88, pois o mecanismo de classificação compara os primeiros caracteres de strings ("2" com "8") para determinar a ordem de classificação.

Felizmente, existe uma inteligencia adicional que você pode incluir à classificação de array. A tática principal é definir uma função que ajude o método sort() a comparar itens de array. Uma função de comparação recebe dois valores do array (o que você não vê é que o método sort() rapidamente envia diversos pares de valores do array para ajudá-lo a classificar todas as entradas). A função de comparação permite que o método sort() saiba quais dos dois itens vem antes do outro, com base no valor que a função retorna. Supondo que a função compare dois valores, a e b, o valor retornado revela informações para o método sort(), como mostrado a seguir:

intervalo do valor de retorno           significado
 < 0                                    Valor `b` deve vir depois de `a`
   0                                    A ordem de a e b não deve mudar
 > 0                                     Valor `a` deve vir depois de `b`    

Imagine o seguinte exemplo:

  myArray = new Array(12, 5, 200, 80)
  function compare(a,b) {
      return a-b
  }   
  myArray.sort(compare)

O array possui quatro valores numéricos. Para classificar os itens em ordem numérica, você define uma função de comparação, que é chamada a partir do método sort(). Observe que, diferente da chamada de outras funções, o parâmetro do método sort() usa uma referência à função sem os parênteses.

Toda vez que compare() é chamada, o JavaScript atribui dois dos valores do array às variáveis de parâmetro (a e b). No exemplo anterior, o valor retornado é a diferença entre a e b. Se a for maior que b, então um valor positivo retorna ao método sort(), dizendo para manter a depois de b (ou seja, posicionar a em um local de índice com valor maior que b). Por outro lado, se a for menor que b, então o valor negativo diz a sort() para colocar a em um ponto com valor de índice menor que b.

Resultado do exemplo:

      myArray = new Array(12, 5, 200, 80)
      function compare(a,b) {
          return a-b
      } 
      console.log(myArray.sort(compare));
      

Fonte: JavaScript a Bíblia de Danny Goodman

1
  • obrigada! excelente explicação Commented 31/05/2017 às 18:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .