前端筆試題：數(shù)組轉(zhuǎn)樹形結(jié)構(gòu)

molyzzx 發(fā)布于2019-08-23 15:54 / 1045人閱讀

摘要：初始化數(shù)據(jù)輸出結(jié)果轉(zhuǎn)換函數(shù)這個轉(zhuǎn)換函數(shù)不受數(shù)據(jù)關系層級的限制，無論有多少層關系，只要一次循環(huán)就能搞定。所有人拿一根線，從他自己的位置開始，走到他父親的位置，那么這個樹形結(jié)構(gòu)就完成了。只要每個節(jié)點都做完了，樹形就出來了。

初始化數(shù)據(jù)

var data = [
    { parentId: 0, id: 1, value: "1" },
    { parentId: 3, id: 2, value: "2" },
    { parentId: 0, id: 3, value: "3" },
    { parentId: 1, id: 4, value: "4" },
    { parentId: 1, id: 5, value: "5" }
]

輸出結(jié)果

[
  {
    id:1,
    value:"1",
    children:[
      {id:4,value:"4",children:[]},
      {id:5,value:"5",children:[]}
    ]
  },{
    id:3,
    value:"3",
    children:[
      {id:2,value:"2",children:[]}
    ]
  }
]

轉(zhuǎn)換函數(shù)

function convertArrayToTree(arr){
  let 
    idsMap = {}, 
    result = [],
    node,
    parentNode,
    item, 
    j,
    leng = arr.length;
  for(j = 0; j <= leng; j++ ){
    
    item = arr[j];
    if(!idsMap["$"+ item.id]){
      node = {id: item.id, children: []}
      idsMap["$"+ item.id] = node;
    }else{
       node = idsMap["$"+ item.id]; 
    }
    node.value = item.value;
    
    if(item.parentId === 0){
       result.push(node);
    }else{
      if(!idsMap["$"+ item.parentId]){
        parentNode = {id: item.parentId, children: []}
        idsMap["$"+ item.parentId] = parentNode;
      }else{
        parentNode = idsMap["$"+ item.parentId];
        
      }
      parentNode.children.push(node);
    }
  }
  return result;
}

這個轉(zhuǎn)換函數(shù)不受數(shù)據(jù)關系層級的限制，無論有多少層關系，只要一次循環(huán)就能搞定。假如一群人都是爺爺、父親、兒子、孫子的關系，每個人只知道自己的位置和他父親的位置。所有人拿一根線，從他自己的位置開始，走到他父親的位置，那么這個樹形結(jié)構(gòu)就完成了。

在這里，我們用一個 idsMap 比喻這樣的集合，id 作位健值。每個節(jié)點有自己和他父節(jié)點 id，找到父節(jié)點，然后把他自己 push 到父節(jié)點的 children 中。

只要每個節(jié)點都做完了，樹形就出來了。

GPU云服務器云服務器前端筆試題前端基礎js筆試題筆試題大數(shù)據(jù)筆試題

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

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

前端 100 問：能搞懂80%的請把簡歷給我

摘要：解析第題第題為什么的和的中不能做異步操作解析第題第題京東下面代碼中在什么情況下會打印解析第題第題介紹下及其應用。盡量減少操作次數(shù)。解析第題第題京東快手周一算法題之兩數(shù)之和給定一個整數(shù)數(shù)組和一個目標值，找出數(shù)組中和為目標值的兩個數(shù)。引言半年時間，幾千人參與，精選大廠前端面試高頻 100 題，這就是「壹題」。在 2019 年 1 月 21 日這天，「壹題」項目正式開始，在這之后每個工...

Scott 2019-08-23 18:35 評論0 收藏0
前端開發(fā)筆試題（一）

摘要：之前的項目中使用了什么前端方法對頁面性能進行優(yōu)化，有什么心得。隨記這是我去咪咕數(shù)媒面試的時候的筆試題目，因為咪咕基本上都是移動端的項目，所以這里的題目比較偏向于移動端。一、不定項選擇題（共25分，每題5分） 1、下列語句中能夠正確的在一個HTML頁面中導入在同一目錄下的StyleSheet1.css樣式表的是（） ...

lemanli 2019-08-29 15:35 評論0 收藏0
前端開發(fā)筆試題（一）

摘要：之前的項目中使用了什么前端方法對頁面性能進行優(yōu)化，有什么心得。隨記這是我去咪咕數(shù)媒面試的時候的筆試題目，因為咪咕基本上都是移動端的項目，所以這里的題目比較偏向于移動端。一、不定項選擇題（共25分，每題5分） 1、下列語句中能夠正確的在一個HTML頁面中導入在同一目錄下的StyleSheet1.css樣式表的是（） ...

chuyao 2019-08-26 11:58 評論0 收藏0
前端開發(fā)筆試題（一）

摘要：之前的項目中使用了什么前端方法對頁面性能進行優(yōu)化，有什么心得。隨記這是我去咪咕數(shù)媒面試的時候的筆試題目，因為咪咕基本上都是移動端的項目，所以這里的題目比較偏向于移動端。一、不定項選擇題（共25分，每題5分） 1、下列語句中能夠正確的在一個HTML頁面中導入在同一目錄下的StyleSheet1.css樣式表的是（） ...

luckyyulin 2019-08-02 10:36 評論0 收藏0
前端筆試題面試題記錄（上）

摘要：后續(xù)前端筆試題面試題記錄下小結(jié)我想說的是在找工作期間，肯定有自己發(fā)揮不好，或者不會的問題，一定要在晚上的時候自己再學習總結(jié)一下，在一個問題上面盡量不要栽倒兩次，學到了的才是自己的。前言過完元宵，就到上海找了波工作，現(xiàn)在已經(jīng)入職好了，蹭波熱點，寫一波面試記錄，內(nèi)容包含筆試題和面試題，還有一些沒有寫進來，準備再開一篇，許久沒寫了，寫的確實有些慢。如果喜歡的話可以點波贊，或者關注一下，希...

wind3110991 2019-08-30 14:10 評論0 收藏0