樹形結構轉(zhuǎn)成扁平結構
數(shù)據(jù)結構
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ù)組結構", data);
console.log("扁平化的對象", dataTree(data));運行結果
扁平結構轉(zhuǎn)成樹形結構
數(shù)據(jù)結構
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)成樹形結構
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)換成樹形結構：");
console.log("原數(shù)組結構",datas);
console.log("樹形結構",dataList(datas));運行結果
?根據(jù) parentId 查詢對應的上級所有父節(jié)點
數(shù)據(jù)結構
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ù)結構==",data)
console.log("查詢父類==",findP(data,11))運行結果（會把自己及父節(jié)點保存下來）
?項目中運用到的（僅供參考）
需求：根據(jù)點擊子節(jié)點查詢沒有就一直向上查
思路：拿到樹形結構數(shù)組直接遞歸查詢
難點：
? ? ? ? 1）獲取懶加載的樹形結構，（因為懶加載封裝的數(shù)據(jù)結構是分開裝的）
? ? ? ? 2）拼接成樹形結構在處理文章來源：http://www.zghlxwxcb.cn/news/detail-767456.html
下面為實現(xiàn)例子 只列出大概實現(xiàn)思路文章來源地址http://www.zghlxwxcb.cn/news/detail-767456.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>悲傷敵敵畏</title>
</head>
<body>
<script type="text/javascript">
/**
分析：
1.獲取樹節(jié)點的數(shù)據(jù)，
2.因為是list結構的，先存放在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ù)結構 >>>",data)
//使用函數(shù)
forChildren(data)
function forChildren(list){
//TODO 轉(zhuǎn)成map結構,用于比較
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("拼接好的樹形結構",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>到了這里，關于js遞歸操作樹形結構的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
