我不太熟悉在Javascript中对数组和对象进行排序，并且想知道在特定条件下如何对对象进行排序。最终目标是在日历函数中使用这种排序。
举个例子，我们有一个类似下面片段的情况：
$(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>让我们不要关注如何将数据放入数组或对象，而是将数据排序为正确顺序/格式的过程。
| 事件id | 日期 | 时间开始时间结束 | >分钟||
|---|---|---|---|---|
| 1 | 2021-021 | 10:00 | 10:30 | 30 |
| 2 | 2021-02-21 | 10:00 | 11:00 | 60 |
| 3 | 2021-021 | 10:00 | >12:00 | 120 |
| 4 | 2021-02-21 | 09:30 | 12:00 | 150 |
| 5 | 2021-02-21 | 13:00 | 15:00 | 120 |
您可以执行与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小时表示法。这在应当是04:20的时间4: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;