2

Tenho de inserir números e ordenar por ordem crescente para apresentar o resultado. Mas não estou a conseguir ordenar corretamente. Eis o que acontece:

Se inserir por exemplo 76,3,15,35 retorna ordenado na seguinte forma: 15,3,35,76.

// ordenar por ordem crescente os numeros inseridos.

const input1 = document.querySelector(".input1");
const btnConvert = document.querySelector(".btn-converter");

function sortNumbers(inputText) {
  let numArray = inputText.split(",");
  numArray.sort();

  document.getElementById("h").innerText = (` ${ numArray} `); 
  console.log(numArray)

  return  numArray;
}


btnConvert.addEventListener('click', function () {
  sortNumbers(input1.value);

});
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Modelo</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <section class="container">
      <h1>Exercícios</h1>

      <label class="label"
        >INSERIR NÚMEROS 
        <input type="text"  class="input1" />
      </label>
      

      <button class="btn btn-converter">ORDENAR POR ORDEM CRESCENTE</button>

     
      <h2 class="total" id="h"></h2>
    </section>
    <script src="./main.js"></script>
  </body>
</html>

8
  • Certo, obrigada :) No entanto iria obrigar-me a ter sempre os dois digitos e não era bem o que pretendia. além disso, se por algum motivo estranho eu colocasse 015,p.e, ele continuaria a ordenar da mesma forma. Mas obrigada pela dica na mesma :)
    – Ana Sofia
    Commented 23/11/2020 às 17:36
  • 2
    Ana, colocar o zero à esquerda é gambiarra, esqueça isso. É mais simples converter para número, pois aí funciona para quaisquer valores (como indicado nas respostas abaixo)
    – hkotsubo
    Commented 23/11/2020 às 17:40
  • certo, obrigada :)
    – Ana Sofia
    Commented 23/11/2020 às 17:49
  • @hkotsubo, colocar zero a esquerda de hora com um digito é gambiarra também?
    – user60252
    Commented 23/11/2020 às 17:57
  • 1
    @LeoCaracciolo No caso de horário, colocar o zero à esquerda é questão de formatação/apresentação, é completamente diferente do que está sendo feito aqui. Colocar um zero à esquerda na string só pra forçar uma ordenação correta eu considero gambiarra, ainda mais quando há uma solução mais simples e limpa (converter as strings pra número). Problemas diferentes, soluções diferentes :-)
    – hkotsubo
    Commented 23/11/2020 às 17:59

2 Respostas 2

6

Quando você faz o split, o resultado é um array de strings.

Só que strings são comparadas lexicograficamente, ou seja, leva-se em conta os caracteres dela para definir qual é "maior" ou "menor". Mesmo que esses caracteres sejam dígitos, o valor numérico que eles representam não é levado em conta na ordenação. Sendo assim, a string '15' é "menor" que a string '3' (no sentido de que, em uma ordenação, a string '15' é colocada antes da string '3').

console.log('15' < '3'); // true

Por isso que a string '15' ficou antes da string '3'. Para entender melhor porque é assim, eu sugiro que leia aqui.


De qualquer forma, se quer levar em conta o valor numérico que as strings representam, eu sugiro que as transformem em números:

numArray.sort((a, b) => parseInt(a) - parseInt(b));

Eu usei parseInt, pois assim deixo claro que estou convertendo as strings em números. E a ideia da função de callback é que ela retorne um número negativo se a deve vir antes de b na ordenação, um número positivo se a deve vir depois, ou zero se tanto faz. Por isso que estou subtraindo os valores (pois se o valor de a for menor que b, o resultado será negativo, indicando que a deve vir antes na ordenação).

Claro que o código da outra resposta também funciona, mas é porque o JavaScript faz coerção automática de tipos em muitos casos (se eu "subtraio" 2 strings e elas contém somente dígitos, a conversão para número é feita automaticamente).

Mas eu prefiro ser explícito e converter tudo para número antes de fazer as operações. Sei que para este caso específico funciona, mas nem sempre é assim, ainda mais se você misturar números e strings - então crie desde já este hábito de converter para os tipos adequados para só depois fazer as operações que precisa.


Lembrando que parseInt só trabalha com números inteiros. Se quiser considerar também números com casas decimais (desde que o separador seja o ponto), pode usar parseFloat. Ex:

let s = '20,10.5,47.2,3';
let array = s.split(',');
array.sort((a, b) => parseFloat(a) - parseFloat(b));
console.log(array);

3
  • 2
    Execelente observacao. Esqueci de mencionar a importancia de converter antes de fazer a operacao necessaria afim de evitar problemas com o comportamento "esquisito" do JS Commented 23/11/2020 às 17:45
  • Entendi, muito obrigada pela dica :)
    – Ana Sofia
    Commented 23/11/2020 às 17:47
  • 2
    @CmteCardeal Nesse caso específico não é tão problemático assim porque é um "ambiente controlado" e sabemos que funcionaria "em todos os casos". Mas como regra geral, eu sempre prefiro converter :-)
    – hkotsubo
    Commented 23/11/2020 às 17:47
4

Você poderia usar numArray.sort((a,b) => {return a - b}); para ordernar e não ter esse problema. Você ordena fazendo uma comparação de valores usando a função (a,b) => {return a - b}, onde:

  • Se o retorno for menor que 0, então b é maior que a, logo a vem primeiro que b;
  • Se o retorno for maior que 0, então b é menor que a, logo b vem primeiro que a;
  • Se o retorno for igual a 0, então b é igual a a;

Veja como fica:

// ordenar por ordem crescente os numeros inseridos.

const input1 = document.querySelector(".input1");
const btnConvert = document.querySelector(".btn-converter");

function sortNumbers(inputText) {
  let numArray = inputText.split(",");
  numArray.sort((a,b) => {return a - b});

  document.getElementById("h").innerText = (` ${ numArray} `); 
  console.log(numArray)

  return  numArray;
}


btnConvert.addEventListener('click', function () {
  sortNumbers(input1.value);

});
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Modelo</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <section class="container">
      <h1>Exercícios</h1>

      <label class="label"
        >INSERIR NÚMEROS 
        <input type="text"  class="input1" />
      </label>
      

      <button class="btn btn-converter">ORDENAR POR ORDEM CRESCENTE</button>

     
      <h2 class="total" id="h"></h2>
    </section>
    <script src="./main.js"></script>
  </body>
</html>

Seria essa resposta para 76,3,15,35:

[
  "3",
  "15",
  "35",
  "76"
]

DICA

Para deixar na ordem decrescente, basta inverter o retorno da função de comparação:

numArray.sort((a,b) => {return b - a});
1
  • 1
    Muito obrigada :) tinha tentado fazer dessa forma, mas inventei e afinal era simples. obrigada, ficou resolvido :)
    – Ana Sofia
    Commented 23/11/2020 às 17:27

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 .