javascript - 从具有根和子条件的数组构建分层树的最佳方法

Question

我试图从数据集的结果构建一棵树作为对象数组，但 IE 对此感觉不好。 问题是时机。

我必须像这样处理数据来构建树:

var DataSet = [{
     NodeId: 1,
     Label: 'Root',
     ParentId: null,
     Icon: 'icon'
  }, {
     NodeId: 2,
     Label: 'Children',
     ParentId: 1,
     Icon: 'icon1'
  }, {
     NodeId: 3,
     Label: 'Children',
     ParentId: 1,
     Icon: 'icon1'
  }, {
     NodeId: 4,
     Label: 'Children_lvl2',
     ParentId: 2,
     Icon: 'icon2'
}];

成为 child 或根的条件是对象:

var ForBeChild = { ParentId: '%@' }
var ForBeRoot = { ParentId: null }

其中 '%@' 是对象的任何值，也可以通过条件设置它:

var ColNameAsId = 'NodeId';

对于作为树的订单数据，我创建了以下函数:

var CreateTree = function (Parents, DataToAssign) {
        if (!Parents.length) return [];

        for (var i = 0; i < Parents.length; i++) {
            var ParentData = Parents[i];
            var Children = DataToAssign.filter(function (data) {
                for (var key in ForBeChild) {
                    var value = ForBeChild[key];
                    if (value === '%@') {
                        if (ParentData[ColNameAsId] != data[key]) {
                            return false;
                        }
                    } else {
                        if (data[key] != value) {
                            return false;
                        }
                    }
                }
                return true;
            });
            ParentData._children = CreateTree(Children, DataToAssign);
        }
        return Parents;
    };

在调用它之前，我检索了 parent 作为参数传递:

var RootNodes = DataSet.filter(function (data) {
       for (var key in ForBeRoot) {
           if (data[key] != ForBeRoot[key])
               return false;
           }
           return true;
     });

然后构建所有树:

var JsonTree = CreateTree(RootNodes, DataSet);

在 IE 11.0.60 (Win10) 中测试 - 我知道这不是最后一次 - 创建树的时间是 5/6 秒。 相同的代码运行到 Chrome 70.0.3538.67 的时间大约为 1 秒。

有什么方法可以改进代码？我需要尽可能减少 IE 的时间。

提前致谢。

淡水河谷

Answer 1

您可以根据 ParentId 和 NodeId 属性创建树，这样就无需遍历属性。它将减少创建树的时间。

代码如下:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    var DataSet = [{
        NodeId: 1,
        Label: 'Root',
        ParentId: 0,
        Icon: 'icon'
    }, {
        NodeId: 2,
        Label: 'Children',
        ParentId: 1,
        Icon: 'icon1'
    }, {
        NodeId: 3,
        Label: 'Children',
        ParentId: 1,
        Icon: 'icon1'
    }, {
        NodeId: 4,
        Label: 'Children_lvl2',
        ParentId: 2,
        Icon: 'icon2'
    }];

    $(document).ready(function () {
        var data = PopulateTreeNode(DataSet, 0);
    });

    function PopulateTreeNode(data, parentid) {
        var newdata = data.filter(function (value) {
            return (value.ParentId == parentid);
        });
        newdata.forEach(function (e) {
            e._children = PopulateTreeNode(data, e.NodeId);
        })
        return newdata;
    };
</script>

截图如下: