如何從數組本身設置根節點

Question

我有一個平面陣列如下：

var array = [{"id":"a","root":"a","parent":" "},
{"id":"a.001","root":"a","parent":"a"},
{"id":"a.001.001","root":"a","parent":"a.001"},
{"id":"a.001.001.001","root":"a","parent":"a.001.001"},
{"id":"a.001.001.001.001","root":"a","parent":"a.001.001.001"},
{"id":"a.001.001.001.002","root":"a","parent":"a.001.001.001"},
{"id":"a.001.001.001.003","root":"a","parent":"a.001.001.001"},
{"id":"a.001.001.001.004","root":"a","parent":"a.001.001.001"},
{"id":"a.001.001.002","root":"a","parent":"a.001.001"},
{"id":"a.001.001.002.001","root":"a","parent":"a.001.001.002"},
{"id":"a.001.001.002.002","root":"a","parent":"a.001.001.002"},
{"id":"a.001.001.002.003","root":"a","parent":"a.001.001.002"},
{"id":"a.001.001.002.004","root":"a","parent":"a.001.001.002"},
{"id":"a.001.001.003","root":"a","parent":"a.001.001"},
{"id":"a.001.001.003.001","root":"a","parent":"a.001.001.003"},
{"id":"a.001.001.003.002","root":"a","parent":"a.001.001.003"},
{"id":"a.001.001.003.003","root":"a","parent":"a.001.001.003"},
{"id":"a.001.001.003.004","root":"a","parent":"a.001.001.003"},
{"id":"a.001.002","root":"a","parent":"a.001"},
{"id":"a.001.002.001","root":"a","parent":"a.001.002"},
{"id":"a.001.002.002","root":"a","parent":"a.001.002"},
{"id":"a.001.002.003","root":"a","parent":"a.001.002"},
{"id":"a.001.003","root":"a","parent":"a.001"},
{"id":"a.001.003.001","root":"a","parent":"a.001.003"},
{"id":"a.001.003.002","root":"a","parent":"a.001.003"},
{"id":"a.001.004","root":"a","parent":"a.001"},
{"id":"a.001.004.001","root":"a","parent":"a.001.004"},
{"id":"a.001.004.002","root":"a","parent":"a.001.004"},
{"id":"a.001.004.003","root":"a","parent":"a.001.004"},
{"id":"a.001.004.004","root":"a","parent":"a.001.004"}
]

現在我已經使用下面的代碼將此平面數組轉換為樹數組。

 var array=[{"id":"a","root":"a","parent":" "},{"id":"a.001","root":"a","parent":"a"},{"id":"a.001.001","root":"a","parent":"a.001"},{"id":"a.001.001.001","root":"a","parent":"a.001.001"},{"id":"a.001.001.001.001","root":"a","parent":"a.001.001.001"},{"id":"a.001.001.001.002","root":"a","parent":"a.001.001.001"},{"id":"a.001.001.001.003","root":"a","parent":"a.001.001.001"},{"id":"a.001.001.001.004","root":"a","parent":"a.001.001.001"},{"id":"a.001.001.002","root":"a","parent":"a.001.001"},{"id":"a.001.001.002.001","root":"a","parent":"a.001.001.002"},{"id":"a.001.001.002.002","root":"a","parent":"a.001.001.002"},{"id":"a.001.001.002.003","root":"a","parent":"a.001.001.002"},{"id":"a.001.001.002.004","root":"a","parent":"a.001.001.002"},{"id":"a.001.001.003","root":"a","parent":"a.001.001"},{"id":"a.001.001.003.001","root":"a","parent":"a.001.001.003"},{"id":"a.001.001.003.002","root":"a","parent":"a.001.001.003"},{"id":"a.001.001.003.003","root":"a","parent":"a.001.001.003"},{"id":"a.001.001.003.004","root":"a","parent":"a.001.001.003"},{"id":"a.001.002","root":"a","parent":"a.001"},{"id":"a.001.002.001","root":"a","parent":"a.001.002"},{"id":"a.001.002.002","root":"a","parent":"a.001.002"},{"id":"a.001.002.003","root":"a","parent":"a.001.002"},{"id":"a.001.003","root":"a","parent":"a.001"},{"id":"a.001.003.001","root":"a","parent":"a.001.003"},{"id":"a.001.003.002","root":"a","parent":"a.001.003"},{"id":"a.001.004","root":"a","parent":"a.001"},{"id":"a.001.004.001","root":"a","parent":"a.001.004"},{"id":"a.001.004.002","root":"a","parent":"a.001.004"},{"id":"a.001.004.003","root":"a","parent":"a.001.004"},{"id":"a.001.004.004","root":"a","parent":"a.001.004"}] for (var i = 0; i < array.length; i++) { array[i].children = []; } function tree(array) { for (var i = 0; i < array.length; i++) { array.forEach(function(n) { if (n.parent === array[i].id) { array[i].children.push(n); } }); } return array.filter(function(n) { return n.parent === ""; }); } var fdata = tree(array); console.log(fdata);

我想將“a”（從根開始）作為上述樹數組的根節點。

請讓我怎么做。

問候，

泰雅。

Answer 1

對於您的情況，我會使用 lodash：

const _ = require('lodash');

var array=[{"id":"a","root":"a","parent":" "},{"id":"a.001","root":"a","parent":"a"},{"id":"a.001.001","root":"a","parent":"a.001"},{"id":"a.001.001.001","root":"a","parent":"a.001.001"},{"id":"a.001.001.001.001","root":"a","parent":"a.001.001.001"},{"id":"a.001.001.001.002","root":"a","parent":"a.001.001.001"},{"id":"a.001.001.001.003","root":"a","parent":"a.001.001.001"},{"id":"a.001.001.001.004","root":"a","parent":"a.001.001.001"},{"id":"a.001.001.002","root":"a","parent":"a.001.001"},{"id":"a.001.001.002.001","root":"a","parent":"a.001.001.002"},{"id":"a.001.001.002.002","root":"a","parent":"a.001.001.002"},{"id":"a.001.001.002.003","root":"a","parent":"a.001.001.002"},{"id":"a.001.001.002.004","root":"a","parent":"a.001.001.002"},{"id":"a.001.001.003","root":"a","parent":"a.001.001"},{"id":"a.001.001.003.001","root":"a","parent":"a.001.001.003"},{"id":"a.001.001.003.002","root":"a","parent":"a.001.001.003"},{"id":"a.001.001.003.003","root":"a","parent":"a.001.001.003"},{"id":"a.001.001.003.004","root":"a","parent":"a.001.001.003"},{"id":"a.001.002","root":"a","parent":"a.001"},{"id":"a.001.002.001","root":"a","parent":"a.001.002"},{"id":"a.001.002.002","root":"a","parent":"a.001.002"},{"id":"a.001.002.003","root":"a","parent":"a.001.002"},{"id":"a.001.003","root":"a","parent":"a.001"},{"id":"a.001.003.001","root":"a","parent":"a.001.003"},{"id":"a.001.003.002","root":"a","parent":"a.001.003"},{"id":"a.001.004","root":"a","parent":"a.001"},{"id":"a.001.004.001","root":"a","parent":"a.001.004"},{"id":"a.001.004.002","root":"a","parent":"a.001.004"},{"id":"a.001.004.003","root":"a","parent":"a.001.004"},{"id":"a.001.004.004","root":"a","parent":"a.001.004"}]

const newStructure = {};
array.forEach(item => {
    newItem = {};
    _.set(newItem, item.id, {});
    _.merge(newStructure, newItem);
})

console.log(newStructure);

這將有這個輸出

{ a:
   { '001':
      { '001': [Object],
        '002': [Object],
        '003': [Object],
        '004': [Object] } } }

或 FE 版本：

 <script src="https:////cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script> <script> var array=[{"id":"a","root":"a","parent":" "},{"id":"a.001","root":"a","parent":"a"},{"id":"a.001.001","root":"a","parent":"a.001"},{"id":"a.001.001.001","root":"a","parent":"a.001.001"},{"id":"a.001.001.001.001","root":"a","parent":"a.001.001.001"},{"id":"a.001.001.001.002","root":"a","parent":"a.001.001.001"},{"id":"a.001.001.001.003","root":"a","parent":"a.001.001.001"},{"id":"a.001.001.001.004","root":"a","parent":"a.001.001.001"},{"id":"a.001.001.002","root":"a","parent":"a.001.001"},{"id":"a.001.001.002.001","root":"a","parent":"a.001.001.002"},{"id":"a.001.001.002.002","root":"a","parent":"a.001.001.002"},{"id":"a.001.001.002.003","root":"a","parent":"a.001.001.002"},{"id":"a.001.001.002.004","root":"a","parent":"a.001.001.002"},{"id":"a.001.001.003","root":"a","parent":"a.001.001"},{"id":"a.001.001.003.001","root":"a","parent":"a.001.001.003"},{"id":"a.001.001.003.002","root":"a","parent":"a.001.001.003"},{"id":"a.001.001.003.003","root":"a","parent":"a.001.001.003"},{"id":"a.001.001.003.004","root":"a","parent":"a.001.001.003"},{"id":"a.001.002","root":"a","parent":"a.001"},{"id":"a.001.002.001","root":"a","parent":"a.001.002"},{"id":"a.001.002.002","root":"a","parent":"a.001.002"},{"id":"a.001.002.003","root":"a","parent":"a.001.002"},{"id":"a.001.003","root":"a","parent":"a.001"},{"id":"a.001.003.001","root":"a","parent":"a.001.003"},{"id":"a.001.003.002","root":"a","parent":"a.001.003"},{"id":"a.001.004","root":"a","parent":"a.001"},{"id":"a.001.004.001","root":"a","parent":"a.001.004"},{"id":"a.001.004.002","root":"a","parent":"a.001.004"},{"id":"a.001.004.003","root":"a","parent":"a.001.004"},{"id":"a.001.004.004","root":"a","parent":"a.001.004"}] const newStructure = {}; array.forEach(item => { newItem = {}; _.set(newItem, item.id, {}); _.merge(newStructure, newItem); }) console.log(newStructure); </script>

（控制台日志僅記錄到一定深度，不會花費太多資源或陷入某種循環問題，但是您擁有完整的結構）要查看完整的結構，您可以添加這個

const util = require('util')
console.log(util.inspect(newStructure, {showHidden: false, depth: null}))

然后你會得到這個：

{ a:
   { '001':
      { '001':
         { '001': { '001': {}, '002': {}, '003': {}, '004': {} },
           '002': { '001': {}, '002': {}, '003': {}, '004': {} },
           '003': { '001': {}, '002': {}, '003': {}, '004': {} } },
        '002': { '001': {}, '002': {}, '003': {} },
        '003': { '001': {}, '002': {} },
        '004': { '001': {}, '002': {}, '003': {}, '004': {} } } } }