Ordernar objetos de um array | JavaScript

Olá, pessoal.

Mais uma vez me deparei com um obstáculo na evolução do aprendizado e gostaria da ajuda de vcs.

Tenho uma lista de input do tipo checkbox com id e value para cada item e desejo apresentar os itens selecionados, classificados numa ordem específica, em nova área da página. Até aí, tudo rodando perfeitamente.

Mas começa a complicar quando empurro para dentro de um array o object HTMLInputElement de cada checkbox selecionado com o array.push(checkboxes[i]) para tentar classificá-lo pelo value do checkbox com um array.sort(), e posteriormente apresentar apenas o id desse array na nova área da tela dentro de uma ol. (Códigos extraídos do arquivo filtro.js abaixo)

Segue abaixo o código para melhor compreensão:

index.html

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Lista UF</title>
        <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>

    <body>        
        <h2>Meus Estados</h2>

        <fieldset>
                <legend><b>Selecione os estados: </b></legend><br>


        <input type="checkbox" class="estados" id="Acre" name="estado" value="1. ACRE">
        <label for="Acre">Acre</label><br>

        <input type="checkbox" class="estados" id="Goias" name="estado" value="4. Goiás">
        <label for="Goias">Goiás</label><br>

        <input type="checkbox" class="estados" id="Maranhao" name="estado" value="5. MARANHÃO">
        <label for="Maranhao">Maranhão</label><br>

        <input type="checkbox" class="estados" id="Df" name="estado" value="3. DISTRITO FEDERAL">
        <label for="Df">Distrito Federal</label><br>

        <input type="checkbox" class="estados" id="Rj" name="estado" value="7. RIO DE JANEIRO">
        <label for="Rj">Rio de Janeiro</label><br> 

        <input type="checkbox" class="estados" id="Sp" name="estado" value="8. SÃO PAULO">
        <label for="Sp">São Paulo</label><br> 

        <input type="checkbox" class="estados" id="Bahia" name="estado" value="2. BAHIA">
        <label for="Bahia">Bahia</label><br> 

        <input type="checkbox" class="estados" id="Para" name="estado" value="6. PARÁ">
        <label for="Para">Pará</label><br> 
        </fieldset>

        <p>Obs: Os estados selecionados serão montados em uma nova lista!</p><br> 
        <button id="montar-lista" class="btnMontarLista">Montar Lista</button>    

    <ol id="lista-montada" class="invisivel">
        <li></li>
        <li></li>
        <li></li>
    </ol>

       <button id="limpar-lista" class="invisivel">Limpar lista</button>


    <script src="js/filtro.js"></script>

    </body>
</html>

filtro.js

var montarLista = document.querySelector("#montar-lista");
    var limparLista = document.querySelector("#limpar-lista");

    montarLista.addEventListener("click", function (){
         var array = [];
        var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')
        for (var i = 0; i < checkboxes.length; i++){
            array.push(checkboxes[i]);
            array.sort();
        }

             var ol = document.querySelector("#lista-montada");
             var btn = document.querySelector('#limpar-lista');
             ol.innerHTML = "";

            for (let i = 0; i < array.length; i++) {
                var li = document.createElement("li");
                li.textContent = array[i];
                ol.appendChild(li);
                console.log(array[i]);
             }

         ol.classList.remove("invisivel");
         btn.classList.remove("invisivel");
    });

    limparLista.addEventListener("click", function(){
        console.log("fui clicado");
        location.reload(); 
    });

A pergunta é: Consigo classificar os "objetos" desse array pelo atributo value do object HTMLInputElement e depois apresentar/imprimir o id desse object ? Como?

Olá Rogério, tudo bem com você?

Então vamos lá:

Consigo classificar os "objetos" desse array pelo atributo value

Dado que os atributos values são nomes, creio que você quer ordenar de maneira alfabética, correto?

Então no caso precisamos dizer para a função sort como queremos comparar, no seu caso teremos que deixar da seguinte maneira:

array.sort( function( elemento, segundoElemento) {
    return elemento.value.localeCompare(segundoElemento.value)
}
);

Essa função é a função de comparação que será utilizada para ordernar os elementos, ela recebe sempre 2 valores ( que serão os valores a ser comparados na iteração que o sort irá realizar)

Veja que eu estou fazendo elemento.value e segundoElemento.value, pois é o campo que queremos para ordenar, e estou utilizando essa função localCompare que é específica para comparar palavras :)

Agora dentro do for só precisamos mudar o que queremos mostrar, no caso:

    li.textContent = array[i].id;

Ou seja do nosso elemento HTML, eu quero a propriedade id que ele contém :)

Dessa maneira você já obterá o resultado desejado, você pode testar colocando o Acre como ultimo checkbox e ao gerar a lista montada verá que é o primeiro por conta da nossa ordenação!

Abraços e Bons Estudos!