使用 javascript 和 es6 功能壓平樹

Question

我是 es6 的新手，想要展平我的樹對象。 （我使用的是回流 - 不是 redux - 但在回流中展平狀態也是一個好主意）

api響應：

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']
        }
}

parent 是一個 id，childrend 是一組 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 }]
    }
}

抱歉，我是第一次來這里，所以我的帖子格式不正確...

謝謝你的幫助

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":[]}]