JavaScript用map/flatMap转置数据集时首尾元素丢失问题

我正在提取行、列中的数据范围，将其合并为表格型数据集，把原本存储在列中的日期转换为行维度存储，以便后续更便捷地开展数据统计报表工作。
此前Tanaike曾为该需求提供了解决方案，但我调整代码适配其他场景时，发现结果数组未纳入首个和最后一个元素，暂时无法定位问题原因——显然是因为我尚未完全掌握map()、flatMap()等数组方法的使用逻辑。

测试数据集 #

日期维度数组 #

const dates = ["01/31/2021","02/28/2021","03/31/2021","04/30/2021","05/31/2021","06/30/2021","07/31/2021","08/31/2021","09/30/2021","10/31/2021","11/30/2021","12/31/2021","01/31/2022","02/28/2022","03/31/2022","04/30/2022","05/31/2022","06/30/2022","07/31/2022","08/31/2022","09/30/2022","10/31/2022","11/30/2022","12/31/2022","01/31/2023","02/28/2023","03/31/2023","04/30/2023","05/31/2023","06/30/2023","07/31/2023","08/31/2023","09/30/2023","10/31/2023","11/30/2023","12/31/2023","01/31/2024","02/29/2024","03/31/2024","04/30/2024","05/31/2024","06/30/2024","07/31/2024","08/31/2024","09/30/2024","10/31/2024","11/30/2024","12/31/2024","01/31/2025","02/28/2025","03/31/2025","04/30/2025","05/31/2025","06/30/2025","07/31/2025","08/31/2025","09/30/2025","10/31/2025","11/30/2025","12/31/2025"]

员工源数据数组 #

const data = [[1,"Owner Test","CEO","Salary",283000,"","2021-01-31T08:00:00.000Z","2021-02-28T08:00:00.000Z",23583.333333333332,23583.333333333332,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[2,"Employee Test","Content Creator","Salary",37000,40,"2021-01-31T08:00:00.000Z","2021-10-31T07:00:00.000Z",3083.3333333333335,3083.3333333333335,3083.3333333333335,3083.3333333333335,3083.3333333333335,3083.3333333333335,3083.3333333333335,3083.3333333333335,3083.3333333333335,3083.3333333333335,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]]

出问题的代码片段 #

const [, ...d] = dates;
const [id, name, position, workType, rate, hourWeek, dateHired, terminationDate, ...values] = data[0].map((_, c) => data.map(r => r[c]));
let res = d.flatMap((e, i) => id.map((f, j) => [e, f, name[j], position[j], workType[j], rate[j], hourWeek[j], dateHired[j], terminationDate[j], values[i][j]]));

运行上述代码生成的结果数组，未包含第一个日期和最后一个日期对应的条目。

故障原因 #

两处索引处理错误直接导致首尾日期丢失：

• 第一行写const [, ...d] = dates;时，用数组解构直接跳过了第一个元素，把dates里的首个日期01/31/2021丢弃了，首条数据缺失就是这个操作导致的。
• 列转置完成后，存储日期对应数值的values数组长度是60：源数据data每行前8列是员工固定属性（ID、姓名、岗位、薪资等），剩下60列刚好对应60个日期的数值。但手动砍掉第一个日期后d只剩59个元素，flatMap遍历d时索引最大到58，只能取到values[0]到values[58]，最后一列数值values[59]完全没被访问，对应最后一个日期的条目自然缺失。

修正后代码 #

// 直接使用完整日期数组，不要手动跳过第一个元素
const d = dates;
const [id, name, position, workType, rate, hourWeek, dateHired, terminationDate, ...values] = data[0].map((_, c) => data.map(r => r[c]));
// 日期数组和数值列长度均为60，索引完全对齐，直接按位置匹配即可
let res = d.flatMap((e, i) => id.map((f, j) => [e, f, name[j], position[j], workType[j], rate[j], hourWeek[j], dateHired[j], terminationDate[j], values[i][j]]));

修正后运行即可拿到所有60个日期对应的全量条目，调试时可以先打印dates.length和values.length校验，二者长度均为60，索引一一对应，不会再出现首尾数据丢失的问题。

内容的提问来源于stack exchange，提问作者onit