第Javascript中扁平化數(shù)據(jù)結(jié)構(gòu)與JSON樹形結(jié)構(gòu)轉(zhuǎn)換詳解目錄一.先說簡單的樹形結(jié)構(gòu)數(shù)扁平化處理二.再講將扁平化數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)JSON樹狀形結(jié)構(gòu)擴(kuò)充一個知識點：forin與forof的區(qū)別：總結(jié)不廢話，直接開干

一.先說簡單的樹形結(jié)構(gòu)數(shù)扁平化處理

上思想：思想：采用遞歸，每個對象都有childern,只要有children屬性提取出來將其放在空數(shù)組中然后將對象的其他屬性解構(gòu)出來，最后將數(shù)組合并

上代碼：

//已知JSON樹狀形結(jié)構(gòu)的數(shù)據(jù)data

letdata=[

{id:1,title:'標(biāo)題1',parent_id:0,},

{id:2,title:'標(biāo)題2',parent_id:0,

children:[

{id:3,title:'標(biāo)題2-1',parent_id:2,

children:[

{id:4,title:'標(biāo)題3-1',parent_id:3,

children:[

{id:5,title:'標(biāo)題4-1',parent_id:4}

{id:6,title:'標(biāo)題2-2',parent_id:2}

functionflat(data){

returndata.reduce((pre,cur)={

//console.log(cur);

//此處將對象的children屬性和值都解構(gòu)在空數(shù)組中，將對象的其他屬性和值都解構(gòu)在i里面。

const{children=[],...i}=cur;//注意...i只能寫在解構(gòu)賦值的末尾，否則報錯

//console.log(i);

////console.log(children);

returnpre.concat([{...i}],flat(children))//利用遞歸回調(diào),數(shù)組合并,注意此處{...i}是解構(gòu)

},[]);

console.log(flat(data));

這里用到了es6解構(gòu)賦值和不常用的Array.reduce,文章講的不錯，可以去看看。

二.再講將扁平化數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)JSON樹狀形結(jié)構(gòu)

思想都在步驟里了。

老規(guī)矩上代碼：

//已知扁平化數(shù)據(jù)Arr

letArr=[

{id:1,title:'標(biāo)題1',parent_id:0},

{id:2,title:'標(biāo)題2',parent_id:0},

{id:3,title:'標(biāo)題2-1',parent_id:2},

{id:4,title:'標(biāo)題3-1',parent_id:3},

{id:5,title:'標(biāo)題4-1',parent_id:4},

{id:6,title:'標(biāo)題2-2',parent_id:2},

constresult=[]

functionfn(list){

constremap=list.reduce((pre,cur)={//###第一步：將數(shù)組轉(zhuǎn)換成鍵值對的形式(鍵是id值，值是對象)

//console.log(cur);

pre[cur.id]=cur

//console.log(pre);

returnpre

},{})

//console.log(remap);

//###第二步，循環(huán)遍歷數(shù)組，判斷是不是(樹狀結(jié)構(gòu)最外層，祖宗層數(shù)據(jù))第一層的數(shù)據(jù)(本處就是parent_id等不等于0)

for(letitemoflist){//用普通的for循環(huán)也行，但是用forin不行,只能獲取數(shù)組的元素下標(biāo),或者對象的鍵

console.log(item);

if(item.parent_id===0){

result.push(item)

continue

//console.log(item.parent_id);

//console.log(remap[item.parent_id]);//注意obj[key]就代表是對象的值value

if(item.parent_idinremap){//換成else也可，目的將不是第一層的數(shù)據(jù)(parent_id不等于0)挑出來，并賦予一個children屬性

constparent=remap[item.parent_id];

parent.children=parent.children||[];

//console.log(parent);

parent.children.push(item);

//console.log(parent);

//console.log(result);

returnresult

console.log(fn(Arr));

擴(kuò)充一個知識點：forin與forof的區(qū)別：

for-in結(jié)構(gòu)對Array（數(shù)組）和Object（對象）都可以使用，但只能拿到數(shù)組元素下標(biāo)或者對象的鍵；

而for-of結(jié)構(gòu)在對Object（對象）使用時會報錯，在數(shù)組是可以拿到數(shù)組元素。

constarr=[2,3,4]

constobj={

a:2,

b:3,

for(letiteminarr){

console.log(item);//0,1,2

for(letitemofarr){

console.log(item);//2,3,4

for(letiteminobj){