Javascript中扁平化數(shù)據(jù)結(jié)構(gòu)與JSON樹形結(jié)構(gòu)轉(zhuǎn)換詳解
不廢話,直接開干
一. 先說簡單的樹形結(jié)構(gòu)數(shù)扁平化處理
上思想: 思想:采用遞歸,每個對象都有childern,只要有children屬性提取出來將其放在空數(shù)組中 然后將對象的其他屬性解構(gòu)出來,最后將數(shù)組合并
上代碼:
//已知JSON樹狀形結(jié)構(gòu)的數(shù)據(jù)data let data = [ {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} ] } ], function flat(data){ return data.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); return pre.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 let Arr = [ {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}, ]; const result = [] function fn(list){ const remap = list.reduce((pre,cur)=>{ //###第一步:將數(shù)組轉(zhuǎn)換成鍵值對的形式(鍵是id值,值是對象) // console.log(cur); pre[cur.id]=cur // console.log(pre); return pre },{}) //console.log(remap); //###第二步,循環(huán)遍歷數(shù)組,判斷是不是(樹狀結(jié)構(gòu)最外層,祖宗層數(shù)據(jù))第一層的數(shù)據(jù)(本處就是parent_id等不等于0) for(let item of list){ //用普通的for循環(huán)也行,但是用for in 不行,只能獲取數(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_id in remap) { //換成else也可,目的將不是第一層的數(shù)據(jù)(parent_id不等于0)挑出來,并賦予一個children屬性 const parent = remap[item.parent_id]; parent.children = parent.children || []; // console.log(parent); parent.children.push(item); //console.log(parent); } } // console.log(result); return result } console.log(fn(Arr));
擴充一個知識點:for in 與 for of 的區(qū)別 :
for-in結(jié)構(gòu)對 Array(數(shù)組)和Object(對象)都可以使用,但只能拿到數(shù)組元素下標(biāo)或者對象的鍵;
而for-of結(jié)構(gòu)在對Object(對象)使用時會報錯,在數(shù)組是可以拿到數(shù)組元素。
const arr = [2,3,4] const obj = { a:2, b:3, c:4 }, for (let item in arr){ console.log(item); // 0 , 1 , 2 } for (let item of arr){ console.log(item); // 2 , 3 , 4 } for (let item in obj){ console.log(item) // a ,b ,c } for (let item of obj ){ console.log(item) // Uncaught TypeError: arr is not iterable }
總結(jié)
到此這篇關(guān)于Javascript中扁平化數(shù)據(jù)結(jié)構(gòu)與JSON樹形結(jié)構(gòu)轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)js扁平化與JSON樹形結(jié)構(gòu)轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實現(xiàn)計算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)計算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù),本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-03-03JavaScript 權(quán)威指南(第四版) 讀書筆記
JavaScript 權(quán)威指南(第四版) 讀書筆記,大家可以看看。2009-08-08JavaScript實現(xiàn)簡單的雙色球(實例講解)
下面小編就為大家?guī)硪黄狫avaScript實現(xiàn)簡單的雙色球(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07