这个 javasScript 排序功能正确吗？

Question

我是一个 JavaScript 初学者。此功能有效，并允许我通过单击按钮按升序和降序对列表进行排序，但我想知道它是否正确编写，或者可以简化或以不同方式编写。提前致谢。

index.html

<p id="sort">Sort</p>
<ul>
  <li>Phosphorus</li>
  <li>Polonium</li>
  <li>Radium</li>
  <li>Fluorine</li>
  <li>Iron</li>
  <li>Hydrogen</li>
  <li>Germanium</li>
  <li>Mercury</li>
  <li>Actinium</li>
  <li>Barium</li>
  <li>Calcium</li>
  <li>Cadmium</li>
</ul>
<script src="main.js"></script>

main.js

const sortButton = document.querySelector("#sort");
let counter = 0;


eventListeners();

function eventListeners() {
   sortButton.addEventListener("click", sortList);
}

function sortList() {
   const elementsList = new Array();
   const elements = document.querySelectorAll("ul li");
   for (const element of elements) {
       elementsList.push(element.textContent);
   }
   const ul = document.querySelector("ul");
   ul.innerHTML = "";

   if (counter % 2 === 0) {
       const orderedList = elementsList.sort();
       for (let i = 0; i < orderedList.length; i++) {
           const li = document.createElement("li");
           li.innerHTML = orderedList[i];
           ul.appendChild(li);
       }
       counter++;
   } else {
       const orderedList = elementsList.reverse();
       for (let i = 0; i < orderedList.length; i++) {
           const li = document.createElement("li");
           li.innerHTML = orderedList[i];
           ul.appendChild(li);
       }
       counter++;
   }
}

Answer 1

你不必清除 ul 的 innerHTML，甚至也不必使用 innerHTML

element.appendChild 将移动现有元素 - 如下

const sortButton = document.querySelector("#sort");
let counter = 0;
eventListeners();

function eventListeners() {
   sortButton.addEventListener("click", sortList);
}

function sortList() {
   const elementsList = Array.from(document.querySelectorAll("ul li"));
   const ul = document.querySelector("ul");
   elementsList.sort(({textContent:a}, {textContent:b})=>(counter%2?-1:1)*a.localeCompare(b))
   .forEach(el => ul.appendChild(el));
   counter++;
}

<p id="sort">Sort</p>
<ul>
  <li>Phosphorus</li>
  <li>Polonium</li>
  <li>Radium</li>
  <li>Fluorine</li>
  <li>Iron</li>
  <li>Hydrogen</li>
  <li>Germanium</li>
  <li>Mercury</li>
  <li>Actinium</li>
  <li>Barium</li>
  <li>Calcium</li>
  <li>Cadmium</li>
</ul>

在 Es2015 中（即老派 javascirpt）——这个函数看起来像：

function sortList() {
  var elementsList = Array.from(document.querySelectorAll("ul li"));
  var ul = document.querySelector("ul");
  elementsList.sort(function (_ref, _ref2) {
    var a = _ref.textContent;
    var b = _ref2.textContent;
    return (counter % 2 ? -1 : 1) * a.localeCompare(b);
  }).forEach(function (el) {
    return ul.appendChild(el);
  });
  counter++;
}