怎么把树状json转换成数组

如何将树状JSON数据转换为数组：方法与代码实现

在处理复杂数据结构时，树状JSON（嵌套JSON）和数组是两种常见的数据组织形式，树状JSON以其层级清晰、关系明确的特点被广泛使用，但在某些场景下（如表格展示、批量处理或特定API交互），我们需要将其转换为扁平化的数组结构，本文将详细介绍树状JSON转数组的原理、方法及代码实现,帮助开发者高效完成数据转换任务。

理解树状JSON与数组的核心差异

树状JSON是一种嵌套的数据结构，每个节点可能包含子节点,形成层级关系，

{
  "id": 1,
  "name": "根节点",
  "children": [
    {
      "id": 2,
      "name": "子节点1",
      "children": []
    },
    {
      "id": 3,
      "name": "子节点2",
      "children": [
        {"id": 4, "name": "孙节点1", "children": []}
      ]
    }
  ]
}

而数组是线性结构，每个元素包含独立的数据，通常需要通过特定字段（如parentId）来关联原树状结构中的层级关系,转换后的数组可能如下：

[
  {"id": 1, "name": "根节点", "parentId": null},
  {"id": 2, "name": "子节点1", "parentId": 1},
  {"id": 3, "name": "子节点2", "parentId": 1},
  {"id": 4, "name": "孙节点1", "parentId": 3}
]

转换的核心思路

树状JSON转数组的本质是“扁平化”，即遍历树中的每个节点，提取关键信息，并记录其层级关系（通常通过parentId字段）,核心步骤包括：

1. 遍历树节点：采用深度优先（DFS）或广度优先（BFS）方式访问每个节点。
2. 提取节点数据：将当前节点的关键字段（如id、name）存入数组元素。
3. 记录层级关系：通过额外字段（如parentId）标记当前节点的父节点,构建关联。
4. 处理子节点：递归或循环遍历子节点,重复上述步骤直到所有节点被访问。

常见转换方法及代码实现

方法1：深度优先遍历（递归实现）

递归是处理树结构最直观的方式，通过函数自调用遍历子节点,适合层级较深的树。

代码示例（JavaScript）：

function treeToArray(tree, parentId = null, result = []) {
  // 提取当前节点数据（排除children字段）
  const { children, ...nodeData } = tree;
  result.push({ ...nodeData, parentId });
  // 递归处理子节点
  if (children && children.length > 0) {
    children.forEach(child => {
      treeToArray(child, tree.id, result);
    });
  }
  return result;
}
// 示例树状JSON
const treeData = {
  id: 1,
  name: "根节点",
  value: 100,
  children: [
    {
      id: 2,
      name: "子节点1",
      value: 200,
      children: []
    },
    {
      id: 3,
      name: "子节点2",
      value: 300,
      children: [
        { id: 4, name: "孙节点1", value: 400, children: [] }
      ]
    }
  ]
};
// 转换为数组
const arrayData = treeToArray(treeData);
console.log(arrayData);

输出结果：

[
  { id: 1, name: "根节点", value: 100, parentId: null },
  { id: 2, name: "子节点1", value: 200, parentId: 1 },
  { id: 3, name: "子节点2", value: 300, parentId: 1 },
  { id: 4, name: "孙节点1", value: 400, parentId: 3 }
]

方法2：广度优先遍历（队列实现）

广度优先遍历通过队列逐层处理节点,适合层级较浅或需要按层处理的场景。

代码示例（JavaScript）：

function treeToArrayBFS(tree) {
  const result = [];
  const queue = [{ ...tree, parentId: null }];
  while (queue.length > 0) {
    const currentNode = queue.shift();
    const { children, ...nodeData } = currentNode;
    result.push(nodeData);
    if (children && children.length > 0) {
      children.forEach(child => {
        queue.push({ ...child, parentId: currentNode.id });
      });
    }
  }
  return result;
}
// 使用相同的treeData，调用函数
const arrayDataBFS = treeToArrayBFS(treeData);
console.log(arrayDataBFS);

输出结果与方法1一致，但遍历顺序按层级展开（根节点→子节点→孙节点）。

方法3：使用Lodash工具库

Lodash提供了flatMap和cloneDeep等方法,可简化树转数组的操作。

代码示例：

const _ = require('lodash');
function treeToArrayWithLodash(tree, parentId = null) {
  const { children, ...nodeData } = tree;
  const currentNode = { ...nodeData, parentId };
  return children && children.length > 0
    ? [currentNode, ..._.flatMap(children, child => treeToArrayWithLodash(child, tree.id))]
    : [currentNode];
}
const arrayDataLodash = treeToArrayWithLodash(treeData);
console.log(arrayDataLodash);

Lodash的flatMap可自动处理数组拼接，代码更简洁,但需额外引入依赖。

转换中的注意事项

1. 字段处理：明确需要保留和排除的字段（如children需在存入数组前移除）。
2. 层级标记：parentId需根据业务需求命名，或使用path（如"1/3"）记录完整路径。
3. 性能优化：对于超大规模树（如10万+节点），递归可能导致栈溢出，可改用非递归方式（如BFS）或分批处理。
4. 数据完整性：确保每个节点的唯一标识（如id）正确，避免parentId关联错误。

实际应用场景

1. 表格展示：将树状菜单、组织架构转换为表格数据,便于分页和排序。
2. 数据提交：某些API仅接受数组格式,需提前将树状数据扁平化。
3. 状态管理：在Redux/Vuex中,扁平化的数组结构更易于状态更新和查询。

树状JSON转数组的实现核心是遍历+数据提取+层级标记，开发者可根据树结构特点（深度、宽度）选择递归、BFS或工具库方法，理解转换原理后，还可扩展支持多属性映射、自定义层级字段等高级需求，灵活应对不同业务场景，这一技能,能显著提升复杂数据结构的处理效率。