Underscore.js _.iterators.Tree() 方法

Underscore.js是一个JavaScript函数库，提供了许多实用的函数和工具，可以让Web开发更加简单和高效。其中包括了一个叫做_.iterators.Tree()的方法，用于创建一棵树形结构的数据。

语法

_.iterators.Tree(data, children, [options])

• data：生成树形结构的数据。
• children：用于寻找某节点的所有子节点的函数。
• options：可选参数，包括：

| 参数 | 描述 | | -------------- | ------------------------------------------------------------ | | iteratee | 用于迭代树节点的函数，它应该接受两个参数：value 和 depth | | reverse | 是否反转树的遍历顺序 | | sparse | 是否保留空节点 | | level | 指定遍历的深度，从0开始计数，0表示只遍历根节点。 | | leavesOnly | 是否只遍历叶子节点 | | includeRoot | 是否包含遍历的根节点 | | root | 根节点的值 | | modelIterator| 递归时如何处理父子节点的函数，它应该接受三个参数：parentNode, node и tree |

示例

var data = [
  {id:1, name:"A", parent:null},
  {id:2, name:"B", parent:1},
  {id:3, name:"C", parent:1},
  {id:4, name:"D", parent:2},
  {id:5, name:"E", parent:2},
  {id:6, name:"F", parent:3},
  {id:7, name:"G", parent:3}
];

var tree = _.iterators.Tree(data, function(value) {
  return _.where(this, {parent: value.id});
});

console.log(tree);

输出：

{
  id: 1,
  name: "A",
  parent: null,
  children: [
    {
      id: 2,
      name: "B",
      parent: 1,
      children: [
        {
          id: 4,
          name: "D",
          parent:2,
          children: []
        },
        {
          id: 5,
          name: "E",
          parent: 2,
          children: []
        }
      ]
    },
    {
      id: 3,
      name: "C",
      parent: 1,
      children: [
        {
          id: 6,
          name: "F",
          parent: 3,
          children: []
        },
        {
          id: 7,
          name: "G",
          parent: 3,
          children: []
        }
      ]
    }
  ]
}

上面的代码创建了一棵树形结构，其中每个节点都有 id、name 和 parent 属性。在 children 函数中，根据父节点的 id 属性获取其所有子节点。最后使用 _.iterators.Tree() 方法生成完整的树形结构。

遍历树形结构

_.iterators.Tree(data, children).each(function(node, index, tree) {
  console.log(node.name);
});

输出：

A
B
D
E
C
F
G

上面的代码通过 each 方法遍历生成的树形结构，输出每个节点的 name 属性。

总结

_.iterators.Tree() 方法提供了一种方便的方式来创建和遍历树形结构的数据，使用起来也非常简单。可以根据实际需求，选择可选参数来控制遍历的深度、顺序等等，从而获取到想要的数据。