根据对象数组中的值对 DOM 元素进行排序的最有效方法是什么？

Question

我有一系列 div 显示不同人的数据。 每个人的数据存储在一个对象数组中，每个人都有很多值。 每个属性都有一个按钮，我希望能够通过单击按钮按属性的升序或降序对 div 进行排序。 每个 div 都有一个 id，它对应于数组中相关人员的 id。

数据看起来像（但比这大得多）：

people = [
   {
     id: 'xde234',
     height: '196',
     weight: '100',
     age: '34'
  },
  {
     id: 'sbd451',
     height: '176',
     weight: '140',
     age: '26'
  },
  {
     id: 'loe489',
     height: '156',
     weight: 'NA',
     age: '54'
  }]

每个人的数据通过循环数据显示，为每个人创建一个 div，将他们的 id 分配为 div 的 id，并使用每个属性值定义一个 span 的内部 html。 跨度的类名与属性相同。 所以 HTML 看起来像：

<div id="peopleContainer">
  <div id='xde234'>
     <span class="height">196</span>
     <span class="weight">100</span>
     <span class="age">34</span>
  </div>
  <div id='sbd451'>
     <span class="height">176</span>
     <span class="weight">140</span>
     <span class="age">26</span>
  </div>
  <div id='loe489'>
     <span class="height">156</span>
     <span class="weight">NA</span>
     <span class="age">54</span>
  </div>
</div>

每个按钮都是用一个事件监听器创建的，例如：

heightButton = document.getElementById('heightButton')
heightButton.addEventListener('click', function(){
   // sortingFunction
}

我一直在检索 div 并使用以下方法编写排序函数：

function sortingFunction(property){

   peopleContainer = document.getElementById('peopleContainer')
   allPeople =  peopleContainer.children
}

我真的有3个问题，主要是第一个：

1. 考虑到会有很多人和大量属性，在javascript中为数据中的任何属性排序和显示此数据的最有效方法是什么？

2. 如何在一个按钮中实现升序和降序排序，以便在两者之间交替。

3. 当一个按钮被点击时，无论它是升序还是降序，我都希望所有的 NA 值都在底部，即它们在排序中被忽略但附加到末尾。

任何帮助是极大的赞赏。

Answer 1

创建一个新的数据结构来保存对 DOM 元素的引用可能会有所帮助。

const peopleElements = {}
[...allPeople].forEach(node=>{
  peopleElements[node.id] = node;
});

接下来，您可以根据自己的喜好对people数组进行排序。 完成后，您可以刷新容器：

people.forEach(person=>{
  const node = peopleElements[person.id];
  peopleContainer.append(node);
});

请注意，附加一个已经在页面上的元素只会将其移动到末尾。 依次将每个人移动到最后将导致元素按排序顺序出现。

Answer 2

感谢@NiettheDarkAbsol，他的回答结合以下排序功能使我得到了一个有效的答案。 我使用 data 属性来存储最后一种排序类型（asc 或 desc）。 我使用@NiettheDarkAbsol 建议来附加节点，但做两次，第二次有条件检查 NA，然后将它们移动到底部，按需要工作。 现在的排序功能是：

function sortingFunction(e, property){

    peopleContainer = document.getElementById('peopleContainer');
    allPeople =  peopleContainer.children;

    const peopleElements = {};

    [...allPeople].forEach(node=>{
    peopleElements[node.id] = node;
    });
  
    if(e.target.getAttribute('data-lastSort') === 'desc'){
        e.target.setAttribute('data-lastSort','asc')
        people.sort(function(a,b){
            return a[property] - b[property]
        });
    }else{
        e.target.setAttribute('data-lastSort','desc')
        people.sort(function(a,b){
            return a[property] + b[property]
        });
    };
   
    people.forEach(person=>{
    const node = peopleElements[person.id];
    peopleContainer.append(node);
    };

    people.forEach(person=>{
       if(person[property] === 'NA'){
       const node = peopleElements[person.id];
       peopleContainer.append(node);
       };
    });

};