随笔（四）——代码优化

---

媒介

原逻辑：后端data数据中返回数组，数组中有两个对象，一个是属性指标，一个是应用指标，根据这两个指标展示差异的多选框

---

1.原来代码

1. getIndicatorRange(indexReportList, target) {
2.   const indexList = []
3.       const indexObj = {}
4.       indexReportList.forEach(item => {
5.         item.showReportFieldList.forEach(fieldItem => {
6.           indexObj[fieldItem.showFieldTag] = {
7.             checked: target.includes(fieldItem.showFieldTag),
8.             disabled: item.name === '属性指标'
9.           }
11.           if (target.includes(fieldItem.showFieldTag)) {
12.             indexList.push({
13.               ...fieldItem,
14.               // isAttri: item.name === '属性指标', // 判断是否是属性指标
15.               disabled: item.name === '属性指标'
16.             })
17.           }
18.         })
19.       })
20.   return {
21.         indexList,
22.         indexObj
23.       }
24. },
26. indexReportList.forEach(item => {
27.         const tarList = [...target] // 浅拷贝数组
28.         tarList.forEach(tarItem => {
29.           item.showReportFieldList.forEach(fieldItem => {
30.             indexObj[fieldItem.showFieldTag] = {
31.               checked: tarItem === fieldItem.showFieldTag,
32.               disabled: item.name === '属性指标'
33.             }
35.             if (tarItem === fieldItem.showFieldTag) {
36.               indexList.push({
37.                 ...fieldItem,
38.                 // isAttri: item.name === '属性指标', // 判断是否是属性指标
39.                 disabled: item.name === '属性指标'
40.               })
41.             }
42.           })
43.         })
44.       })

复制代码

2.新增逻辑

   这个选中的指标，可以举行拖拽，然后拖获取回显逻辑中，由于是遍历接口获取的源数组，导致拖拽生存后，重新进入页面，照旧原来的拖拽序次，也就是序次没改。
  3.优化逻辑

   正常是在最外层使用遍历拖拽后的新数组，获取一个新的源数组举行渲染，但是如许加上自己的for循环，就有三层for循环了。优化后的代码如下：拷贝展示数据，遍历这个数据，将内里的是否存在，直接和item 的数据举行判断即可
  

   优化后的代码

1. getIndicatorRange(indexReportList, target) {
3.   const indexList = []
4.       const indexObj = {}
5.       const targetMap = new Map();
6.       // 构建 targetMap，保持 target 的顺序
7.       target.forEach((tarItem, index) => {
8.         targetMap.set(tarItem, index);
9.       });
10.       indexReportList.forEach(item => {
11.         item.showReportFieldList.forEach(fieldItem => {
12.           const showFieldTag = fieldItem.showFieldTag;
13.           const isAttri = item.name === '属性指标';
14.           // 更新 indexObj
15.           if (!indexObj[showFieldTag]) {
16.             indexObj[showFieldTag] = {
17.               checked: false,
18.               disabled: isAttri
19.             };
20.           }
21.           // 如果 showFieldTag 在 target 中，更新 indexObj 并插入 indexList
22.           if (targetMap.has(showFieldTag)) {
23.             indexObj[showFieldTag].checked = true;
24.             // 插入 indexList，保持 target 的顺序
25.             indexList[targetMap.get(showFieldTag)] = {
26.               ...fieldItem,
27.               disabled: isAttri
28.             };
29.           }
30.         })
31.       })
32.   return {
33.         indexList,
34.         indexObj
35.       }
36. },

复制代码