一维数组转换为树形结构数据（效率算法)

一维数组转换为树形结构数据（效率算法)

在ant-design的ant-tree-select组件中支持treeDataSimpleMode属性，通过设置该属性可以通过传入一维数组数据自动转换为树形结构数据。

但是在ant-tree组件中不支持该属性,如何自己实现自定义的简单数据转换？

常见的转换思路为，将一维数组进行递归遍历，分层级拼接为树形结构。这种实现算法的转换效率较低，在处理5000条左右数据时，耗时达到了18s左右。

代码如下:

    const parseSimpleTreeData = (treeData, { id, pId, rootPId }) => {
        const keyNodes = {};
        const rootNodeList = [];

        // Fill in the map
        const nodeList = treeData.map(node => {
            const clone = { ...node };
            const key = clone[id];
            keyNodes[key] = clone;
            clone.key = clone.key || key;
            return clone;
        });

        // Connect tree
        nodeList.forEach(node => {
            const parentKey = node[pId];
            const parent = keyNodes[parentKey];

            // Fill parent
            if (parent) {
                parent.children = parent.children || [];
                parent.children.push(node);
            }

            // Fill root tree node
            if (parentKey === rootPId || (!parent && rootPId === null)) {
                rootNodeList.push(node);
            }
        });

        return rootNodeList;
    }

转换算法实现思路:

1. 将一维数组转换为key => value的对象格式

2. 遍历deepClone的treeData

3. 将每个节点进行向上查找父节点

4. 如果父节点的pId === rootValue(根节点id),那么该父节点为一级节点，将该节点push到父节点的children中

5. 最后通过单次forEach实现了一维数组对树形结构数据的转换

注：该算法主要参照rc-tree-select组件simpleParse方法