javascriptはフラットなデータをツリー構造の高効率アルゴリズムに変換します。


一次元配列を一つの多層構造に変換する必要があるとき、一番簡単ですが、一番遅いのは複数のforサイクルの入れ子です。しかし、このようにするといくつかの欠点があります。それは効率が低すぎて、しかもいくつかの層がいくつかのforサイクルを入れ込む必要があります。使いにくいです。
O(n)級アルゴリズムを用いて1つの平たい配列すなわち1次元配列で代表されるメニュー構造を1つの階層のメニュー構造に変換することを実現した。
ビット配列の各要素には、以下の属性が必要です。
  • は唯一のid
  • を持っています。
  • はparent_を持っています。ID、このIDは親レベルのID
  • を指します。
    その他は元素ごとの情報です。ここはメニューです。メニューの名前とurl情報があります。
    注:
  • は、階層構造において、第1層のparent_である。idは0が必要です。
  • 親ノードの配列内の位置は、サブノードの前、すなわちノード3がノード3−2の前に配置されなければならない
  • である必要がある。
    平たい配列例:
    
    var menu_list = [{
       id: '1',
       menu_name: '  ',
       menu_url: 'setting',
       parent_id: 0
      }, {
       id: '1-1',
       menu_name: '    ',
       menu_url: 'setting.permission',
       parent_id: '1'
      }, {
       id: '1-1-1',
       menu_name: '      ',
       menu_url: 'setting.permission.user_list',
       parent_id: '1-1'
      }, {
       id: '1-1-2',
       menu_name: '      ',
       menu_url: 'setting.permission.user_add',
       parent_id: '1-1'
      }, {
       id: '1-1-3',
       menu_name: '      ',
       menu_url: 'setting.permission.role_list',
       parent_id: '1-1'
      }, {
       id: '1-2',
       menu_name: '    ',
       menu_url: 'setting.menu',
       parent_id: '1'
      }, {
       id: '1-2-1',
       menu_name: '    ',
       menu_url: 'setting.menu.menu_list',
       parent_id: '1-2'
      }, {
       id: '1-2-2',
       menu_name: '    ',
       menu_url: 'setting.menu.menu_add',
       parent_id: '1-2'
      }, {
       id: '2',
       menu_name: '  ',
       menu_url: 'order',
       parent_id: 0
      }, {
       id: '2-1',
       menu_name: '    ',
       menu_url: 'order.orderreview',
       parent_id: '2'
      }, {
       id: '2-2',
       menu_name: '    ',
       menu_url: 'order.refundmanagement',
       parent_id: '2'
      }
    ]
    アルゴリズムを実現するためのbuildTree
    アルゴリズムの思想:
    配列中の各ノードをtempオブジェクトにセットする(setを作成する)
    つまり配列の中に{id:'2-3'、parent_]があります。id:'2',…'というノードは、彼をtempに入れて'2-3': {id:'2-3'parent_id:'2',…}このJSON構造
    直接的に全体のtempオブジェクトを巡回して、このコードを通して   temp[temp[i].parent_id].children[temp[i].id]=temp[i]   現在のサブノードと親ノードとの接続を確立する。親ノードが必ずサブノードの前にいることを保証したからです。サブノードが現れたらそのままtemp[i].parent_を使えます。ID)は、親ノードを検索する際に、親ノードのチルドレンオブジェクトに参照を追加すればいいです。
    
    /**
     *                 
     * @param {[type]} list     ,           id parent_id     
     * @return {[type]} tree        
     */
    function buildTree(list){
    	let temp = {};
    	let tree = {};
    	for(let i in list){
    		temp[list[i].id] = list[i];
    	}
    	for(let i in temp){
    		if(temp[i].parent_id) {
    			if(!temp[temp[i].parent_id].children) {
    				temp[temp[i].parent_id].children = new Object();
    			}
    			temp[temp[i].parent_id].children[temp[i].id] = temp[i];
    		} else {
    			tree[temp[i].id] = temp[i];
    		}
    	}
    	return tree;
    }
    テスト結果:
    関数が多段の樹状構造の構築に成功したことが見られます。

    このアルゴリズムの効率は極めて高く,多重forサイクルよりもはるかに優れている。
    以下はテストデータです。使う時は5ミリ秒ぐらいです。
    
    var menu_list = [{
       id: '1',
       menu_name: '  ',
       menu_url: 'setting',
       parent_id: 0
      }, {
       id: '1-1',
       menu_name: '    ',
       menu_url: 'setting.permission',
       parent_id: '1'
      }, {
       id: '1-1-1',
       menu_name: '      ',
       menu_url: 'setting.permission.user_list',
       parent_id: '1-1'
      }, {
       id: '1-1-2',
       menu_name: '      ',
       menu_url: 'setting.permission.user_add',
       parent_id: '1-1'
      }, {
       id: '1-1-3',
       menu_name: '      ',
       menu_url: 'setting.permission.role_list',
       parent_id: '1-1'
      }, {
       id: '1-1-4',
       menu_name: '      ',
       menu_url: 'setting.permission.role_add',
       parent_id: '1-1'
      }, {
       id: '1-2',
       menu_name: '    ',
       menu_url: 'setting.menu',
       parent_id: '1'
      }, {
       id: '1-2-1',
       menu_name: '    ',
       menu_url: 'setting.menu.menu_list',
       parent_id: '1-2'
      }, {
       id: '1-2-2',
       menu_name: '    ',
       menu_url: 'setting.menu.menu_add',
       parent_id: '1-2'
      }, {
       id: '2',
       menu_name: '  ',
       menu_url: 'order',
       parent_id: 0
      }, {
       id: '2-1',
       menu_name: '    ',
       menu_url: 'order.orderreview',
       parent_id: '2'
      }, {
       id: '2-2',
       menu_name: '    ',
       menu_url: 'order.refundmanagement',
       parent_id: '2'
      }, {
       id: '2-3',
       menu_name: '    ',
       menu_url: 'order.realorder',
       parent_id: '2'
      }, {
       id: '2-1-1',
       menu_name: '    ',
       menu_url: 'order.orderreview.all',
       parent_id: '2-1'
      }, {
       id: '2-2-1',
       menu_name: '    ',
       menu_url: 'order.refundmanagement.all',
       parent_id: '2-2'
      }, {
       id: '2-2-2',
       menu_name: '   ',
       menu_url: 'order.refundmanagement.wait',
       parent_id: '2-2'
      }, {
       id: '2-2-3',
       menu_name: '    ',
       menu_url: 'order.refundmanagement.result',
       parent_id: '2-2'
      }, {
       id: '2-3-1',
       menu_name: '      ',
       menu_url: 'order.realorder.list',
       parent_id: '2-3'
      }, {
       id: '3',
       menu_name: '  ',
       menu_url: 'commodity',
       parent_id: 0
      }, {
       id: '3-1',
       menu_name: '    ',
       menu_url: 'commodity.classifieldmanagement',
       parent_id: '3'
      }, {
       id: '3-1-1',
       menu_name: '  ',
       menu_url: 'commodity.classifieldmanagement.management',
       parent_id: '3-1'
      }, {
       id: '3-1-2',
       menu_name: '     ',
       menu_url: 'commodity.classifieldmanagement.edit',
       parent_id: '3-1'
      }, {
       id: '3-2',
       menu_name: '    ',
       menu_url: 'commodity.brandmanagement',
       parent_id: '3'
      }, {
       id: '3-2-1',
       menu_name: '  ',
       menu_url: 'commodity.brandmanagement.management',
       parent_id: '3-2'
      }, {
       id: '3-2-2',
       menu_name: '     ',
       menu_url: 'commodity.brandmanagement.edit',
       parent_id: '3-2'
      }, {
       id: '3-3',
       menu_name: '    ',
       menu_url: 'commodity.commoditymanagement',
       parent_id: '3'
      }, {
       id: '3-3-1',
       menu_name: '  ',
       menu_url: 'commodity.commoditymanagement.management',
       parent_id: '3-3'
      }, {
       id: '3-3-2',
       menu_name: '     ',
       menu_url: 'commodity.commoditymanagement.edit',
       parent_id: '3-3'
      }, {
       id: '3-4',
       menu_name: '    ',
       menu_url: 'commodity.typeManagement',
       parent_id: '3'
      }, {
       id: '3-4-1',
       menu_name: '  ',
       menu_url: 'commodity.typeManagement.management',
       parent_id: '3-4'
      }, {
       id: '3-4-2',
       menu_name: '     ',
       menu_url: 'commodity.typeManagement.edit',
       parent_id: '3-4'
      }];
    これは私の大学二年生が考え出したものです。とても楽しかったです。先生が使っている3つのフォーマットが入れ子になっているのを見たからです。へへへへ 
    ここでは、Javascriptがフラットなデータを樹形構造に変換する高効率アルゴリズムについての記事を紹介します。JAvascriptのフラットデータを樹形構造に変換するには、以前の記事を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。