数组树形结构和扁平化处理

882 阅读1分钟

处理成树形结构

let data = [
    {
            "menu_id": "1",
            "parent_id": "0",
            "menu_code": "001",
            "menu_name": "系统管理"
    }, {
            "menu_id": "2",
            "parent_id": "1",
            "menu_code": "002",
            "menu_name": "高级详情页"
    }, {
            "menu_id": "3",
            "parent_id": "1",
            "menu_code": "003",
            "menu_name": "表单"
    }, {
            "menu_id": "4",
            "parent_id": "1",
            "menu_code": "004",
            "menu_name": "示例"
    }, {
            "menu_id": "5",
            "parent_id": "0",
            "menu_code": "005",
            "menu_name": "菜单"
    }, {
            "menu_id": "6",
            "parent_id": "5",
            "menu_code": "006",
            "menu_name": "关于"
    }
]


function formatTree (obj) {
    let copyedObj = JSON.parse(JSON.stringify(obj)) // 深拷贝源数据
    let data = copyedObj.filter(parent => {
        let findChildren = copyedObj.filter(child => {
            return Number(parent.menu_id )=== Number(child.parent_id)
        })
        findChildren.length > 0 ? parent.children = findChildren : parent.children = []
        return Number(parent.parent_id) === 0 // 返回顶层,依据实际情况判断这里的返回值
    })
    return data
}

树形结构扁平化

let treeDatas = [
    {
        id: 1,
        pid: 0,
        name: 'name1',
        value: 'value1',
        child: [
                {
                        id: 2,
                        pid: 1,
                        name: 'name2',
                        value: 'value2'
                },
                {
                        id: 3,
                        pid: 1,
                        name: 'name3',
                        value: 'value3'
                }
        ]
    },
    {
        id: 4,
        pid: 0,
        name: 'name4',
	value: 'value4',
        child: [
                {
                        id: 5,
                        pid: 4,
                        name: 'name5',
                        value: 'value5'
                },
                {
                        id: 6,
                        pid: 4,
                        name: 'name6',
                        value: 'value6'
                }
        ]
    }
]


/**
   * 
   * @param {Array} arrs 树形数据
   * @param {string} childs 树形数据子数据的属性名,常用'children'
   * @param {Array} attrArr 需要提取的公共属性数组(默认是除了childs的全部属性)
   * @returns 
*/
function extractTree(arrs,childs,attrArr){
    let attrList = [];
    if(!Array.isArray(arrs)&&!arrs.length)return [];
    if(typeof childs !== 'string')return [];
    if(!Array.isArray(attrArr)||Array.isArray(attrArr)&&!attrArr.length){
            attrList = Object.keys(arrs[0]);
            attrList.splice(attrList.indexOf(childs), 1);
    } else {
            attrList = attrArr;
    }
    let list = [];
    const getObj = (arr)=>{
            arr.forEach(function(row){
                    let obj = {};
                    attrList.forEach(item=>{
                    obj[item] = row[item];
                    });
                    list.push(obj);
                    if(row[childs]){
                    getObj(row[childs]);
                    }
            })
            return list;
    }
    return getObj(arrs);
}
// 调用
extractTree(treeDatas, 'child', ['id', 'name'])

结果如下:

image.png

引用