我有日期陣列，我想按年、月、周、日、6 小時、8 小時和 1 小時以及總和值對日期進行分組。例如，我有以下陣列：
const data = [
{ x: "2021-10-17T14:38:45.540Z", y: 2 },
{ x: "2021-09-16T14:36:46.540Z", y: 1 },
{ x: "2021-01-04T14:35:46.540Z", y: 2 },
{ x: "2021-01-01T14:30:46.540Z", y: 1 },
{ x: "2020-02-01T06:28:47.520Z", y: 12 },
{ x: "2020-02-01T07:28:47.520Z", y: 12 },
// ...
{ x: "2019-04-13T10:19:20.034Z", y: 20 },
// ...
{ x: "2018-01-01T09:09:19.134Z", y: 4 },
{ x: "2017-01-01T12:09:19.034Z", y: 11 },
{ x: "2016-01-02T12:10:20.034Z", y: 24 },
// ...
]
這是我嘗試使用 momentjs 和 lodash Group array of object by date
一年來，我得到了這個結果，但沒有顯示像 2018 和 2016 年這樣的問題：
[
{
"color": "Blue",
"value": 6,
"label": "2021"
},
{
"color": "Blue",
"value": 24,
"label": "2020"
},
{
"color": "Blue",
"value": 1212,
"label": "2019"
},
{
"color": "Blue",
"value": 11,
"label": "2017"
}
]
預計年產量：
[
{
"color": "Blue",
"value": 6,
"label": "2021"
},
{
"color": "Blue",
"value": 24,
"label": "2020"
},
{
"color": "Blue",
"value": 1212,
"label": "2019"
},
{
"color": "Blue",
"value": 10,
"label": "2018"
},
{
"color": "Blue",
"value": 11,
"label": "2017"
},
{
"color": "Blue",
"value": 48,
"label": "2016"
}
]
uj5u.com熱心網友回復：
這可以通過使用 reduce 的標準“group-by”來實作，這里累加到一個物件中并使用Object.values().
我已經宣告了一個簡單的get_date_parts幫助程式來決議 ISO 日期字串，它應該足以進行分組，但是如果需要，您可以使用 Date 物件來處理更復雜的標簽格式。
這是年份分組，該模式可以適應所有其他分組，但您需要做一些算術來確定小時范圍。
const data = [{ x: '2021-10-17T14:38:45.540Z', y: 2 }, { x: '2021-09-16T14:36:46.540Z', y: 1 }, { x: '2021-01-04T14:35:46.540Z', y: 2 }, { x: '2021-01-01T14:30:46.540Z', y: 1 }, { x: '2020-02-01T06:28:47.520Z', y: 12 }, { x: '2020-02-01T07:28:47.520Z', y: 12 }, { x: '2019-04-13T10:19:20.034Z', y: 20 }, { x: '2018-01-01T09:09:19.134Z', y: 4 }, { x: '2017-01-01T12:09:19.034Z', y: 11 }, { x: '2016-01-02T12:10:20.034Z', y: 24 },];
function get_date_parts(iso_string) {
const [year, month, day, hr, min, sec] = iso_string.split(/\D/g);
return { year, month, day, hr, min, sec };
}
function group_by_year(arr) {
return Object.values(
arr.reduce((a, { x: date_string, y: value }) => {
const { year } = get_date_parts(date_string);
(a[year] ??= { color: 'Blue?', value: 0, label: year }).value = value;
return a;
}, {}),
);
}
const grouped_by_year = group_by_year(data).sort((a, b) => b.label - a.label);
console.log(grouped_by_year);或按月
const data = [{ x: '2021-10-17T14:38:45.540Z', y: 2 }, { x: '2021-09-16T14:36:46.540Z', y: 1 }, { x: '2021-01-04T14:35:46.540Z', y: 2 }, { x: '2021-01-01T14:30:46.540Z', y: 1 }, { x: '2020-02-01T06:28:47.520Z', y: 12 }, { x: '2020-02-01T07:28:47.520Z', y: 12 }, { x: '2019-04-13T10:19:20.034Z', y: 20 }, { x: '2018-01-01T09:09:19.134Z', y: 4 }, { x: '2017-01-01T12:09:19.034Z', y: 11 }, { x: '2016-01-02T12:10:20.034Z', y: 24 },];
function get_date_parts(iso_string) {
const [year, month, day, hr, min, sec] = iso_string.split(/\D/g);
return { year, month, day, hr, min, sec };
}
function group_by_month(arr) {
return Object.values(
arr.reduce((a, { x: date_string, y: value }) => {
const { year, month } = get_date_parts(date_string);
const key = `${year}/${month}`;
(a[key] ??= { color: 'Blue?', value: 0, label: key }).value = value;
return a;
}, {}),
);
}
const grouped_by_month = group_by_month(data).sort((a, b) => b.label.localeCompare(a.label));
console.log(grouped_by_month);對于日期中沒有直接表示的分組，您可以使用一些簡單的算術。
function get_date_parts(iso_string) {
const [year, month, day, hr, min, sec] = iso_string.split(/\D/g);
return { year, month, day, hr, min, sec };
}
const date_string = '2020-02-07T07:28:47.520Z';
const { year, month, day, hr } = get_date_parts(date_string);
// week in the month
const week = Math.floor((parseInt(day, 10) - 1) / 7);
const week_label = `${year}/${month} - week ${week 1}`;
console.log({ week_label, week });
// hour range
const range_size = 8;
const range = Math.floor(parseInt(hr, 10) / range_size);
// range times
const range_start = `${(range * range_size).toString().padStart(2, '0')}:00`;
const range_end = `${(range * range_size range_size).toString().padStart(2, '0')}:00`;
const range_label = `${day}/${month}/${year} ${range_start}-${range_end}`;
console.log({ range_label, range });轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/324140.html
標籤：javascript 数组 日期 瞬间 洛达什