---

前言

提示：

---

一、if判断点对象赋值

1.需求

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

2.原本方法

javascript">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.优化方法

javascript">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，手动处理成了数组，不然渲染的时候，每一次都需要判断是对应哪一个答案，比较麻烦

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

2.原本方法

json

javascript"> 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.优化方法

javascript">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 获取对象的所有的键值

javascript">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值

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

3.优化方法

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

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

4. 问题

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