技术实践

JavaScript递归查询id所对应的节点

在开发管理系统的时候需做一个导航数据节点展示,经常会需要用递归查询数据。

羊先生的头像
羊先生2022.03.22 · 1 分钟阅读 · 60 阅读
JavaScript递归查询id所对应的节点封面
文章正文还需 1 分钟

在开发管理系统的时候需做一个导航数据节点展示,经常会需要用递归查询数据。

image.png
js 复制代码
// 测试数据
const routes = [
	{
		name: "项目信息",
		path: '/home',
		id:1,
		children: [
			{
				name: '基本信息',
				path: '/home',
				id:2,
			},
		]
	},
	{
		name: "投标要求",
		path: '/home',
		id:3,
		children: [
			{
				name: '开标一览表',
				path: '/home',
				id:4,	
			},
			{
				name: '投标文件组成',
				path: '/home',
				id:5,
				children: [
					{
						name: '测试开标一览表',
						path: '/home',
						id:6,
					},
					{
						name: '测试开标一览表',
						path: '/home',
						id:7,
					}
				]
			}
		]
	},
	{
		name: "评标设置",
		path: '/home',
		id:8,
		children: [
			{
				name: '评审项目',
				path: '/home',
				id:9,
			},
			{
				name: '评审环节',
				path: '/home',
				id:10,
			},
			{
				name: '评审报告',
				path: '/home',
				id:11,
			}
		]
	}
];

根据id,递归查询

js 复制代码
/**
 * 递归查询数据
 * @param data
 * @param key 键
 * @param value 值
 * @param children 子节点
 * @returns {null|*}
 */
const findArrayObject = (data = [], {key = 'id', value = '', children = 'children'}) => {
    if (!isArray(data)) {
        return null
    }
    for (let i in data) {
        let item = data[i]
        if (item[key] === value) {
            return item
        } else {
            if (item[children]) {
                let obj = findArrayObject(item[children], {key, value, children})
                if (obj) {
                    return obj
                }
            }
        }
    }
}

递归查询父级节点数据

js 复制代码
/**
 * 递归查询父级节点数据
 * @param data
 * @param key
 * @param value
 * @param children
 * @returns {T[]|*[]}
 */
const findParentsArrayObject = (data = [], {key = 'id', value = '', children = 'children'}) => {
    for (let i in data) {
        if (data[i][key] === value) {
            //查询到就返回该数组对象
            return [data[i]]
        }
        if (data[i][children]) {
            let node = findParentsArrayObject(data[i][children], value)
            if (node !== undefined) {
                //查询到把父节点连起来
                return node.concat(data[i])
            }
        }
    }
}

递归查询该节点及孩子节点数据

js 复制代码
/**
 * 查询该节点及孩子节点数据
 * @param data
 * @param returnValue
 * @returns {*[]}
 */
const findChildrenArrayObject = (data = [], returnValue = []) => {
    for (let i in data) {
        //把元素都存入returnValue
        returnValue.push(data[i])
        if (data[i].children) {
            findChildrenArrayObject(data[i].children, returnValue)
        }
    }
    return returnValue
}