算法：“森林的遍历” 在 “企业应用” 的常见场景

森林的两种遍历方法

前序（先根）遍历森林

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
        }]
    });
});

备注

面对大数据量的森林，上面的遍历算法有很大的缺陷（速度太慢），因此要从数据存储结构上下工夫，进而优化遍历算法。