技术实践
JavaScript递归查询id所对应的节点
在开发管理系统的时候需做一个导航数据节点展示,经常会需要用递归查询数据。

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

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
}