js组合树排序与拆分

本周工作项目中应用到的基本算法总结；组树结构并且排序、将树拆分并给排序字段、同类型合并

1、组树结构并且排序

数据

const view = [
    {
        "id": 222,
        "pid": 0,
        "component": "reimburseer",
        "order": 1
    },
    {
        "id": 1133,
        "pid": 1122,
        "component": "summary",
        "order": 4
    },
    {
        "id": 1122,
        "pid": 0,
        "component": "travel_type",
        "order": 3
    },
    {
        "id": 1144,
        "pid": 1122,
        "component": "travel_list",
        "order": 3
    },
    {
        "id": 1155,
        "pid": 1122,
        "component": "custom_attach",
        "order": 2
    },
    {
        "id": 111,
        "pid": 0,
        "component": "commiter",
        "order": 3
    },
    {
        "id": 444,
        "pid": 0,
        "component": "department",
        "order": 2
    }
]

算法

function processingTemplate(view) {
    const treeView = []
    // 初始化匹配map
    const vMap = view.reduce((m, item) => {
        item.children = []
        m[item.id] = item
        return m
    }, {})
    for (let i = 0; i < view.length; i++) {
        if (vMap[view[i].pid]) {
            vMap[view[i].pid].children.push(view[i])
            vMap[view[i].pid].children = vMap[view[i].pid].children.sort((a, b) => a.order - b.order)
        } else {
            treeView.push(view[i])
        }
    }
    return treeView.sort((a, b) => a.order - b.order)
}
const resultTreeView = processingTemplate(view)
console.log(resultTreeView)

结果

2、将树拆分并给排序字段

数据

const viewTreeData = [
    {
        "id": 222,
        "pid": 0,
        "component": "reimburseer"
    },
    {
        "id": 444,
        "pid": 0,
        "component": "department"
    },
    {
        "id": 1122,
        "pid": 0,
        "component": "travel_type",
        "children": [
            {
                "id": 1155,
                "pid": 1122,
                "component": "custom_attach"
            },
            {
                "id": 1144,
                "pid": 1122,
                "component": "travel_list"
            },
            {
                "id": 1133,
                "pid": 1122,
                "component": "summary"
            }
        ]
    },
    {
        "id": 111,
        "pid": 0,
        "component": "commiter"
    }
]

算法

function saveTemplate(treeView) {
    const view = []
    function extractData(arr, pid) {
        let order = 1
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].children) {
                extractData(arr[i].children, arr[i].id)
                delete arr[i].children
            }
            view.push({
                pid,
                ...arr[i],
                order: order++
            })
        }
    }
    extractData(treeView, 0)
    return view
}
const resultView = saveTemplate(viewTreeData)
console.log(resultView)

结果

3、同类型合并

数据

let options = [
    {
        "field": "custom_check_box_1622021089994",
        "id": 160,
        "label": "1",
        "value": "2"
    },
    {
        "field": "custom_check_box_1622021136579",
        "id": 161,
        "label": "2122",
        "value": "2"
    },
    {
        "field": "custom_check_box_1622021136579",
        "id": 162,
        "label": "22",
        "value": "3"
    },
    {
        "field": "custom_check_box_1622023577621",
        "id": 163,
        "label": "43",
        "value": "6"
    },
    {
        "field": "travel_type",
        "id": 164,
        "label": "外地出差",
        "value": "外地出差"
    },
    {
        "field": "travel_type",
        "id": 165,
        "label": "本地出差",
        "value": "本地出差"
    }, {
        "field": "travel_way",
        "id": 166,
        "label": "打车",
        "value": "打车"
    },
    {
        "field": "travel_way",
        "id": 167,
        "label": "飞机",
        "value": "飞机"
    },
    {
        "field": "travel_way",
        "id": 168,
        "label": "火车",
        "value": "火车"
    },
    {
        "field": "travel_way",
        "id": 169,
        "label": "轮船",
        "value": "轮船"
    },
    {
        "field": "travel_way",
        "id": 170,
        "label": "其他",
        "value": "其他"
    }
]

算法

function combinationField(options) {
    return options.reduce((m, i) => {
        if (!m[i.field]) {
            m[i.field] = [i]
        } else {
            m[i.field].push(i)
        }
        return m
    }, {})
}
const resultOptionMap = combinationField(options)
console.log(resultOptionMap)

结果