随笔（一）——项目代码优化

---

前言

提示：

---

一、if判断点对象赋值

1.需求

后端返回json格式的字符串，是无序的，然后页面渲染指定的字段在指定的位置。

2.原本方法

const questionForm = reactive({
	answer: ''
})
if(val === 'zhibiao') {
  questionForm.value1 = '指标答案'
} else if(val === 'weidu') {
  questionForm.value2 = '维度答案'
} else if(val === 'biaozhun') {
  questionForm.value3 = '标准答案'
} else if(val === 'coustom') {
  questionForm.value4 = '自定义答案'
}

3.优化方法

const questionMap: { [key: string]: string } = { value1: '指标答案', value2: '维度答案', value3: '标准答案', value4: '自定义答案',}
  if(questionMap[val]) {
    questionForm.answer = valMap[val];
  }

二、数组的inclueles方法的使用

1.需求

后端返回一个json，这个json中有七个键值对的对象。将原本展示为一行4个的改为tab渲染，由于是一个json数据，转为对象后，过滤value1，value2，value3，获取新数组

jsonArray 数据格式：
答案有多个，里面的对象就是一个json，手动处理成了数组，不然渲染的时候，每一次都需要判断是对应哪一个答案，比较麻烦

[
	{
		[value1, '答案1'],
		[value2, '答案2'],
		[value3, '答案3'],
		[value4, '答案4'],
		[value5, '答案5'],
		[value6, '答案6'],
		[value7, '答案7'],
	},
	{},
]

2.原本方法

json

 let tabsAnswer = jsonArray.filter((item: Array<any>) =>  item[0] === 'value1' || item[0] === 'value2' || item[0] === 'value3')
    let tabsQuestion = jsonArray.filter((item: Array<any>) =>  item[0] === 'value4' || item[0] === 'value5' || item[0] === 'value6' || item[0] === 'value7')

3.优化方法

let tabsAnswer = orderArray.filter((item: Array<any>) =>  ['value1', 'value2', 'value3'].includes(item[0]))
let tabsQuestion = orderArray.filter((item: Array<any>) =>  ['quickSql', 'quickIndicatorSql', 'quickDsl', 'quickIndicatorDsl'].includes(item[0]))

三、数组对象的按顺序渲染Object.entries

0. Object.entries的基本使用

Object.entries方法 MDN官方文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
Object.keys 获取对象所有的键，
Object.values获取对象所有的值
Object.entries 获取对象的所有的键值

let a = {'a': '111', b: '222'}
Object.entries(a) // [["a" "111"], ["b", "222"] ]

1.需求

后端返回一个数组，数组有个对象，对象中有个answer的属性值为json格式的字符串，这个json中有七个键值对的对象。将原本展示为一行4个的改为tab渲染，由于是一个json数据，转为对象后，需要判断key是什么，渲染对应的结果

2.原本方法

html页面上遍历 jsonArr数组，通过判断是否是value1/value2/value3来确定key，并获取value值

let jsonArr = [
  {
    'value1': '答案1',
    'value2': '答案2',
    'value3': '答案3',
    'value4': '答案4',
    'value5': '答案5',
    'value6': '答案6',
    'value7': '答案7',
  },
  { },
]

3.优化方法

html页面上遍历 jsonArr数组，然后通过jsonItem使用Object.entries()方法获取数据如下，这样就可以按顺序渲染

jsonItem = [
    [
        "value1",
        "答案1"
    ],
    [
        "value2",
        "答案2"
    ],
    [
        "value3",
        "答案3"
    ],
    [
        "value4",
        "答案4"
    ],
    [
        "value5",
        "答案5"
    ],
    [
        "value6",
        "答案6"
    ],
    [
        "value7",
        "答案7"
    ]
]

4. 问题

由于后端的数据返回是无序的，所以上述方法并未使用，优化了，没有完全优化