摘要：背景之前寫了一篇列表轉樹的文章，有列表轉樹的需求自然就會有樹轉列表的需求，這里我把樹轉列表的思路與代碼再整理一下。總結樹轉列表過程中，我這里的深度優先采用了遞歸方式，可能會對內存占用較多，使用時請自行權衡。

之前寫了一篇列表轉樹的文章，有列表轉樹的需求自然就會有樹轉列表的需求，這里我把樹轉列表的思路與代碼再整理一下。

需求是什么？
老規矩，上圖

先說一下整體思路，就是遍歷樹中的每一個節點，在遍歷過程中要把節點的父節點id記錄下來，并作為該節點的parentId屬性值（保留層級關系，后續根據這個parentId和節點的id可以轉回樹結構），然后把該節點存入一個列表中。遍歷過程完成，也就實現了把樹結構轉換成了列表結構。

樹的遍歷方式有兩種，一種是深度優先遍歷，一種是廣度優先遍歷，這兩種方式思路如下圖所示：

廣度優先：

深度優先

思路看這兩個圖應該理得清楚了
我這里深度優先遍歷采用了遞歸的方式，然后廣度優先遍歷采用了循環的方式。

先說深度優先吧：

從第一層開始遍歷，遍歷該層中所有節點，為每一個遍歷到的節點添加上parentId屬性，存入結果列表。

每一個遍歷節點存入結果列表后，檢測該節點是否存在子節點，如果存在，則將子節點作為數據源重復第一步

當所有的節點都處理完成后，整個樹結構也就完成了轉化

再說說廣度優先：

從第一層開始遍歷，遍歷該層中所有節點，為每一個遍歷到的節點添加上parentId屬性，存入結果列表。

每一個遍歷節點存入結果列表后，檢測該節點是否存在子節點，如果存在，則將子節點數據項push到第一層遍歷的列表中（這里相當于在for循環的過程中，修改了被遍歷的數組的內容，在循環過程中把它變長了）

當所有的節點都處理完成后，整個樹結構也就完成了轉化

深度優先

/*
* 深度優先遍歷樹
* 一個遞歸方法
* @params tree:要轉換的樹結構數據
* @params list:保存結果的列表結構數據，初始傳[]
* @params parentId:當前遍歷節點的父級節點id，初始為null(因為根節點無parentId)
* */
function toListDF (tree, list, parentId = null) {
    for (let node of tree) {
        list.push({
            id: node.id,
            name: node.name,
            children: [],
            parentId
        })
        if (node.children.length !== 0) {
            toList(node.children, list, node.id)
        }
    }
}

廣度優先：

/*
* 廣度優先遍歷樹
* 一層循環
* @params tree:要轉換的樹結構數據
* @output list:返回轉換好的列表結構數據
* */
function toListBF (tree) {
    const tempList = tree.slice(0)
    const res = []
    for (let node of tempList) {
        // 向結果中push每一個節點的數據
        res.push({
            id: node.id,
            name: node.name,
            children: [],
            parentId: node.parentId === undefined ? null : node.parentId
        })
        // 如果該節點還有子節點，那么將子節點追加到待循環列表的后面
        if (node.children.length !== 0) {
            // 這里注意，push的是children里面的項
            tempList.push(...node.children.map((item) => {
                // 這里給每一項加上parentId
                item.parentId = node.id
                return item
            }))
        }
    }
    return res
}

這里給一個簡單的樹結構數據用來測試

const tree = [
    {
        id: 0,
        name: "root",
        children: [
            {
                id: 1,
                name: "child1",
                children: [
                    {
                        id: 4,
                        name: "child1-1",
                        children: []
                    },
                    {
                        id: 5,
                        name: "child1-2",
                        children: []
                    }
                ]
            },
            {
                id: 2,
                name: "child2",
                children: [
                    {
                        id: 6,
                        name: "child2-1",
                        children: [
                            {
                                id: 8,
                                name: "child2-1-1",
                                children: []
                            }
                        ]
                    }
                ]
            },
            {
                id: 3,
                name: "child3",
                children: [
                    {
                        id: 7,
                        name: "child3-1",
                        children: []
                    }
                ]
            }
        ]
    }
]

上面代碼直接扔到瀏覽器中即可運行，可自行看看結果。

樹轉列表過程中，我這里的深度優先采用了遞歸方式，可能會對內存占用較多，使用時請自行權衡。
在廣度優先的方式中，只用了一層循環，這里有一個核心的點，就是js在循環列表過程中，被循環的列表是可以修改的，比如push一個數據項，這樣會讓for循環多運行一次，這個點理解之后，我這里的廣度優先遍歷樹的方法就好理解了。