Javascript中扁平化數(shù)據(jù)結(jié)構(gòu)與JSON樹形結(jié)構(gòu)轉(zhuǎn)換詳解
不廢話,直接開干
一. 先說(shuō)簡(jiǎn)單的樹形結(jié)構(gòu)數(shù)扁平化處理
上思想: 思想:采用遞歸,每個(gè)對(duì)象都有childern,只要有children屬性提取出來(lái)將其放在空數(shù)組中 然后將對(duì)象的其他屬性解構(gòu)出來(lái),最后將數(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); //此處將對(duì)象的children屬性和值都解構(gòu)在空數(shù)組中,將對(duì)象的其他屬性和值都解構(gòu)在i里面。 const {children=[],...i}=cur; // 注意 ...i 只能寫在解構(gòu)賦值的末尾,否則報(bào)錯(cuò) // 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,文章講的不錯(cuò),可以去看看。
二. 再講將扁平化數(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)換成鍵值對(duì)的形式(鍵是id值,值是對(duì)象) // 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),或者對(duì)象的鍵 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] 就代表是對(duì)象的值value if(item.parent_id in remap) { //換成else也可,目的將不是第一層的數(shù)據(jù)(parent_id不等于0)挑出來(lái),并賦予一個(gè)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));
擴(kuò)充一個(gè)知識(shí)點(diǎn):for in 與 for of 的區(qū)別 :
for-in結(jié)構(gòu)對(duì) Array(數(shù)組)和Object(對(duì)象)都可以使用,但只能拿到數(shù)組元素下標(biāo)或者對(duì)象的鍵;
而for-of結(jié)構(gòu)在對(duì)Object(對(duì)象)使用時(shí)會(huì)報(bào)錯(cuò),在數(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js 獲取html5的data屬性實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 獲取html5的data屬性實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07JS焦點(diǎn)圖,JS 多個(gè)頁(yè)面放多個(gè)焦點(diǎn)圖的實(shí)例
下面小編就為大家?guī)?lái)一篇JS焦點(diǎn)圖,JS 多個(gè)頁(yè)面放多個(gè)焦點(diǎn)圖的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12JavaScript實(shí)現(xiàn)計(jì)算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)計(jì)算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù),本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03JavaScript 權(quán)威指南(第四版) 讀書筆記
JavaScript 權(quán)威指南(第四版) 讀書筆記,大家可以看看。2009-08-08基于javascript實(shí)現(xiàn)表格的簡(jiǎn)單操作
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)表格的簡(jiǎn)單操作,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-05-05bootstrap table分頁(yè)模板和獲取表中的ID方法
這篇文章主要介紹了bootstrap table分頁(yè)模板和獲取表中的ID方法,需要的朋友可以參考下2017-01-01JavaScript實(shí)現(xiàn)簡(jiǎn)單的雙色球(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇JavaScript實(shí)現(xiàn)簡(jiǎn)單的雙色球(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07解讀Bootstrap v4 sass設(shè)計(jì)
這篇文章主要介紹了Bootstrap v4 sass設(shè)計(jì)的相關(guān)資料,需要的朋友可以參考下2016-05-05