找回密码
 立即注册→加入我们

QQ登录

只需一步,快速开始

搜索
热搜: 下载 VB C 实现 编写
查看: 216|回复: 2

【JS】Js对象平坦化

[复制链接]
发表于 2024-6-19 18:36:16 | 显示全部楼层 |阅读模式

欢迎访问技术宅的结界,请注册或者登录吧。

您需要 登录 才可以下载或查看,没有账号?立即注册→加入我们

×

为什么要平坦化

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

<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>
const app = {
  data() {
    return {
      table_data: [
        {"field_1": 111},
        {"field_2": 112}
      ]
    };
  }
};

  如果数据层次深一些,有可能UI组件无法处理,如下例所示:

[
  {"field_1": {"name":111}},
  {"field_2": {"name":112}}
]
[
  {"field_1": [111,true]},
  {"field_2": [112,false]}
]

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

编码

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

  测试发现ch:

{ 
    "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[0]": "b10",
    "a1[1]": "b11",
    "a2.b20[0].c3.d3": "ok",
    "a2.b21[0].c3.d3": "ok",
    "a2.b21[1]": "b22"
}
回复

使用道具 举报

发表于 2024-6-22 13:15:40 | 显示全部楼层
列表展示数据有如此复杂的层级本身就是比较糟糕的设计
回复 赞! 靠!

使用道具 举报

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


我自己也不会使用比较复杂的数据。但这个主要想处理任意第三方数据,这些数据来自客户(脚本水平参差不齐),要能完美从他们以前那套过度过来,就需要平坦化
回复 赞! 靠!

使用道具 举报

本版积分规则

QQ|Archiver|小黑屋|技术宅的结界 ( 滇ICP备16008837号 )|网站地图

GMT+8, 2024-7-13 20:16 , Processed in 0.033927 second(s), 21 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表