JavaScript遞歸操作樹形結(jié)構(gòu)代碼示例
更新時間：2024年01月12日 10:41:15 作者：悲傷敵敵畏
前端樹形結(jié)構(gòu)一般用于網(wǎng)頁的地理位置輸入框,地理位置級聯(lián)選擇,人員的部門選擇等,這篇文章主要給大家介紹了關于JavaScript遞歸操作樹形結(jié)構(gòu)的相關資料,需要的朋友可以參考下
樹形結(jié)構(gòu)轉(zhuǎn)成扁平結(jié)構(gòu)
數(shù)據(jù)結(jié)構(gòu)
let data = [
{
name: "1",
children: [{
name: "3"
}, {
name: "4"
}]
},
{
name: "2",
children: [{
name: "5"
}, {
name: "6",
children: [{name: "7"}]
}]
}
]轉(zhuǎn)成扁平化
function dataTree(data) {
let result = [];
for (const item of data) {
// result.push(item)
result.push({ name: item.name }) // 只取當前節(jié)點的信息，不包括 children
if (item.children === null || item.children === undefined) {
continue;
}
let getChildren = dataTree(item.children)
result = result.concat(getChildren)
}
return result
}
console.log("原數(shù)組結(jié)構(gòu)", data);
console.log("扁平化的對象", dataTree(data));運行結(jié)果
扁平結(jié)構(gòu)轉(zhuǎn)成樹形結(jié)構(gòu)
數(shù)據(jù)結(jié)構(gòu)
let datas = [
{id: 1, name: 1, parentId: null},
{id: 2, name: 2, parentId: 1},
{id: 3, name: 3, parentId: 1},
{id: 4, name: 4, parentId: null},
{id: 5, name: 5, parentId: 4},
{id: 6, name: 6, parentId: 4},
{id: 7, name: 7, parentId: 6},
{id: 8, name: 8, parentId: 6},
]轉(zhuǎn)成樹形結(jié)構(gòu)
function dataList(data){
let map = {};
for(let item of data){
map[item.id] = item
}
let result = []; //存放數(shù)組
for(let item of data){
item.children = []; //給每個數(shù)組添加一個空children
if(item.parentId === null){
result.push(item)//最上級的標簽
}else{
//相當于用這個 parentId 當做父Id去查找對比查找數(shù)據(jù)
let parent = map[item.parentId]
//添加到剛剛定義children數(shù)組中去
parent.children.push(item)
}
}
return result;
}
console.log("扁平化轉(zhuǎn)換成樹形結(jié)構(gòu)：");
console.log("原數(shù)組結(jié)構(gòu)",datas);
console.log("樹形結(jié)構(gòu)",dataList(datas));運行結(jié)果
根據(jù) parentId 查詢對應的上級所有父節(jié)點
數(shù)據(jù)結(jié)構(gòu)
const data = [
{
id: 1,
parentId: undefined,
name: 'TEST 1',
children: [
{
id: 5,
parentId:1,
name: 'TEST 5',
children: [
{
id: 10,
parentId:4,
name: 'TEST 10'
},
{
id: 11,
parentId:4,
name: 'TEST 11'
}
]
}
]
},
{
id: 2,
parentId: undefined,
name: 'TEST 2',
children: [
{
id: 6,
parentId:2,
name: 'TEST 6'
},
{
id: 7,
parentId:2,
name: 'TEST 7'
}
]
},
{
id: 3,
parentId: undefined,
name: 'TEST 3',
children: [
{
id: 8,
parentId:3,
name: 'TEST 8'
},
{
id: 9,
parentId:3,
name: 'TEST 9'
}
]
},
{
id: 4,
name: 'TEST 4',
children: [
]
}
]根據(jù)parentId查找父節(jié)點
/**
*
* @param list 最外層傳入的數(shù)組 也可以是 this.數(shù)組
* @param parentId 子節(jié)點對應的上級關系parentId
* @returns {*[]}
*/
function findP(list,parentId){
const result = []
/**
* 處理邏輯
* @param arr 要對比的數(shù)組
* @param parentId 傳遞進來數(shù)據(jù)要對比父id(相當于parentId)
*/
let forFn = function (arr,parentId){
for (let i = 0; i < arr.length; i++) {
let item = arr[i];
if (item.id === parentId){
result.push(item)
// console.log("遞歸數(shù)據(jù)",item)
// console.log("遞歸id",item.parentId)
forFn(list,item.parentId)
break
}else {
if (item.children){
forFn(item.children,parentId)
}
}
}
}
forFn(list,parentId);
return result;
}
console.log("數(shù)據(jù)結(jié)構(gòu)==",data)
console.log("查詢父類==",findP(data,11))運行結(jié)果（會把自己及父節(jié)點保存下來）
項目中運用到的（僅供參考）
需求：根據(jù)點擊子節(jié)點查詢沒有就一直向上查
思路：拿到樹形結(jié)構(gòu)數(shù)組直接遞歸查詢
難點：
1）獲取懶加載的樹形結(jié)構(gòu)，（因為懶加載封裝的數(shù)據(jù)結(jié)構(gòu)是分開裝的）
2）拼接成樹形結(jié)構(gòu)在處理
下面為實現(xiàn)例子 只列出大概實現(xiàn)思路
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>悲傷敵敵畏</title>
</head>
<body>
<script type="text/javascript">
/**
分析：
1.獲取樹節(jié)點的數(shù)據(jù)，
2.因為是list結(jié)構(gòu)的，先存放在map里面(遞歸)
3.拼接成層級數(shù)據(jù) 返回(遞歸)
4.根據(jù)parentId 查詢父級(遞歸)
*/
const data = [
{
childNodes: [
{childNodes: [{childNodes:[],data:{id: 5, name: "測試5", parentId: 3}}], data: {id: 3, name: "測試3", parentId: 1}},
{childNodes: [], data: {id: 4, name: "測試4", parentId: 1}}
],
data: {id: 1, name: "測試1", parentId: null}
},
{
childNodes: [],
data: {id: 2, name: "測試2", parentId: null}
},
];
console.info("要處理的數(shù)據(jù)結(jié)構(gòu) >>>",data)
//使用函數(shù)
forChildren(data)
function forChildren(list){
//TODO 轉(zhuǎn)成map結(jié)構(gòu),用于比較
let map = {};
let forMap = function (arr){
for (const item of arr) {
map[item.data.id] = item.data
if (item.childNodes.length > 0){
forMap(item.childNodes)
}
}
}
forMap(list)
console.log("封裝的map >>>",map)
//TODO 拼接成層級數(shù)據(jù)：
let result = [];
let forList =function(arr){
for (const item of arr) {
item.data.children = [] //為每個data添加一個數(shù)組
if (item.data.parentId === null){ //判斷是否為最外層（最外層一般都是空或者-1）
result.push(item.data)
}
if (item.childNodes.length > 0){
for (const children of item.childNodes) {
let paren = map[children.data.parentId]
paren.children.push(children.data)
forList(item.childNodes)
}
}
}
}
forList(list)
console.log("拼接好的樹形結(jié)構(gòu)",result)
//TODO 根據(jù)子節(jié)點查找上面的每個父節(jié)點
let parents = []
let forParent = function (arr,parentId){
for (const item of arr) {
if (item.id === parentId){
parents.push(item)
forParent(result,item.parentId)
break
}else {
if (item.children){
forParent(item.children,parentId)
}
}
}
}
forParent(result,5)
console.log("父級以及自己的數(shù)據(jù)",parents)
}
</script>
</body>
</html>總結(jié)
到此這篇關于JavaScript遞歸操作樹形結(jié)構(gòu)的文章就介紹到這了,更多相關js遞歸操作樹形結(jié)構(gòu)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)select下拉框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了jQuery鼠標懸浮鏈接彈出跟隨圖片實例代碼,需要的朋友可以參考下2016-01-01
本文為大家講解下JS的千分位算法的具體實現(xiàn)，先去除空格,判斷是否空值和非數(shù)；針對是否有小數(shù)點，分情況處理；感興趣的朋友可以參考下2013-07-07
利用js制作html table分頁示例(js實現(xiàn)分頁)
這篇文章主要介紹了利用js制作html table的分頁示例(js實現(xiàn)分頁),需要的朋友可以參考下2014-04-04
這篇文章主要介紹了基于javascript編寫簡單日歷的相關資料,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細介紹了JavaScript canvas繪制圓形加載進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了JavaScript生成有縮進的表格代碼的相關資料,代碼簡單易懂，非常具有參考價值，需要的朋友可以參考下2016-06-06
下面小編就為大家?guī)硪黄獪\談js的ajax的異步和同步請求的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了javascript實現(xiàn)tab切換特效，實現(xiàn)的方法很簡單，特別適合初學者學習javascript實現(xiàn)tab切換特效，tab切換再也不是問題，需要的朋友可以參考下2015-11-11
這篇文章主要介紹了JavaScript進階講解一作用域,主要包括作用域、函數(shù)、閉包、面向?qū)ο蟆S新特性、事件循環(huán)、微任務、宏任務、內(nèi)存管理、Promise、await、?asnyc、防抖、節(jié)流等等知識點，需要的朋友可以參考下2022-05-05