JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理
更新時間:2022年07月25日 09:09:42 作者:卡布奇諾y
這篇文章主要介紹了JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下
樹形數(shù)據(jù)的一些相關(guān)處理方法
// 用于測試的樹形數(shù)據(jù)
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. 遞歸查找當(dāng)前節(jié)點(diǎn)
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. 遞歸查找當(dāng)前節(jié)點(diǎn):', item, index, arr)
})
2. 遞歸獲取當(dāng)前節(jié)點(diǎn)及以下的所有節(jié)點(diǎn)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此樹以下的所有節(jié)點(diǎn)id
const idArr = getChildId(treeData, [])
console.log('2. 獲取當(dāng)前節(jié)點(diǎn)及以下的所有節(jié)點(diǎn)id', idArr)
3. 遞歸判斷所有后代節(jié)點(diǎn)中有無此節(jié)點(diǎn)中的一個
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)后代節(jié)點(diǎn)中有無 測試1112(1112)節(jié)點(diǎn)
const mark1 = judgeChildrenHad(treeData, ['1112'])
console.log('3. mark1', mark1)
// 判斷 測試111(111)后代節(jié)點(diǎn)中有無 測試1121(1121)節(jié)點(diǎn)
const mark2 = judgeChildrenHad(treeData, ['1121'])
console.log('3. mark2', mark2)
4. 遞歸樹形數(shù)據(jù)扁平化
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. 樹形數(shù)據(jù)扁平化', res1)
5. 扁平化數(shù)據(jù)轉(zhuǎn)樹形數(shù)據(jù)結(jié)構(gòu)
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. 扁平化數(shù)據(jù)轉(zhuǎn)樹形數(shù)據(jù)結(jié)構(gòu)', res2)
到此這篇關(guān)于JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理的文章就介紹到這了,更多相關(guān)JS樹形結(jié)構(gòu)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
相關(guān)文章
javascript 冒泡排序 正序和倒序?qū)崿F(xiàn)代碼
javascript 冒泡排序 正序和倒序?qū)崿F(xiàn)代碼,需要的朋友可以參考下。2010-12-12
前端面試運(yùn)行npm?run?xxx發(fā)生過程原理解析
這篇文章主要為大家介紹了前端面試運(yùn)行npm?run?xxx過程原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
javascript while語句和do while語句的區(qū)別分析
這篇文章通過實(shí)例代碼較詳細(xì)的給大家介紹了javascript while語句和do while語句的區(qū)別,感興趣的朋友一起看看吧2007-12-12
JavaScript實(shí)現(xiàn)字符串截取的三個方法總結(jié)
在?JavaScript?中,可以使用?substr()、slice()?和?substring()?方法截取字符串。這篇文章就來通過一些示例和大家聊聊這些方法的具體操作,需要的可以參考一下2023-02-02

