使用javascript和es6功能展平树

Question

我是es6的新手，想要展平我的树对象。(我使用的是回流，而不是redux，但扁平化状态在回流中也是一个好主意)

接口响应：

export const node = {
item: 1,
children: [
  {
    item: 2,
    children: [
      {
        item: 3,
        children: [
          {
            item: 4,
            children: []
          },
          {
            item: 5,
            children: []
          },
          {
            item: 6,
            children: [
              {
                item: 7,
                children: []
              },
              {
                item: 8,
                children: []
              },
              {
                item: 9,
                children: []
              }
            ]
          }
        ]
      },
      {
        item: 10,
        children: [
          {
            item: 11,
            children: []
          },
          {
            item: 12,
            children: [
              {
                item: 13,
                children: []
              },
              {
                item: 14,
                children: []
              }
            ]
          }
        ]
      }
    ]
  }
]

}

我的目标是：

 tree= { 
       byId: { 
        item1 : { 
            id: 'item1', 
            name: 'item1', parent: null, 
            children : ['item2']
        }
}

父项是一个id，子项是id的数组

用于构建面包屑(使用父对象)或列出子对象...

使用从id获取对象

tree.byId[someId]

我的最后一次尝试是使用带有es6扩展运算符的递归函数：

const flattenTree = (tree, flattenTree) => {
    if (node.children.length) {

        node.children.map(child => {
            return flattenTree(child, [...tree= { id: child.item}])
        })

    } else {
        return [...tree, tree.byId[cat.item] = { id: cat.item, name: cat.item }]
    }
}

对不起，我是第一次来这里，所以我的帖子格式不好...

thx请求帮助

Answer 1

const tree = {
  item: 1,
  children: [
    {
      item: 2,
      children: [
        {
          item: 3,
          children: [
            {
              item: 4,
              children: []
            },
            {
              item: 5,
              children: []
            },
            {
              item: 6,
              children: [
                {
                  item: 7,
                  children: []
                },
                {
                  item: 8,
                  children: []
                },
                {
                  item: 9,
                  children: []
                }
              ]
            }
          ]
        },
        {
          item: 10,
          children: [
            {
              item: 11,
              children: []
            },
            {
              item: 12,
              children: [
                {
                  item: 13,
                  children: []
                },
                {
                  item: 14,
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}


const flattenTree = (tree) => {
  const newTree = { byId: {} };

  const traverseNode = (node, parent) => {
    const id = `item${node.item}`;
    newTree.byId[id] = {
      id,
      name: id,
      parent,
      children: node.children.map((c) => {
        traverseNode(c, id)
        return `item${c.item.id}`;
      })
    }
  }

  traverseNode(tree, null);
  return newTree;
}

flattenTree(tree)的结果将如下所示：

{ byId:
   { item4:
      { id: 'item4', name: 'item4', parent: 'item3', children: [] },
     item5:
      { id: 'item5', name: 'item5', parent: 'item3', children: [] },
     item7:
      { id: 'item7', name: 'item7', parent: 'item6', children: [] },
     item8:
      { id: 'item8', name: 'item8', parent: 'item6', children: [] },
     item9:
      { id: 'item9', name: 'item9', parent: 'item6', children: [] },
     item6:
      { id: 'item6', name: 'item6', parent: 'item3', children: [Array] },
     item3:
      { id: 'item3', name: 'item3', parent: 'item2', children: [Array] },
     item11:
      { id: 'item11', name: 'item11', parent: 'item10', children: [] },
     item13:
      { id: 'item13', name: 'item13', parent: 'item12', children: [] },
     item14:
      { id: 'item14', name: 'item14', parent: 'item12', children: [] },
     item12:
      { id: 'item12',
        name: 'item12',
        parent: 'item10',
        children: [Array] },
     item10:
      { id: 'item10',
        name: 'item10',
        parent: 'item2',
        children: [Array] },
     item2:
      { id: 'item2', name: 'item2', parent: 'item1', children: [Array] },
     item1:
      { id: 'item1', name: 'item1', parent: null, children: [Array] } } }

Answer 2

您可以使用此递归函数：

    Main() {
    let flattedTree = [];
    // We must treat the tree like a node, so we put it inside an array.
    let tree = [
      {
        item: 1,
        children: [
          {
            item: 2,
            children: [
              {
                item: 3,
                children: [
                  {
                    item: 4,
                    children: [],
                  },
                  {
                    item: 5,
                    children: [],
                  },
                  {
                    item: 6,
                    children: [
                      {
                        item: 7,
                        children: [],
                      },
                      {
                        item: 8,
                        children: [],
                      },
                      {
                        item: 9,
                        children: [],
                      },
                    ],
                  },
                ],
              },
              {
                item: 10,
                children: [
                  {
                    item: 11,
                    children: [],
                  },
                  {
                    item: 12,
                    children: [
                      {
                        item: 13,
                        children: [],
                      },
                      {
                        item: 14,
                        children: [],
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
      },
    ];
    // After recursive method executed you will have a flattend array.
    // flattedTree variable hold the flatted tree.
    this.flatten(tree, flattedTree);
  }

  flatten(nodes: any[], flattedNodes: any[]) {
    for (let index = 0; index < nodes.length; index++) {
      flattedNodes.push(nodes[index]);
     if (nodes[index].children !== undefined)
      if (nodes[index].children.length > 0)
        this.flatten(nodes[index].children, flattedNodes);
    }
  }

这就是结果：

[{"item":1,"children":[{"item":2,"children":[{"item":3,"children":[{"item":4,"children":[]},{"item":5,"children":[]},{"item":6,"children":[{"item":7,"children":[]},{"item":8,"children":[]},{"item":9,"children":[]}]}]},{"item":10,"children":[{"item":11,"children":[]},{"item":12,"children":[{"item":13,"children":[]},{"item":14,"children":[]}]}]}]}]},{"item":2,"children":[{"item":3,"children":[{"item":4,"children":[]},{"item":5,"children":[]},{"item":6,"children":[{"item":7,"children":[]},{"item":8,"children":[]},{"item":9,"children":[]}]}]},{"item":10,"children":[{"item":11,"children":[]},{"item":12,"children":[{"item":13,"children":[]},{"item":14,"children":[]}]}]}]},{"item":3,"children":[{"item":4,"children":[]},{"item":5,"children":[]},{"item":6,"children":[{"item":7,"children":[]},{"item":8,"children":[]},{"item":9,"children":[]}]}]},{"item":4,"children":[]},{"item":5,"children":[]},{"item":6,"children":[{"item":7,"children":[]},{"item":8,"children":[]},{"item":9,"children":[]}]},{"item":7,"children":[]},{"item":8,"children":[]},{"item":9,"children":[]},{"item":10,"children":[{"item":11,"children":[]},{"item":12,"children":[{"item":13,"children":[]},{"item":14,"children":[]}]}]},{"item":11,"children":[]},{"item":12,"children":[{"item":13,"children":[]},{"item":14,"children":[]}]},{"item":13,"children":[]},{"item":14,"children":[]}]