javascript - 根据数组urilist的值提取多维数组对象menusAll，层级跟menusAll保持一致，？

问题描述：

menusAll中的值value根据是否存在于urilist中，得到一个新的多维数组，多维数组对象跟menusAll保持一致；
数据如下：

const uriList = [
        '/home/zxgg',
        '/comanyProducts/allProduct',
        '/article/xwg',
        '/article/cwbx',
        '/article/jrxx',
        '/financialProductInfo',
        '/verificationManage/0',
        '/verificationManage/1',
        '/verificationManage/2',
    ]
    const menusAll = [{
        label: '首页',
        value: '1',
        icon: () => h(HomeOutlined),
        children: [{
            value: '/home/zxgg',
            label: '最新公告'
        }]
    }, {
        label: '公司产品',
        value: '2',
        icon: () => h(ProductOutlined),
        children: [{
            value: '/comanyProducts/allProduct',
            label: '全部产品'
        }]
    }, {
        label: '公司特色',
        value: '3',
        icon: () => h(UserManagementOutlined),
        children: [{
            label: '消费者权益保护',
            children: [{
                value: '/article/xfz_jy',
                label: '消费者教育',
            }, {
                value: '/article/xfz_gg',
                label: '消保公告',
            }, {
                value: '/article/xfz_fz',
                label: '反诈剧场',
            }, {
                value: '/article/xfz_zn',
                label: '客户投诉指南',
            }]
        }, {
            label: '标签管理',
            value: '/labelManage/xfz'
        }],
    }, {
        label: '关于我们',
        value: '4',
        icon: () => h(UserManagementOutlined),
        children: [{
            label: '媒体中心',
            children: [{
                value: '/article/mtbd',
                label: '媒体报道',
            }, {
                value: '/article/xwg',
                label: '新闻稿',
            }]
        }]
    }, {
        label: '信息披露',
        value: '5',
        icon: () => h(UnorderedListOutlined),
        children: [{
            value: '/article/cwbx',
            label: '财务表现'
        }, {
            value: '/article/zygg',
            label: '重要公告'
        }, {
            label: '金融信息',
            children: [{
                value: '/article/jrxx',
                label: '金融信息',
            }, {
                value: '/financialProductInfo',
                label: '产品信息查询'
            }, {
                value: '/financialInsurance',
                label: '保险信息披露'
            }, {
                value: '/financialFinancepartner',
                label: '银行机构披露'
            }],
        }]
    }, {
        label: '客户服务',
        value: '6',
        icon: () => h(BellOutlined),
        children: [{
            label: '帮助与支持',
            children: [{
                value: '/article/scjwt',
                label: '常见问题'
            }, {
                value: '/article/swzyh',
                label: 'wzyhApp'
            }, {
                value: '/article/swld',
                label: 'wld'
            }, {
                value: '/article/swyd',
                label: 'wyd'
            }, {
                value: '/article/swcd',
                label: 'wcd'
            }, {
                value: '/article/sqyapp',
                label: 'qyAPP'
            }, ]
        }, {
            label: '标签管理',
            value: '/labelManage'
        }]
    }, {
        label: '核查管理',
        value: '7',
        icon: () => h(CheckSquareOutlined),
        children: [{
            label: '全部',
            value: '/verificationManage/0'
        }, {
            label: '待核查',
            value: '/verificationManage/1'
        }, {
            label: '已审核',
            value: '/verificationManage/2'
        }],
    }];
    

第 1 个答案：

function filterMenus(list, uri) {
    return list.reduce((res,item) => {
        if(item.children) item.children = filterMenus(item.children,uri)
        if(uri.includes(item.value) || item.children?.length) res.push(item)
        return res;
    },[])
}
menusAll.map(v => ({...v,children:filterMenus(v.children, uriList)}))

我想请教一个问题，就是创建一个很复杂的元素，浏览器渲染需要2秒，然后绑定事件，绑定的事件是否会生效？$(document.body).append('<div id="test" ...