算法：“森林的遍歷” 在 “企業應用” 的常見場景

森林的兩種遍歷方法

前序（先根）遍歷森林

1. 找到森林中的所有的根結點。
2. 前序遍歷森林中的每個根節點對應的樹。

 后序（后根）遍歷森林

1. 找到森林中的所有的根結點。
2. 后序遍歷森林中的每個根節點對應的樹。

樹的兩種遍歷方法

前序（先根）遍歷樹

1. 訪問樹的根結點。
2. 找到根節點的所有子節點。
3. 前序遍歷每個子節點。

 后序（后根）遍歷樹

1. 找到根節點的所有子節點。
2. 后續序遍歷每個子節點。
3. 訪問樹的根結點。

企業應用場景 之 前序遍歷

效果圖

代碼示例

/// <reference path="Ext/ext-all-debug-w-comments.js" />

function arrayToTree(arr, isRoot, isChild, mapper) {
    var roots = Ext.Array.filter(arr, isRoot);
    roots = Ext.Array.map(roots, mapper);

    //遍歷森林
    Ext.Array.each(roots, function (root) {
        buildTree(arr, root, isChild, mapper);
    });

    return roots;
}

function buildTree(arr, item, isChild, mapper) {
    //先訪問根節點
    item.children = getChildren(arr, item, isChild, mapper);
    
    //后訪問子節點
    Ext.Array.each(item.children, function (child) {
        buildTree(arr, child, isChild, mapper);
    });
}

function getChildren(arr, parent, isChild, mapper) {
    var children = Ext.Array.filter(arr, function (item) {
        return isChild(parent, item);
    });

    return Ext.Array.map(children, mapper);
}

function arrayToTreeString(arr, isRoot, isChild) {
    var roots = Ext.Array.filter(arr, isRoot);

    var treeString = '';

    //遍歷森林
    Ext.Array.each(roots, function (root) {
        treeString += buildTreeString(arr, root, isChild, 0);
    });

    return treeString;
}

function buildTreeString(arr, item, isChild, level) {
    var treeString = '';

    //先訪問根節點
    treeString += Ext.String.repeat('-', (level + 1) * 5) + '| ' + item.title + '<br/><br/>';

    //后訪問子節點
    var children = getChildren(arr, item, isChild, function (child) {
        return child;
    });
    Ext.Array.each(children, function (child) {
        treeString += buildTreeString(arr, child, isChild, level + 1);
    });

    return treeString;
}

Ext.onReady(function () {
    var arr = [
        { id: '100', title: '編輯', parent: '000' },
        { id: '110', title: '復制', parent: '100' },
        { id: '120', title: '查找與替換', parent: '100' },
        { id: '121', title: '快速查找', parent: '120' },
        { id: '122', title: '快速替換', parent: '120' },
        { id: '130', title: '撤銷', parent: '100' },
        { id: '140', title: '重做', parent: '100' },
    ];

    var tree = arrayToTree(arr, function (item) {
        return item.parent === '000';
    }, function (parent, item) {
        return item.parent === parent.id;
    }, function (item) {
        return { id: item.id, text: item.title, parent: item.parent, expanded: true };
    });

    var treeString = arrayToTreeString(arr, function (item) {
        return item.parent === '000';
    }, function (parent, item) {
        return item.parent === parent.id;
    });

    Ext.create('Ext.container.Viewport', {
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        padding: 10,
        items: [{
            xtype: 'treepanel',
            title: '表格到樹',
            frame: true,
            flex: 1,
            root: {
                text: '菜單',
                expanded: true,
                children: tree
            }
        }, {
            xtype: 'panel',
            title: '表格到下拉框',
            frame: true,
            flex: 1,
            html: treeString
        }]
    });
});

備注

面對大數據量的森林，上面的遍歷算法有很大的缺陷（速度太慢），因此要從數據存儲結構上下工夫，進而優化遍歷算法。