const List = [{"end_date":"2022-02-10","end_seconds":1644488295.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-10 18:08:34","id":10319,"last_heart_beat_time":"2022-02-10 18:18:15","scanner_id":167,"start_date":"2022-02-10","start_seconds":1644487714.0,"start_total_seconds":581},{"end_date":"2022-02-11","end_seconds":1644550497.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-11 11:19:08","id":10338,"last_heart_beat_time":"2022-02-11 11:34:57","scanner_id":167,"start_date":"2022-02-11","start_seconds":1644549548.0,"start_total_seconds":949},{"end_date":"2022-02-11","end_seconds":1644558220.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-11 11:48:41","id":10339,"last_heart_beat_time":"2022-02-11 13:43:40","scanner_id":167,"start_date":"2022-02-11","start_seconds":1644551321.0,"start_total_seconds":6899},{"end_date":"2022-02-11","end_seconds":1644558820.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-11 13:53:40","id":10343,"last_heart_beat_time":"2022-02-11 13:53:40","scanner_id":167,"start_date":"2022-02-11","start_seconds":1644558820.0,"start_total_seconds":0},{"end_date":"2022-02-11","end_seconds":1644563620.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-11 14:03:41","id":10344,"last_heart_beat_time":"2022-02-11 15:13:40","scanner_id":167,"start_date":"2022-02-11","start_seconds":1644559421.0,"start_total_seconds":4199},{"end_date":"2022-02-11","end_seconds":1644586551.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-11 15:55:51","id":10350,"last_heart_beat_time":"2022-02-11 21:35:51","scanner_id":167,"start_date":"2022-02-11","start_seconds":1644566151.0,"start_total_seconds":20400},{"end_date":"2022-02-13","end_seconds":1644759468.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-13 14:47:48","id":10410,"last_heart_beat_time":"2022-02-13 21:37:48","scanner_id":167,"start_date":"2022-02-13","start_seconds":1644734868.0,"start_total_seconds":24600},{"end_date":"2022-02-14","end_seconds":1644846304.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-14 10:15:05","id":10430,"last_heart_beat_time":"2022-02-14 21:45:04","scanner_id":167,"start_date":"2022-02-14","start_seconds":1644804905.0,"start_total_seconds":41399},{"end_date":"2022-02-15","end_seconds":1644911999.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-15 15:30:00","id":10468,"last_heart_beat_time":"2022-02-15 15:59:59","scanner_id":167,"start_date":"2022-02-15","start_seconds":1644910200.0,"start_total_seconds":1799},{"end_date":"2022-02-15","end_seconds":1644932084.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-15 19:44:44","id":10472,"last_heart_beat_time":"2022-02-15 21:34:44","scanner_id":167,"start_date":"2022-02-15","start_seconds":1644925484.0,"start_total_seconds":6600},{"end_date":"2022-02-16","end_seconds":1645020217.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-16 15:13:37","id":10491,"last_heart_beat_time":"2022-02-16 22:03:37","scanner_id":167,"start_date":"2022-02-16","start_seconds":1644995617.0,"start_total_seconds":24600},{"end_date":"2022-02-17","end_seconds":1645089245.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-17 14:59:06","id":10521,"last_heart_beat_time":"2022-02-17 17:14:05","scanner_id":167,"start_date":"2022-02-17","start_seconds":1645081146.0,"start_total_seconds":8099}]
const newArray = []
List.forEach(item =>{
// 第一次循环,repeat定义repet,基于find浅拷贝特性,操作repeat会影响到newArray
// 循环开始,find的条件不成立,就会push一个新对象{data: item.start_date,times: [item]}进去
// 检索条件要注意,find的核对条件需要准确
// 第二次循环,find条件成立,则走else
const repeat = newArray.find(res =>res.data === item.start_date)
if (!repeat) {
newArray.push({
data: item.start_date,
times: [item]
})
} else {
// 避免循环紊乱,不用item.times.push(item),选用repeat.times.push(item)
repeat.times.push(item)
}
})
打印数据后可以看到,已经将数据成功照相同时间的start_date重新管理
如果前端需要解决时间归类当天的用户多部操作但是后端没处理,就可以用forEach+find的方法处理
先说两种办法,一种是缓存数据,遍历数据得到想要的数据
二是把需要的数据放到对应的html结构里如data-title,点击二级栏目时读取读父元素的data-title这样