javascript 关于使用时间戳对数组进行排序的问题

Question

I am not that familiar with sorting arrays and objects within Javascript and are wondering about how you would sort out objects after certain conditions. The end goal is use this sorting in a calendar function.

So as an example let's say we have a situation like the snippet below:

 $(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>

Let's just not focus on how to get the data into arrays or object but rather the process of sorting the data into the right order / format.

event id	date	time start	time end	minutes
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

When fetching the data they appear as in the order above but since each and every element both can be moved and extended / reduced by the user, I need to set the z-index of the event divs accordingly for styling purposes.

That means that once the positioning of the elements are done and the original data is according to the data above, I need to sort the data according with the following conditions:

1. The earliest start date as first.
2. If 2 elements have the same start date, the one with longer duration has precedence over the other one

By following that logic the above result should end up following the following order

event id	date	time start	time end	minutes
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

I've updated the snippet with a working example, but if there are better ways of accomplishing the same thing, please let me know.

/C

Answer 1

You can do the same thing as you would with SQL.

FROM events
ORDER BY time_start ASC, time_end DESC

In JavaScript this can be done in the following manner:

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;
});

Note that this is based on character comparison, which works because your times are zero padded and in the 24h notation. This fails for the time 4:20 which should be 04:20 . Without the 0 in front it will be considered later than for example 12:42 because 4 (code 0x34) > 1 (code 0x31) (first characters).

I've also added a more descriptive option, but this does introduce some helper functions.

 $(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>

If you have issues understanding the asc helper, it is probably due to the line:

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

Which could also be written as:

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