JSON 树形视图：快速看懂复杂 JSON

当 JSON 嵌套层级很深、字段很多时，纯文本再格式化也容易看得眼花。这时树形视图就派上用场了——它把 JSON 的层级关系用树状结构直观展示，像文件夹一样可以一层层展开和折叠。

树形视图和文本视图的区别

文本视图 树形视图
展示形式 一行行带缩进的文本 可展开折叠的树状节点
层级感知 靠缩进判断 一眼看清父子关系
大型数据 要上下滚动找 折叠无关分支，只看关心的部分
适合场景 复制、修改 浏览、理解结构

树形视图怎么帮你读 JSON

假设有这样一个嵌套数据：

{
  "user": {
    "name": "Tom",
    "profile": { "age": 30, "city": "北京" },
    "orders": [ { "id": 1, "total": 99 }, { "id": 2, "total": 188 } ]
  }
}

在树形视图里，user 是一个可展开的节点，点开才能看到 name、profile、orders；profile 和 orders 又能继续展开。这样你可以只展开自己关心的分支，把无关的折叠起来，读起来清爽很多。

用 JSON Lens 的 Tree 视图

在 JSON 在线格式化工具 里，粘贴 JSON 后点击「🔍 Tree」标签即可切换到树形视图：

对于几万行的大 JSON，树形视图还做了懒渲染——折叠的节点不会真正渲染，只有展开时才生成，避免浏览器卡死。

什么时候用树形视图

延伸阅读