JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理
更新時間:2022年07月25日 09:09:42 作者:卡布奇諾y
這篇文章主要介紹了JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的朋友可以參考一下
樹形數(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é)點
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é)點:', item, index, arr) })
2. 遞歸獲取當(dāng)前節(jié)點及以下的所有節(jié)點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é)點id const idArr = getChildId(treeData, []) console.log('2. 獲取當(dāng)前節(jié)點及以下的所有節(jié)點id', idArr)
3. 遞歸判斷所有后代節(jié)點中有無此節(jié)點中的一個
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é)點中有無 測試1112(1112)節(jié)點 const mark1 = judgeChildrenHad(treeData, ['1112']) console.log('3. mark1', mark1) // 判斷 測試111(111)后代節(jié)點中有無 測試1121(1121)節(jié)點 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-12javascript while語句和do while語句的區(qū)別分析
這篇文章通過實例代碼較詳細(xì)的給大家介紹了javascript while語句和do while語句的區(qū)別,感興趣的朋友一起看看吧2007-12-12JavaScript實現(xiàn)字符串截取的三個方法總結(jié)
在?JavaScript?中,可以使用?substr()、slice()?和?substring()?方法截取字符串。這篇文章就來通過一些示例和大家聊聊這些方法的具體操作,需要的可以參考一下2023-02-02