文章目录

• 前言
• 一、if判断点对象赋值
• • 1.需求
  • 2.原本方法
  • 3.优化方法
  • 二、数组的inclueles方法的使用
  • • 1.需求
    • 2.原本方法
    • 3.优化方法
    • 三、数组对象的按顺序渲染Object.entries
    • • 0. Object.entries的基本使用
      • 1.需求
      • 2.原本方法
      • 3.优化方法
      • 4. 问题

        ---

        前言

        提示：

        ---

        一、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) =>  item[0] === 'value1' || item[0] === 'value2' || item[0] === 'value3')
            let tabsQuestion = jsonArray.filter((item: Array) =>  item[0] === 'value4' || item[0] === 'value5' || item[0] === 'value6' || item[0] === 'value7')
        

        3.优化方法

        let tabsAnswer = orderArray.filter((item: Array) =>  ['value1', 'value2', 'value3'].includes(item[0]))
        let tabsQuestion = orderArray.filter((item: Array) =>  ['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. 问题

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