[JavaScript知识库]前端实现数据行转列，Key转Value(Object.entries()和Map()的结合)

需求是表格中需要渲染数据

//后端返回数据格式
data:[
ML70: {jan_tss: 29, feb_tss: 28},
ML80: {jan_tss: 30, feb_tss: 29},
ML90: {jan_tss: 29, feb_tss: 28}
]
//前端想展示的数据格式
[
{division: 'ML70',jan_tss: 29, feb_tss: 28 },
{division: 'ML80',jan_tss: 30, feb_tss: 29 },
{division: 'ML90',jan_tss: 29, feb_tss: 28 }
]

以上内容后端返回的数据：将前端一个栏位的Value值变成了Key值，而对应后边的Value值包含所要展示的数据，现在数据中的Key值也需要展示到对应的表格中(即ML70，ML80，ML90)中

图示更清晰
实现思路：
1.先将每条数据的Key变成Value
2.然后再将改变后的数据塞进之前每条数据的Value（{jan_tss: 29, feb_tss: 28}）中去

这里先使用Object.entries()方法：Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）

结果返回给定对象自身可枚举属性的键值对数组（数组）

Demo：

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

具体参考：官方网址

实现过程代码展示:

   const data1 = Object.entries(data)  //转换为对应的数组
      console.log(data1);
/*  输出格式为数组：
    [
      0:[
        0:"ML70"
        1:{jan_tss: 29, feb_tss: 28}
      ]
      1:[
        0:"ML80"
        1:{jan_tss: 29, feb_tss: 28}
      ]
      2:[
        0:"ML90"
        1:{jan_tss: 29, feb_tss: 28}
      ]
      ]**/
   const AcctualData = data.map((item: any) => ({
        ...item[1],                 //此处详细请见Es6扩展运算符的用法
        division: item[0]          //实现将转换后的每条第一笔数据（0:"ML70"，0:"ML80"，0:"ML90"）放到后边的{jan_tss: 29, feb_tss: 28}中
      }))
      console.log(AcctualData);
     /* 输出
      [
     {division: 'ML70',jan_tss: 29, feb_tss: 28 },
     {division: 'ML80',jan_tss: 30, feb_tss: 29 },
     {division: 'ML90',jan_tss: 29, feb_tss: 28 }
     ]
     **/

方法总结：
Object.entries()
Map()
扩展运算符