递归函数为嵌套树形数组元素添加对应图标问题求助

没问题，递归处理确实是解决这种树形结构问题的正确思路！你之前可能是在递归处理子节点的时候写法有偏差，我来给你一个可行的实现方案。

我们可以写一个递归函数，遍历树形数组的每个节点：

1. 给当前节点添加对应的icon字段，根据type值映射（FOLDER → folder-icon，FILE → file-icon）
2. 如果当前节点有children数组，就递归调用这个函数处理子节点数组
3. 返回处理后的新节点，避免修改原数据产生副作用

代码实现 #

function addIconsToTree(tree) {
  return tree.map(node => {
    // 先处理当前节点的icon
    const icon = node.type === 'FOLDER' ? 'folder-icon' : 'file-icon';
    // 解构节点，添加icon，同时处理子节点（如果有的话）
    return {
      ...node,
      icon,
      // 如果有children，递归处理；没有的话保持原children或空数组
      ...(node.children && { children: addIconsToTree(node.children) })
    };
  });
}

// 示例输入（注意原输入里有重复id，我调整成了唯一值）
const treeData = [
  {
    id: 1,
    type: "FOLDER",
    children: [
      { id: 2, type: "FILE" },
      { id: 3, type: "FOLDER", children: [] },
    ]
  }
];

// 处理后的结果
const result = addIconsToTree(treeData);
console.log(result);

输出结果（和你的期望一致） #

[
  {
    "id": 1,
    "type": "FOLDER",
    "icon": "folder-icon",
    "children": [
      {
        "id": 2,
        "type": "FILE",
        "icon": "file-icon"
      },
      {
        "id": 3,
        "type": "FOLDER",
        "icon": "folder-icon",
        "children": []
      }
    ]
  }
]

代码解释 #

• 用map遍历数组，每个节点都会生成一个新对象，不会修改原数据
• 利用对象解构...node保留原节点的所有字段，再添加icon字段完成新增
• 对于children，只有当节点存在children时才会递归处理，确保空数组或者无children的节点也能正确输出
• 递归调用addIconsToTree处理子节点数组，完美支持无限层级的嵌套场景

内容的提问来源于stack exchange，提问作者Max Buinevich