JavaScript Treeview开发：Node类构建树形结构时子节点冗余数组问题

看起来你遇到的核心问题是递归生成节点结构时，不小心给子节点数组多套了一层包裹，同时你的Node类当前用的是childNodes属性，而目标结构需要的是nodes属性。我来帮你一步步解决：

1. 先对齐Node类的属性名（可选但推荐） #

目标结构要求每个节点包含名为nodes的子节点数组，所以首先可以把你的Node类直接改成使用nodes作为属性名，避免后续转换的麻烦：

class Node {
  constructor(name, nodes = []) {
    this.name = name;
    this.nodes = nodes; // 替换原childNodes为nodes，默认空数组防止undefined
  }
}

2. 修复递归函数的额外数组嵌套问题 #

你提到recTreeview()导致子节点多了一层数组，大概率是递归时错误地把map返回的数组又套了一层[]。举个错误和正确的对比：

错误的递归写法（导致额外数组） #

function recTreeview(node) {
  return {
    name: node.name,
    // 这里多了一层[]！map本身就会返回数组，再加[]就会嵌套
    nodes: [node.childNodes.map(child => recTreeview(child))]
  };
}

正确的递归写法 #

如果是基于原Node类（用childNodes）转换为目标结构，去掉外层的[]即可：

function recTreeview(node) {
  return {
    name: node.name,
    // map直接返回子节点数组，无需额外包裹
    nodes: node.childNodes ? node.childNodes.map(child => recTreeview(child)) : []
  };
}

如果是用修改后的Node类（直接用nodes），递归逻辑会更简洁：

function recTreeview(node) {
  return {
    name: node.name,
    nodes: node.nodes.map(child => recTreeview(child))
  };
}

3. 验证正确的结构创建示例 #

用修改后的Node类构建目标结构，完全不会有额外数组：

// 创建叶子节点
const leaf1 = new Node("Leaf 1");
const leaf2 = new Node("Leaf 2");

// 创建子节点
const childNode = new Node("Child Node", [leaf1, leaf2]);

// 创建根节点
const root = new Node("Root", [childNode]);

// 此时root的结构和目标tree完全一致：
// {
//   name: "Root",
//   nodes: [
//     {
//       name: "Child Node",
//       nodes: [
//         { name: "Leaf 1", nodes: [] },
//         { name: "Leaf 2", nodes: [] }
//       ]
//     }
//   ]
// }

总结一下：额外数组的根源就是递归时对map的返回值多做了一层数组包裹，去掉那层多余的[]就能解决问题；同时把Node类的属性名改成nodes，能让结构直接匹配目标要求，减少转换步骤。

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