JavaScript entries 方法小试牛刀 - js
新接的项目中遇到了一个很恶心的数据源结构，用到了 JavaScript 的 entries 方法，高效的解决了多层数据遍历的方式，不但性能上有效的提高了很多，还精简了很多冗余的代码 code，特此小结一下；
初始数据源样式，key 值为样式中的 section，对应的 value 为具体的 cell 子样式，而页面组件渲染的时候直接取 key 进行 for in 遍历的操作时可以通过 for((item, name, index) in obj) 中的 name 来直接获取 key，但在后期对数据源处理上会有很多的不便之处，所以终还是想将当前数据源再次重组，变成 {title: '', detail: []} 的结构，更加的利于组件的渲染和后期对数据的再次处理；
{
"一般情况及头颈部": [
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3753,
"dmi_name": "暖手和听诊器、准备各种检查用具，并告知患者意图",
"dmi_namespecial": "",
"dmi_order": 1,
"dmi_projectname": "一般情况及头颈部",
"dmi_score": 2,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2020-04-13 15:19:00.0",
"memo": ""
},
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3754,
"dmi_name": "眼：结膜（观察充血）、巩膜（观察黄染）、瞳孔对光反射",
"dmi_namespecial": "",
"dmi_order": 2,
"dmi_projectname": "一般情况及头颈部",
"dmi_score": 4,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2018-05-17 14:10:13.0",
"memo": ""
},
],
"腹部": [
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3764,
"dmi_name": "（视诊）腹部形态",
"dmi_namespecial": "",
"dmi_order": 12,
"dmi_projectname": "腹部",
"dmi_score": 2,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2018-05-17 14:24:51.0",
"memo": ""
},
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3765,
"dmi_name": "（听诊）肠鸣音",
"dmi_namespecial": "",
"dmi_order": 13,
"dmi_projectname": "腹部",
"dmi_score": 4,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2018-05-17 14:25:52.0",
"memo": ""
},
],
"重点查体": [
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3773,
"dmi_name": "具体的重点查体步骤能体现诊断思路和鉴别关键点",
"dmi_namespecial": "",
"dmi_order": 22,
"dmi_projectname": "重点查体",
"dmi_score": 5,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2018-05-17 14:36:34.0",
"memo": ""
}
],
}处理方式
const examPaperDetails = Object.entries(itemData).map(([groupName, array]) => ({ groupName, array })); // 对象转换为数组其中，itemData 为如上的数据源数据，通过 JavaScript entries() 方法 进行对数据源的再次整合；
一个很 nice 的函数处理方式，减少了很多冗余代码的处理，很高效的完成了数据的处理；
通过对数据的再次整合后，无论是页面的渲染上还是对后期数据源的再处理都起到了很大的便捷性，从而避免了对数据的多次遍历的复杂操作！
处理后的数据源样式如下所示：
[
{
"groupName": "一般情况及头颈部",
"array": [
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3753,
"dmi_name": "暖手和听诊器、准备各种检查用具，并告知患者意图",
"dmi_namespecial": "",
"dmi_order": 1,
"dmi_projectname": "一般情况及头颈部",
"dmi_score": 2,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2020-04-13 15:19:00.0",
"memo": ""
},
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3754,
"dmi_name": "眼：结膜（观察充血）、巩膜（观察黄染）、瞳孔对光反射",
"dmi_namespecial": "",
"dmi_order": 2,
"dmi_projectname": "一般情况及头颈部",
"dmi_score": 4,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2018-05-17 14:10:13.0",
"memo": ""
},
]
},
{
"groupName": "腹部",
"array": [
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3764,
"dmi_name": "（视诊）腹部形态",
"dmi_namespecial": "",
"dmi_order": 12,
"dmi_projectname": "腹部",
"dmi_score": 2,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2018-05-17 14:24:51.0",
"memo": ""
},
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3765,
"dmi_name": "（听诊）肠鸣音",
"dmi_namespecial": "",
"dmi_order": 13,
"dmi_projectname": "腹部",
"dmi_score": 4,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2018-05-17 14:25:52.0",
"memo": ""
},
]
},
{
"groupName": "重点查体",
"array": [
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3773,
"dmi_name": "具体的重点查体步骤能体现诊断思路和鉴别关键点",
"dmi_namespecial": "",
"dmi_order": 22,
"dmi_projectname": "重点查体",
"dmi_score": 5,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2018-05-17 14:36:34.0",
"memo": ""
}
]
},
]
以上便是此次分享的全部内容，希望能对大家有所帮助