Question

我正在开发树视图，我构建了一个简单的Node-Class：它由一个名字和一个子数组组成：

class Node {
  constructor(name, childNodes) {
    this.name = name;
    this.childNodes = childNodes;
  }
}

现在我的目标是创建一个返回如下对象的函数：

var tree = [
  {
    text: 'Parent 1',
    nodes: [
      {
        text: 'Child 1',
        nodes: [
          {
            text: 'Grandchild 1'
          }
        ]
      },
      {
        text: 'Child 2'
      }
    ]
  },
  {
    text: 'Parent 2'
  },
];

我尝试使用递归方法。它以一个空数组开始，并添加子项，直到不再剩下：

function recTreeview(currentNode, treeview) {
  var tempChildren = [];
  currentNode.childNodes.forEach(child => {
    tempChild.push(recTreeview(child, treeview));
  });
  return treeview.push({
    text: currentNode.name,
    nodes: tempChildren
  })
}

但是使用递归Treeview函数的东西必定是错误的。当我创建树并尝试在chrome dev控制台中打开它时，它只显示“5”而不是像（5）[{...}，{...}，{...}，{...}，{...} ]。我做错了什么？

tree = recTreeview(parent, []);
tree;

Answer 1

您将返回push的结果，而不是实际的treeview。

根据Array.prototype.push() docs

返回值
调用方法的对象的新length属性。

而不是return treeview.push(...)做treeview.push(...)然后return treeview

function recTreeview(currentNode, treeview) {
  var tempChildren = [];
  currentNode.childNodes.forEach(child => {
    tempChild.push(recTreeview(child, treeview));
  });
  treeview.push({
    text: currentNode.name,
    nodes: tempChildren
  });

  return treeview;
}

Javascript树结构到数组转换

1 个答案: