javascript 關於使用時間戳對數組進行排序的問題

Question

我對排序 arrays 和 Javascript 中的對象不太熟悉，並且想知道在某些條件下如何對對象進行排序。 最終目標是在日歷 function 中使用這種排序。

舉個例子，假設我們有一個類似下面代碼片段的情況：

 $(document).on('mouseup', '.event', function(){ var box_date = $(this).attr('date'); var param = []; $(`.day[date=${box_date}].event`).each(function(){ var box = $(this); var row = {}; var time_start = box.attr('time_start'); var time_end = box.attr('time_end'); var id_event = box.attr('id_event'); var time_diff = timeDiff(time_start, time_end); row.time_start = time_start; row.time_end = time_end; row.diff = time_diff; row.id_event = id_event; param.push(row); }) console.log(param); param.sort((a, b) => { if (a.time_start < b.time_start){ return -1; } else if (a.time_start > b.time_start){ return 1; } else if (b.diff - a.diff) return -1; return 1; }); console.log(param); }) function timeDiff(time_start, time_end){ var today = new Date(), month = today.getMonth() + 1, day = today.getDate(), year = today.getFullYear(); month = month.toString(); month = month.padStart(2,'0'); day = day.toString(); day = day.padStart(2, '0'); date = [year, month, day].join('-'); var date1 = `${date} ${time_start}`; var date2 = `${date} ${time_end}`; date1 = new Date(date1); date2 = new Date(date2); var diff_time = Math.abs(date1 - date2); // convert the time diff from ms to min diff_time = diff_time / (1000 * 60); return diff_time; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="day" date="2021-02-21"> <div class="event" id_event="1" date="2021-02-21" time_start="10:00" time_end="10:30">Val1</div> <div class="event" id_event="2" date="2021-02-21" time_start="10:00" time_end="11:00">Val2</div> <div class="event" id_event="3" date="2021-02-21" time_start="10:00" time_end="12:00">Val3</div> <div class="event" id_event="4" date="2021-02-21" time_start="09:30" time_end="12:00">Val4</div> <div class="event" id_event="5" date="2021-02-21" time_start="13:00" time_end="15:00">Val5</div> </div>

讓我們不要關注如何將數據放入 arrays 或 object 中，而是關注將數據排序為正確順序/格式的過程。

事件編號	日期	時間開始	時間結束	分鍾
1	2021-02-21	10:00	10:30	30
2	2021-02-21	10:00	11:00	60
3	2021-02-21	10:00	12:00	120
4	2021-02-21	09:30	12:00	150
5	2021-02-21	13:00	15:00	120

獲取數據時，它們按上述順序顯示，但由於用戶可以移動和擴展/縮小每個元素，因此我需要相應地設置事件 div 的 z-index 以進行樣式設置。

這意味着一旦元素的定位完成並且原始數據根據上面的數據，我需要根據以下條件對數據進行排序：

1. 最早的開始日期為第一個。
2. 如果 2 個元素具有相同的開始日期，則持續時間較長的元素優先於另一個元素

通過遵循該邏輯，上述結果應遵循以下順序

事件編號	日期	時間開始	時間結束	分鍾
4	2021-02-21	09:30	12:00	150
3	2021-02-21	10:00	12:00	120
2	2021-02-21	10:00	11:00	60
1	2021-02-21	10:00	10:30	30
5	2021-02-21	13:00	15:00	120

我已經用一個工作示例更新了片段，但如果有更好的方法來完成同樣的事情，請告訴我。

/C

Answer 1

您可以執行與 SQL 相同的操作。

FROM events
ORDER BY time_start ASC, time_end DESC

在 JavaScript 中，這可以通過以下方式完成：

events.sort((a, b) => {
  // time_start ascending
  if (a.time_start < b.time_start) return -1;
  if (a.time_start > b.time_start) return  1;
  // time_end descending
  if (a.time_end < b.time_end) return  1;
  if (a.time_end > b.time_end) return -1;
  // equal
  return 0;
});

請注意，這是基於字符比較的，因為您的時間是零填充的，並且是 24 小時制。 這在4:20應該是04:20的時間失敗。 如果沒有前面的0 ，它將被認為晚於例如12:42 ，因為4 (code 0x34) > 1 (code 0x31) （第一個字符）。

我還添加了一個更具描述性的選項，但這確實引入了一些輔助函數。

 $(document).on('mouseup', '.event', function(){ var box_date = $(this).attr('date'); var param = []; $(`.day[date=${box_date}].event`).each(function(){ var box = $(this); var row = {}; var time_start = box.attr('time_start'); var time_end = box.attr('time_end'); var id_event = box.attr('id_event'); row.time_start = time_start; row.time_end = time_end; row.id_event = id_event; param.push(row); }) console.log(param); param.sort((a, b) => { // time_start ascending if (a.time_start < b.time_start) return -1; if (a.time_start > b.time_start) return 1; // time_end descending if (a.time_end < b.time_end) return 1; if (a.time_end > b.time_end) return -1; // equal return 0; }); console.log(param); // or if you don't mind introducing some helpers param.sort(asc(event => event.time_start).chain(desc(event => event.time_end))); console.log(param); }) // helpers function asc(mapFn) { return attachComparatorMethods(function (a, b) { a = mapFn(a); b = mapFn(b); return -(a < b) || +(a > b); }); } function desc(mapFn) { const comparator = asc(mapFn); return attachComparatorMethods(function (a, b) { return comparator(b, a); }); } function attachComparatorMethods(comparator) { return Object.assign(comparator, { chain(comparator) { return attachComparatorMethods((a, b) => this(a, b) || comparator(a, b)); } }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="day" date="2021-02-21"> <div class="event" id_event="1" date="2021-02-21" time_start="10:00" time_end="10:30">Val1</div> <div class="event" id_event="2" date="2021-02-21" time_start="10:00" time_end="11:00">Val2</div> <div class="event" id_event="3" date="2021-02-21" time_start="10:00" time_end="12:00">Val3</div> <div class="event" id_event="4" date="2021-02-21" time_start="09:30" time_end="12:00">Val4</div> <div class="event" id_event="5" date="2021-02-21" time_start="13:00" time_end="15:00">Val5</div> </div>

如果您在理解asc幫助程序時遇到問題，可能是由於以下行：

return -(a < b) || +(a > b);

也可以寫成：

if (a < b) return -1;
if (a > b) return  1;
return 0;