摘要：背景之前寫了一篇列表轉(zhuǎn)樹的文章，有列表轉(zhuǎn)樹的需求自然就會(huì)有樹轉(zhuǎn)列表的需求，這里我把樹轉(zhuǎn)列表的思路與代碼再整理一下?？偨Y(jié)樹轉(zhuǎn)列表過程中，我這里的深度優(yōu)先采用了遞歸方式，可能會(huì)對(duì)內(nèi)存占用較多，使用時(shí)請(qǐng)自行權(quán)衡。

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

需求是什么？
老規(guī)矩，上圖

先說一下整體思路，就是遍歷樹中的每一個(gè)節(jié)點(diǎn)，在遍歷過程中要把節(jié)點(diǎn)的父節(jié)點(diǎn)id記錄下來，并作為該節(jié)點(diǎn)的parentId屬性值（保留層級(jí)關(guān)系，后續(xù)根據(jù)這個(gè)parentId和節(jié)點(diǎn)的id可以轉(zhuǎn)回樹結(jié)構(gòu)），然后把該節(jié)點(diǎn)存入一個(gè)列表中。遍歷過程完成，也就實(shí)現(xiàn)了把樹結(jié)構(gòu)轉(zhuǎn)換成了列表結(jié)構(gòu)。

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

廣度優(yōu)先：

深度優(yōu)先

思路看這兩個(gè)圖應(yīng)該理得清楚了
我這里深度優(yōu)先遍歷采用了遞歸的方式，然后廣度優(yōu)先遍歷采用了循環(huán)的方式。

先說深度優(yōu)先吧：

從第一層開始遍歷，遍歷該層中所有節(jié)點(diǎn)，為每一個(gè)遍歷到的節(jié)點(diǎn)添加上parentId屬性，存入結(jié)果列表。

每一個(gè)遍歷節(jié)點(diǎn)存入結(jié)果列表后，檢測(cè)該節(jié)點(diǎn)是否存在子節(jié)點(diǎn)，如果存在，則將子節(jié)點(diǎn)作為數(shù)據(jù)源重復(fù)第一步

當(dāng)所有的節(jié)點(diǎn)都處理完成后，整個(gè)樹結(jié)構(gòu)也就完成了轉(zhuǎn)化

再說說廣度優(yōu)先：

從第一層開始遍歷，遍歷該層中所有節(jié)點(diǎn)，為每一個(gè)遍歷到的節(jié)點(diǎn)添加上parentId屬性，存入結(jié)果列表。

每一個(gè)遍歷節(jié)點(diǎn)存入結(jié)果列表后，檢測(cè)該節(jié)點(diǎn)是否存在子節(jié)點(diǎn)，如果存在，則將子節(jié)點(diǎn)數(shù)據(jù)項(xiàng)push到第一層遍歷的列表中（這里相當(dāng)于在for循環(huán)的過程中，修改了被遍歷的數(shù)組的內(nèi)容，在循環(huán)過程中把它變長了）

當(dāng)所有的節(jié)點(diǎn)都處理完成后，整個(gè)樹結(jié)構(gòu)也就完成了轉(zhuǎn)化

深度優(yōu)先

/*
* 深度優(yōu)先遍歷樹
* 一個(gè)遞歸方法
* @params tree:要轉(zhuǎn)換的樹結(jié)構(gòu)數(shù)據(jù)
* @params list:保存結(jié)果的列表結(jié)構(gòu)數(shù)據(jù)，初始傳[]
* @params parentId:當(dāng)前遍歷節(jié)點(diǎn)的父級(jí)節(jié)點(diǎn)id，初始為null(因?yàn)楦?jié)點(diǎn)無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)
        }
    }
}

廣度優(yōu)先：

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

這里給一個(gè)簡單的樹結(jié)構(gòu)數(shù)據(jù)用來測(cè)試

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

上面代碼直接扔到瀏覽器中即可運(yùn)行，可自行看看結(jié)果。

樹轉(zhuǎn)列表過程中，我這里的深度優(yōu)先采用了遞歸方式，可能會(huì)對(duì)內(nèi)存占用較多，使用時(shí)請(qǐng)自行權(quán)衡。
在廣度優(yōu)先的方式中，只用了一層循環(huán)，這里有一個(gè)核心的點(diǎn)，就是js在循環(huán)列表過程中，被循環(huán)的列表是可以修改的，比如push一個(gè)數(shù)據(jù)項(xiàng)，這樣會(huì)讓for循環(huán)多運(yùn)行一次，這個(gè)點(diǎn)理解之后，我這里的廣度優(yōu)先遍歷樹的方法就好理解了。