欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript中扁平化數(shù)據(jù)結(jié)構(gòu)與JSON樹形結(jié)構(gòu)轉(zhuǎn)換詳解

 更新時(shí)間:2022年05月10日 16:40:24   作者:半城櫻花雨  
之前朋友問過(guò)我一個(gè)問題,項(xiàng)目中遇到扁平化數(shù)據(jù)結(jié)構(gòu)不知如何樹形化,下面這篇文章主要給大家介紹了關(guān)于Javascript中扁平化數(shù)據(jù)結(jié)構(gòu)與JSON樹形結(jié)構(gòu)轉(zhuǎn)換的相關(guā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)文章

最新評(píng)論