Javascript 从具有根和子条件的数组构建层次结构树的最佳方法

我曾尝试将数据集的结果作为对象数组来构建树，但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'
}];

要成为子对象或根对象的条件是：

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

然后构建all树：

var JsonTree = CreateTree(RootNodes, DataSet);

在IE11.0.60（Win10）中测试-我知道这不是最后一次-创建树的时间是5/6秒。 Chrome 70.0.3538.67中运行的代码相同，计时时间约为1秒

有一种方法可以改进代码吗？我需要尽可能减少IE的时间

提前谢谢

---

Vale

您可以基于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>

变量数据集=[{
诺德：1，
标签：'根'，
父ID:0，
图标：“图标”
}, {
诺德：2，
标签：“儿童”，
父ID:1，
图标：“icon1”
}, {
诺德：3，
标签：“儿童”，
父ID:1，
图标：“icon1”
}, {
诺德：4，
标签：'Children_lvl2'，
父ID:2，
图标：“icon2”
}];
$（文档）.ready（函数（）{
var data=PopulateTreeNode（数据集，0）；
});
函数PopulateTreeNode（数据，parentid）{
var newdata=data.filter（函数（值）{
返回值（value.ParentId==ParentId）；
});
newdata.forEach（函数（e）{
e、 _children=PopulateTreeNode（数据，例如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>

a）使用查找结构通过其id获取节点b）使用递归函数在需要时构建新节点