JavaScript树形数据结构处理
更新时间：2022年07月25日 09:09:42 作者：卡布奇诺y
这篇文章主要介绍了JavaScript树形数据结构处理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
树形数据的一些相关处理方法
// 用于测试的树形数据
const treeData = [
{
id: '1',
name: '测试1',
pId: '0',
children: [
{
id: '11',
name: '测试11',
pId: '1',
children: [
{
id: '111',
name: '测试111',
pId: '11',
children: [
{
id: '1111',
name: '测试1111',
pId: '111',
},
{
id: '1112',
name: '测试1112',
pId: '111',
}
]
},
{
id: '112',
name: '测试112',
pId: '11',
children: [
{
id: '1121',
name: '测试1121',
pId: '112',
}
]
},
{
id: '113',
name: '测试113',
pId: '11',
},
]
},
{
id: '12',
name: '测试12',
pId: '1',
children: [
{
id: '121',
name: '测试121',
pId: '12',
}
]
},
{
id: '13',
name: '测试13',
pId: '1'
},
{
id: '14',
name: '测试14',
pId: '1'
}
]
},
{
id: '2',
name: '测试2',
pId: '0',
children: [
{
id: '21',
name: '测试21',
pId: '2',
children: [
{
id: '211',
name: '测试211',
pId: '21',
},
{
id: '212',
name: '测试212',
pId: '21',
}
]
},
{
id: '22',
name: '测试22',
pId: '2'
},
]
}
]1. 递归查找当前节点
function findRecursion (data, key, callback) {
data.forEach((item, index, arr) => {
if (item.id === key) {
return callback(item, index, arr)
}
if (item.children) {
return findRecursion(item.children, key, callback)
}
})
}
// 查找 测试1112(1112)
findRecursion(treeData, '1112', (item, index, arr) => {
console.log('1. 递归查找当前节点:', item, index, arr)
})
2. 递归获取当前节点及以下的所有节点id
function getChildId (data, idArr) {
data.forEach(item => {
if (item.id) {
idArr.push(item.id)
}
if (item.children) {
getChildId(item.children, idArr)
}
})
return idArr
}
// 获取 treeData此树以下的所有节点id
const idArr = getChildId(treeData, [])
console.log('2. 获取当前节点及以下的所有节点id', idArr)
3. 递归判断所有后代节点中有无此节点中的一个
function judgeChildrenHad (data, keys) {
let mark = false
for (let i = 0; i < data.length; i++) {
if (keys.includes(data[i].id)) {
mark = true
} else if (data[i].children?.length) {
return judgeChildrenHad(data[i].children, keys)
}
}
return mark
}
// 判断 测试111(111)后代节点中有无 测试1112(1112)节点
const mark1 = judgeChildrenHad(treeData, ['1112'])
console.log('3. mark1', mark1)
// 判断 测试111(111)后代节点中有无 测试1121(1121)节点
const mark2 = judgeChildrenHad(treeData, ['1121'])
console.log('3. mark2', mark2)
4. 递归树形数据扁平化
function treeToFlat (data) {
const result = []
data.forEach(item => {
const obj = {
name: item.name,
id: item.id,
pId: item.pId
}
result.push(obj)
if (item.children?.length) {
// console.log('------', item.name, treeToFlat(item.children, item.id))
result.push(...treeToFlat(item.children, item.id))
}
})
return result
}
const res1 = treeToFlat(treeData)
console.log('4. 树形数据扁平化', res1)
5. 扁平化数据转树形数据结构
function flatToTree (data) {
const result = []
const itemMap = {}
for (const item of data) {
const id = item.id
const pId = item.pId
if (itemMap[id]) {
itemMap[id] = {
...itemMap[id],
...item
}
} else {
itemMap[id] = { ...item }
}
const treeItem = itemMap[id]
if (!pId || pId === '0') {
result.push(treeItem)
} else {
if (!itemMap[pId]) {
itemMap[pId] = {
children: []
}
}
if (!itemMap[pId].children) {
itemMap[pId].children = []
}
itemMap[pId].children.push(treeItem)
}
}
return result
}
const r = JSON.parse(JSON.stringify(res1))
r.unshift({
id: '999',
name: 'yyyyy',
pId: '1'
})
const res2 = flatToTree(r)
console.log('5. 扁平化数据转树形数据结构', res2)
到此这篇关于JavaScript树形数据结构处理的文章就介绍到这了,更多相关JS树形结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
javascript 冒泡排序 正序和倒序实现代码，需要的朋友可以参考下。2010-12-12
快捷留言功能，就是您现在看到在右侧浮动的那个小玩意，通过它可以直接提交留言并推荐，您想在博客里加上这个功能吗？2010-04-04
这篇文章主要介绍了JS中的函数与对象的创建方式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要为大家介绍了前端面试运行npm run xxx过程原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了JS中的const命令你真懂它吗，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要为大家详细介绍了JS自定义滚动条效果的简单实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
javascript while语句和do while语句的区别分析
这篇文章通过实例代码较详细的给大家介绍了javascript while语句和do while语句的区别，感兴趣的朋友一起看看吧2007-12-12
在 JavaScript 中，可以使用 substr()、slice() 和 substring() 方法截取字符串。这篇文章就来通过一些示例和大家聊聊这些方法的具体操作，需要的可以参考一下2023-02-02
这篇文章主要为大家介绍了GoJs中标题和缩略图使用技巧详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件，本文就详细的介绍一下如何使用，感兴趣的可以了解一下2021-11-11
最新评论