為什么我的javascript排序函式沒有產生正確的順序？

我有一個函式可以根據資料屬性中宣告的結束日期對課程（div）進行排序。整個類串列排序正確，除了一個。我無法弄清楚為什么它沒有正確排序。3 月 24 日是排序串列中的第一個。

我猜它只是在看“24”中的“2”，但我不確定如何解決這個問題，如果是這樣的話。

HTML

 <button onClick="courseSort()">SORT</button>

    <div id="course-container" class="row pb-5 pt-5">
        <div class="class-item col-12 col-md-6 pb-4" data-class-start="1/1/2022" data-class-end="5/28/2022">
            <h5>May 28</h5>
        </div>
        <div class="class-item col-12 col-md-6 pb-4" data-class-start="2/8/2022" data-class-end="3/9/2022">
            <h5>Mar 9</h5>
        </div>
        <div class="class-item col-12 col-md-6 pb-4" data-class-start="1/1/2022" data-class-end="3/5/2022">
            <h5>Mar 5</h5>
        </div>
        <div class="class-item col-12 col-md-6 pb-4" data-class-start="1/1/2022" data-class-end="4/1/2022">
            <h5>Apr 1</h5>
        </div>
        <div class="class-item col-12 col-md-6 pb-4" data-class-start="2/19/2022" data-class-end="3/8/2022">
            <h5>Mar 8</h5>
        </div>
        <div class="class-item col-12 col-md-6 pb-4" data-class-start="2/19/2022" data-class-end="3/24/2022">
            <h5>Mar 24</h5>
        </div>
        <div class="class-item col-12 col-md-6 pb-4" data-class-start="1/1/2022" data-class-end="4/23/2022">
            <h5>Apr 23</h5> 
        </div>
        <div class="class-item col-12 col-md-6 pb-4" data-class-start="1/1/2022" data-class-end="4/30/2022">
            <h5>Apr 30</h5>
        </div>
    </div>

JS

function sorter(a, b) {
    if (a.dataset.classEnd < b.dataset.classEnd)
        return -1;
    if (a.dataset.classEnd > b.dataset.classEnd)
        return 1;
    return 0;
}
  
// Function to sort Data
function courseSort() {
    var course = document.querySelectorAll("[data-class-end]");
    var courseArray = Array.from(course);
    let sorted = courseArray.sort(sorter);
    sorted.forEach(e =>
        document.querySelector("#course-container").appendChild(e));
}

謝謝

uj5u.com熱心網友回復：

檢查功能sorter(a, b)。例如，當您訪問時a.dataset.classEnd，它是一個字串，而不是日期。您可能想要執行以下操作：

function sorter(a, b) {
  const [aDate, bDate] = [new Date(a.dataset.classEnd), new Date(b.dataset.classEnd)];
  if (aDate < bDate) return -1;
  if (aDate > bDate) return 1;
  return 0;
}

此外，您可以像單行而不是單獨的函式一樣簡單地執行此操作：

let sorted = courseArray.sort((a, b) => new Date(a.dataset.classEnd) - new Date(b.dataset.classEnd));

我猜它只是在看“24”中的“2”，但我不確定如何解決這個問題，如果是這樣的話。

是的，這正是您比較字串時發生的事情。

編輯：正如塞巴斯蒂安西蒙在評論中建議的那樣，您可能希望更改日期的格式以允許排序，而無需將變數轉換為日期。

uj5u.com熱心網友回復：

正如評論中已經提到的，日期的真實值可以從 Date 物件派生。在下面的示例中，該函式courseArray(nodeList)將：

• 將 NodeList 轉換為陣列運行它.map()

  [...nodeList].map(d => {...
  // [...nodeList] is the same as Array.from(nodeList)
  

• 從中提取值data-class-end并將其轉換為 ISO 格式

  let mmddyyyy = d.dataset.classEnd;
  let yyyymmdd = mmddyyyy.split('/');
  let yyyy = yyyymmdd.pop();
  yyyymmdd.unshift(yyyy);
  let ISO = yyyymmdd.join('-');
  // from mm/dd/yyyy to yyyy-mm-dd
  

• 然后將其轉換為從 1970 年 1 月 1 日到 ISO 日期的毫秒數——然后將其添加data-order到 div 中，然后根據data-order值對 div 進行重新排序。

    let ms = Date.parse(ISO);
    d.dataset.order = ms;
    return d;
  }).sort((a, b) => a.dataset.order - b.dataset.order);
  

此外，洗掉了行內事件處理程式并添加了 onevent 屬性事件處理程式。看看為什么行內事件處理程式是垃圾。

const courseArray = nodeList => {
  return [...nodeList].map(d => {
    let mmddyyyy = d.dataset.classEnd;
    let yyyymmdd = mmddyyyy.split('/');
    let yyyy = yyyymmdd.pop();
    yyyymmdd.unshift(yyyy);
    let ISO = yyyymmdd.join('-');
    let ms = Date.parse(ISO);
    d.dataset.order = ms;
    return d;
  }).sort((a, b) => a.dataset.order - b.dataset.order);
};

function courseSort() {
  const course = document.querySelectorAll(".class-item");

  let sorted = courseArray(course);
  sorted.forEach(e =>
    document.querySelector("#course-container").appendChild(e));
};

document.querySelector('button').onclick = courseSort;

<button>SORT</button>

<div id="course-container" class="row pb-5 pt-5">
  <div class="class-item col-12 col-md-6 pb-4" data-class-start="1/1/2022" data-class-end="5/28/2022">
    <h5>May 28</h5>
  </div>
  <div class="class-item col-12 col-md-6 pb-4" data-class-start="2/8/2022" data-class-end="3/9/2022">
    <h5>Mar 9</h5>
  </div>
  <div class="class-item col-12 col-md-6 pb-4" data-class-start="1/1/2022" data-class-end="3/5/2022">
    <h5>Mar 5</h5>
  </div>
  <div class="class-item col-12 col-md-6 pb-4" data-class-start="1/1/2022" data-class-end="4/1/2022">
    <h5>Apr 1</h5>
  </div>
  <div class="class-item col-12 col-md-6 pb-4" data-class-start="2/19/2022" data-class-end="3/8/2022">
    <h5>Mar 8</h5>
  </div>
  <div class="class-item col-12 col-md-6 pb-4" data-class-start="2/19/2022" data-class-end="3/24/2022">
    <h5>Mar 24</h5>
  </div>
  <div class="class-item col-12 col-md-6 pb-4" data-class-start="1/1/2022" data-class-end="4/23/2022">
    <h5>Apr 23</h5>
  </div>
  <div class="class-item col-12 col-md-6 pb-4" data-class-start="1/1/2022" data-class-end="4/30/2022">
    <h5>Apr 30</h5>
  </div>
</div>

標籤：javascript 排序

上一篇：按升序對ips串列進行排序

下一篇：std::forward_list::sort如何在NlogN時間內作業？