Js面包屑导航生成

一、先说场景

　　在多层级菜单中，当点击某一个层级的菜单时需要打印该菜单的层级信息 如 首页-》子菜单-》列表项-》单条详情-》详情修改

二、再说数据

[
	{
		id: 'im01',
		name: '菜单-01',
		children : [
		{
			id: 'im0101',
			name: '菜单-01-01',
		},
		{
			id: 'im0102',
			name: '菜单-01-02',
			children: [
			{
				id: 'im010201',
				name: '菜单-01-02-01',
			}
			]
		},
		{
			id: 'im0103',
			name: '菜单-01-03',
		}
		]
	},
	{
		id: 'im02',
		name: '菜单-02',
		children : [
		{
			id: 'im0201',
			name: '菜单-02-01',
		},
		{
			id: 'im0202',
			name: '菜单-02-02',
		},
		{
			id: 'im0103',
			name: '菜单-02-03',
		}
		]
	},
	{
		id: 'im03',
		name: '菜单-03',
		children :[]
	}

]

 

三、上代码

const crumb = {
    _id : null,
    _children : null,
    _flat : [],
    _result: [],
    _conv_array: (arrTrue, pid = null) => {
    for(let i = 0; i< arrTrue.length; i++) {
            if(pid != "") {
                arrTrue[i]._parent_id = pid
            }
            crumb._flat.push(arrTrue[i])
            if(undefined != arrTrue[i][crumb._children]  && arrTrue[i][crumb._children].length != 0) {
                crumb._conv_array(arrTrue[i][crumb._children], arrTrue[i][crumb._id])
            }
       }
    },
    _find_node: (node) => {
        for(let i in crumb._flat) {
            if(crumb._flat[i][crumb._id] == node){
               crumb._result.push(crumb._flat[i])
            }
            if(crumb._flat[i]._parent_id != undefined && crumb._flat[i][crumb._id]  == node){
                 crumb._find_node(crumb._flat[i]._parent_id)
            } 
        }
    },
    find: (tree,  find_id , id = "id" , children = "children") => {
        crumb._id = id
        crumb._children = children

        crumb._flat = []
        crumb._conv_array(tree)

        crumb._result = []
        crumb._find_node(find_id)

        return crumb._result.reverse()

    }
}