国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

扁平數(shù)組和樹形結(jié)構(gòu)的相互轉(zhuǎn)換

mgckid / 3272人閱讀

摘要：引言最近接手一個(gè)項(xiàng)目中很多地方需要用到樹形結(jié)構(gòu)表格等，因此自己封了個(gè)的樹和表格組件，需要經(jīng)常對(duì)兩種形式的數(shù)據(jù)進(jìn)行相互轉(zhuǎn)換，這里記錄下轉(zhuǎn)換的方法，組件等有時(shí)間再完善下也發(fā)上來。

引言

最近接手一個(gè)項(xiàng)目中很多地方需要用到樹形結(jié)構(gòu)表格等，因此自己封了個(gè)VUE的樹和表格組件，需要經(jīng)常對(duì)兩種形式的數(shù)據(jù)進(jìn)行相互轉(zhuǎn)換，這里記錄下轉(zhuǎn)換的方法，組件等有時(shí)間再完善下也發(fā)上來。

扁平數(shù)組轉(zhuǎn)換為樹形結(jié)構(gòu)

這個(gè)是最常用的，當(dāng)我們從后臺(tái)獲取一個(gè)扁平數(shù)組的時(shí)候，通常比如用id、pid來標(biāo)識(shí)父子關(guān)系，如：

var arr = [{id: 1, pid: "-1"},{id: 11, pid: "1"},{id: 12, pid: "1"}]

用map記錄的方法是最常用效果也最好的復(fù)雜度是O(nlgn),支持多個(gè)根節(jié)點(diǎn):

function listToTree(list) {
    var map = {}, node, tree= [], i;
    for (i = 0; i < list.length; i ++) {
        map[list[i].id] = list[i]; 
        list[i].children = []; 
    }
    for (i = 0; i < list.length; i += 1) {
        node = list[i];
        if (node.pid !== "-1") {
            map[node.pid].children.push(node);
        } else {
            tree.push(node);
        }
    }
    return tree;
}

listToTree(arr); //[{"id":1,"pid":"-1","children":[{"id":11,"pid":"1","children":[]},{"id":12,"pid":"1","children":[]}]}]

但是項(xiàng)目中有個(gè)需求，在后臺(tái)沒有返回給帶層級(jí)信息level的時(shí)候，需要用到層級(jí)信息，這樣轉(zhuǎn)換沒法計(jì)算出層級(jí)，因此就需要用迭代的方法了，默認(rèn)根節(jié)點(diǎn)層級(jí)為0，依次遞增：

function listToTreeWithLevel(list, parent, level) {
    var out = []
    for (var node of list) {  
            if (node.pid == parent) {
                node.level = level;
                var children = listToTreeWithLevel(list, node.id, level + 1)
                if (children.length) {
                    node.children = children
                }
                out.push(node)
            }
    }
    return out
}

listToTreeWithLevel(arr, "-1", 0) //[{"id":1,"pid":"-1","children":[{"id":11,"pid":"1","children":[],"level":1},{"id":12,"pid":"1","children":[],"level":1}],"level":0}]
樹形結(jié)構(gòu)轉(zhuǎn)換為扁平數(shù)組

這個(gè)其實(shí)就是數(shù)據(jù)結(jié)構(gòu)中的廣度優(yōu)先遍歷：

function treeToList(tree) {
  var queen = [];
  var out = [];
  queen = queen.concat(tree);
  while(queen.length) {
      var first = queen.shift();
    if (first.children) {
        queen = queen.concat(first.children)
      delete first["children"];
    }
    
    out.push(first);
  }
  return out;
}

var tree = [{"id":1,"pid":"-1","children":[{"id":11,"pid":"1","children":[]},{"id":12,"pid":"1","children":[]}]}];
treeToList(tree) //[{"id":1,"pid":"-1"},{"id":11,"pid":"1"},{"id":12,"pid":"1"}]
參考資料

listtotree

找本數(shù)據(jù)結(jié)構(gòu)看看dfs和bfs

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99604.html

相關(guān)文章

  • 扁平數(shù)組與JSON樹結(jié)構(gòu)互轉(zhuǎn)

    摘要：前言在工作中我們往往可能會(huì)遇到無限級(jí)別的分類等等的需求，往往后端返回的數(shù)據(jù)結(jié)構(gòu)可能不是我們想要的數(shù)據(jù)結(jié)構(gòu)，所以我們來看怎么進(jìn)行處理扁平數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為樹型結(jié)構(gòu)解憂雜貨鋪解憂雜貨鋪解憂雜貨鋪解憂雜貨鋪解憂雜貨鋪解憂雜貨鋪前言 在工作中我們往往可能會(huì)遇到無限級(jí)別的分類等等的需求，往往后端返回的數(shù)據(jù)結(jié)構(gòu)可能不是我們想要的數(shù)據(jù)結(jié)構(gòu)，所以我們來看怎么進(jìn)行處理 扁平數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為JSON樹型結(jié)構(gòu) [ ...

    silvertheo 評(píng)論0 收藏0

  • 實(shí)現(xiàn)一個(gè)可無限折疊的table

    摘要：但實(shí)際上就是在上點(diǎn)擊時(shí)對(duì)其子集進(jìn)行隱藏或顯示通過縮進(jìn)的距離來表現(xiàn)層級(jí)關(guān)系在代碼里很東西其實(shí)都是偽裝出來的，例如我們要實(shí)現(xiàn)的這個(gè)可無限折疊的。 前言 如何在table上實(shí)現(xiàn)一個(gè)可折疊展開子節(jié)點(diǎn)的table？先看下最終實(shí)現(xiàn)效果圖： showImg(https://segmentfault.com/img/remote/1460000017033990?w=758&h=453); 其實(shí)這個(gè)項(xiàng)...

    crossea 評(píng)論0 收藏0

  • vue+element tree(樹形控件數(shù)據(jù)格式)組件(1)

    摘要：樹形控件數(shù)據(jù)格式組件最近做了第一個(gè)組內(nèi)可以使用的組件，雖然是最簡(jiǎn)版，也廢了不少力。讓我來記錄這個(gè)樹形組件的編寫過程和期間用到的知識(shí)點(diǎn)。 vue+element tree(樹形控件數(shù)據(jù)格式)組件(1), 最近做了第一個(gè)組內(nèi)可以使用的組件，雖然是最簡(jiǎn)版，也廢了不少力。各位前輩幫我解決問題，才勉強(qiáng)搞定。讓我來記錄這個(gè)樹形組件的編寫過程和期間用到的知識(shí)點(diǎn)。 首先說說需求，就是點(diǎn)擊出現(xiàn)彈窗+蒙板...

    Pines_Cheng 評(píng)論0 收藏0

  • vue+element tree(樹形控件數(shù)據(jù)格式)組件(1)

    摘要：樹形控件數(shù)據(jù)格式組件最近做了第一個(gè)組內(nèi)可以使用的組件，雖然是最簡(jiǎn)版，也廢了不少力。讓我來記錄這個(gè)樹形組件的編寫過程和期間用到的知識(shí)點(diǎn)。 vue+element tree(樹形控件數(shù)據(jù)格式)組件(1), 最近做了第一個(gè)組內(nèi)可以使用的組件，雖然是最簡(jiǎn)版，也廢了不少力。各位前輩幫我解決問題，才勉強(qiáng)搞定。讓我來記錄這個(gè)樹形組件的編寫過程和期間用到的知識(shí)點(diǎn)。 首先說說需求，就是點(diǎn)擊出現(xiàn)彈窗+蒙板...

    wangdai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<