将复杂的数据处理成自己需要的数据。数组扁平化

最新推荐文章于 2024-07-12 09:36:48 发布

南庐

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量67

点赞数 1

文章标签： javascript 数据结构算法

本文链接：https://blog.csdn.net/weixin_73184582/article/details/130141659

版权

//题目1.将这串数据渲染成下面的样子，不能修改原数据
[{ "cell1": { "text": "李四1", "state": true }, "cell2": { "text": "李四4", "state": true }, "cell3": { "text": "李四13", "state": true } }, { "cell": { "text": "李四1", "state": true }, "cell2": { "text": "李四2", "state": true }, "cell3": { "text": "李四13", "state": false } }, { "cell": { "text": "王五7", "state": true }, "cell2": { "text": "李四2", "state": true }, "cell3": { "text": "李四9", "state": false } }]

实现方式：

实现1、使用双重循环的方式处理，在第二重循环里面通过key获取他的值

let tableData = [{ "cell1": { "text": "李四1", "state": true }, "cell2": { "text": "李四4", "state": true }, "cell3": { "text": "李四13", "state": true } }, { "cell": { "text": "李四1", "state": true }, "cell2": { "text": "李四2", "state": true }, "cell3": { "text": "李四13", "state": false } }, { "cell": { "text": "王五7", "state": true }, "cell2": { "text": "李四2", "state": true }, "cell3": { "text": "李四9", "state": false } }];
let table =ref([])  ;
tableData.forEach(i=>{
    // console.log(i);
    for (const iterator in i) {
      console.log(i[iterator]);
      table.value.push(i[iterator])
    }
  })

实现2.使用map映射的方式拿到对象的值，在将数据扁平化处理

let tableData = ref([{ "cell1": { "text": "李四1", "state": true }, "cell2": { "text": "李四4", "state": true }, "cell3": { "text": "李四13", "state": true } }, { "cell": { "text": "李四1", "state": true }, "cell2": { "text": "李四2", "state": true }, "cell3": { "text": "李四13", "state": false } }, { "cell": { "text": "王五7", "state": true }, "cell2": { "text": "李四2", "state": true }, "cell3": { "text": "李四9", "state": false } }]) ;

tableData.value= tableData.value.map(item => Object.values(item)).flat();