lichao 发表于 2024-6-19 18:36:16

【JS】Js对象平坦化



## 为什么要平坦化

  在使用有Vue能力的html table时，需要用到对象数组，Vue内部用对象的字段获取对应值，而如果对象层次较深可能就难以直接使用字段。下面是一个简单的例子：

```html
<el-table :data="table_data">
<el-table-column prop="field_1" label="字段1"></el-table-column>
<el-table-column prop="field_2" label="字段2"></el-table-column>
</el-table>
```

```js
const app = {
data() {
    return {
      table_data: [
      {"field_1": 111},
      {"field_2": 112}
      ]
    };
}
};
```

&emsp;&emsp;如果数据层次深一些，有可能UI组件无法处理，如下例所示：
```json
[
{"field_1": {"name":111}},
{"field_2": {"name":112}}
]
[
{"field_1": },
{"field_2": }
]
```

&emsp;&emsp;可见Table的绑定数据最好是扁平的JSON数据，此时需要平坦化解决该问题。

## 编码

```js
function flat(obj, prefix, is_arr) {
    if (!prefix) {
      prefix = "";
      is_arr = false;
      var tobj = Object.prototype.toString.call(obj);
      if (tobj == "") {
            is_arr = true;
      }
    }
    return Object.keys(obj).reduce(function(memo, prop) {
      var tobj = Object.prototype.toString.call(obj);
      var ppre = prefix ? prefix + '.' : "";
      var sub_prefix = is_arr ? prefix + '[' + prop + ']' : ppre + prop;
      if (tobj === "") {
            return Object.assign({}, memo, flat(obj, sub_prefix, false));
      } else if (tobj === "") {
            return Object.assign({}, memo, flat(obj, sub_prefix, true));
      } else {
            return Object.assign({}, memo, {: obj});
      }
    }, {});
}   
```

&emsp;&emsp;测试发现ch:
```json
{
    "a0": {
      "b00": "c00",
      "b01": "c01",
    },
    "a1": [
      "b10", "b11"
    ],
    "a2":{
      "b20":[{
            "c3":{
                "d3":"ok"
            }
      }],
      "b21":[{
            "c3":{
                "d3":"ok"
            }
      },
      "b22"],
    }
}
{
    "a0.b00": "c00",
    "a0.b01": "c01",
    "a1": "b10",
    "a1": "b11",
    "a2.b20.c3.d3": "ok",
    "a2.b21.c3.d3": "ok",
    "a2.b21": "b22"
}
```


misakarinkon 发表于 2024-6-22 13:15:40

列表展示数据有如此复杂的层级本身就是比较糟糕的设计

lichao 发表于 2024-6-22 15:30:11

misakarinkon 发表于 2024-6-22 13:15
列表展示数据有如此复杂的层级本身就是比较糟糕的设计

我自己也不会使用比较复杂的数据。但这个主要想处理任意第三方数据，这些数据来自客户(脚本水平参差不齐)，要能完美从他们以前那套过度过来，就需要平坦化
页: [1]
查看完整版本: 【JS】Js对象平坦化