Object.entries,Object.values,Object.keys区别与运用

    <ul>
       <h4>疾病分类</h4>
       <li v-for="(item,index) in property.diseaseClass" :key="index"
        :style={height:property.heightArr[index],lineHeight:property.heightArr[index]}>{{item}}</li>
    </ul>
    <ul>
      <h4>疾病名称</h4>
      <li v-for="(item,index) in property.diseaseName" :key="index" style="line-height:30px;">{{item}}</li>
      </ul>
    <ul>
    <h4>总计</h4>
      <li v-for="(item,index) in property.diseaseNum" :key="index" style="line-height:30px;">{{item}}</li>
    </ul>

          for (let k in Object.entries(res.data)) {
            property.diseaseClass.push(Object.entries(res.data)[k][0])
            for (let i in Object.entries(res.data)[k][1]) {
              // i,对象键名,就是疾病名称
              property.diseaseName.push(i)
              property.diseaseNum.push(Object.entries(res.data)[k][1][i])
            }
            // 小计
            let sum = 0;
            for (let j in Object.values(Object.entries(res.data)[k][1])) {
              sum += parseInt(Object.values(Object.entries(res.data)[k][1])[j])
              property.total = parseInt(Object.values(Object.entries(res.data)[k][1])[j])
            }
            // 每组疾病最后一项都是小计
            property.diseaseName.push('小计')
            property.diseaseNum.push(sum)
            // 疾病分类高度数组,每个疾病分类下有多少个疾病就有多高
            property.heightArr.push((Object.keys(Object.entries(res.data)[k][1]).length + 1) * 30 + 'px')
          }

运行结果: 

原来的数据结构

Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组

返回一个数组,一维数组每个元素为自己本身可遍历的键值对数组,二维数组里面第一个元素为对象的键,第二个元素为对象的值

Object.entries(res.data)

参数：要返回其枚举自身属性的对象

返回值：一个表示给定对象的所有可枚举属性的字符串数组

就是对象键值对的键

Object.keys(Object.entries(res.data)[k][1])

Object.values()只会遍历对象自身的可遍历属性

就是对象的键值对的值

Object.values(Object.entries(res.data)[k][1])