依赖元素结构化数组的层次树

Question

我正在寻找一种有效的方法来从 JavaScript 中的以下数据结构构建树。每个条目的长度始终为 5，并且条目之间永远不存在任何间隙（即空值）。

var geographies = [
    [ 'Denmark', 'Midtjylland', null, null, null ],
    [ 'Denmark', 'Syddanmark', 'Langeland', null, null ],
    [ 'Denmark', 'Syddanmark', 'Ærø', null, null ],
    [ 'Japan', 'Okinawa', 'Izenajima', null, null ],
    [ 'Japan', 'Hokkaido', 'Rishiri', 'Rishiri-to', null ]
]

所需的输出应如下所示：

[{
    label: "Denmark",
    children: [{
            label: "Midtjylland",
        },
        {
            label: "Syddanmark",
            children: [{
                label: "Langeland"
            },
            {
                label: "Ærø"
            }]
        }
    ]
}, {
    label: "Japan",
    children: [{
        label: "Okinawa",
        children: [{
            label: "Izenajima"
        }]
    }, {
        label: "Hokkaido",
        children: [{
            label: "Rishiri",
            children: [{
                label: 'Rishiri-to'
            }]
        }]
    }]
}]

Answer 1

可以在每个子数组的第一个元素上对数组进行分组，如果分组数组不为空，则调用to_tree：

function to_tree(d){
   var c = {}
   for (var i of d){
       var k = i.shift();
       c[k] = k in c ? [...c[k], i] : [i]
   }
   return Object.keys(c).map(function(x){return {label:x, ...(c[x].filter(j => j.length).length ? {children:to_tree(c[x].filter(j => j.length))} : {})}})
}
var geographies = [[ 'Denmark', 'Midtjylland', null, null, null ], [ 'Denmark', 'Syddanmark', 'Langeland', null, null ], [ 'Denmark', 'Syddanmark', 'Ærø', null, null ], [ 'Japan', 'Okinawa', 'Izenajima', null, null ], [ 'Japan', 'Hokkaido', 'Rishiri', 'Rishiri-to', null ]]
var geographies1 = [[ 'Greece', null, null, null, null ], [ 'Greece', 'Ionian Islands', 'Lefkada', null, null ], [ 'Greece', 'Attica', 'Salamis', null, null ], [ 'Greece', 'Ionian Islands', 'Cephalonia', null, null ], [ 'Greece', 'Thessaly', 'Skiathos', null, null ], [ 'Greece', 'South Aegean', 'Kea', null, null ], [ 'Greece', 'Attica', 'Kythira', null, null ]]
var r = to_tree(geographies.map(x => x.filter(y => y != null)));
var r1 = to_tree(geographies1.map(x => x.filter(y => y != null)));
console.log(r)
console.log(r1)

输出：

[
  {
    "label": "Denmark",
    "children": [
      {
        "label": "Midtjylland"
      },
      {
        "label": "Syddanmark",
        "children": [
          {
            "label": "Langeland"
          },
          {
            "label": "Ærø"
          }
        ]
      }
    ]
  },
  {
    "label": "Japan",
    "children": [
      {
        "label": "Okinawa",
        "children": [
          {
            "label": "Izenajima"
          }
        ]
      },
      {
        "label": "Hokkaido",
        "children": [
          {
            "label": "Rishiri",
            "children": [
              {
                "label": "Rishiri-to"
              }
            ]
          }
        ]
      }
    ]
  }
]

[
  {
    "label": "Greece",
    "children": [
      {
        "label": "Ionian Islands",
        "children": [
          {
            "label": "Lefkada"
          },
          {
            "label": "Cephalonia"
          }
        ]
      },
      {
        "label": "Attica",
        "children": [
          {
            "label": "Salamis"
          },
          {
            "label": "Kythira"
          }
        ]
      },
      {
        "label": "Thessaly",
        "children": [
          {
            "label": "Skiathos"
          }
        ]
      },
      {
        "label": "South Aegean",
        "children": [
          {
            "label": "Kea"
          }
        ]
      }
    ]
  }
]

Answer 2

此版本进行双重转换，首先以这种形式递归嵌套您的数据：

{
    "Denmark": {
        "Midtjylland": {},
        "Syddanmark": {
            "Langeland": {},
            "Ærø": {}
        }
    },
    "Japan": {
        "Okinawa": {
            "Izenajima": {}
        },
        "Hokkaido": {
            "Rishiri": {
                "Rishiri-to": {}
            }
        }
    }
}

然后递归地将其转换为您请求的输出。

没有根本原因不能一次性完成。但我经常发现需要类似中间格式的东西，因此有一些工具可以进行这种转换。从那里开始，最终的转换非常简单。

// utility functions
const setPath = ([p, ...ps]) => (v) => (o) =>
  p == undefined ? v : Object .assign (
    Array .isArray (o) || Number .isInteger (p) ? [] : {},
    {...o, [p]: setPath (ps) (v) ((o || {}) [p])}
  )

const nest = (xs) =>
  xs .reduce ((o, p) => setPath (p .filter (Boolean)) ({}) (o), {})


// helper function
const toObjectTree = (o) =>
  Object .entries (o) .map (([name, kids]) => ({
    label: name,
    ...(Object .keys (kids) .length ? {children: toObjectTree (kids)} : {})
  }))


// main function
const convert = (xs) => 
  toObjectTree (nest (xs))


// sample data
const geographies1 = [['Denmark', 'Midtjylland', null, null, null], ['Denmark', 'Syddanmark', 'Langeland', null, null], ['Denmark', 'Syddanmark', 'Ærø', null, null], ['Japan', 'Okinawa', 'Izenajima', null, null], ['Japan', 'Hokkaido', 'Rishiri', 'Rishiri-to', null]]
const geographies2 = [[ 'Greece', null, null, null, null ], [ 'Greece', 'Ionian Islands', 'Lefkada', null, null ], [ 'Greece', 'Attica', 'Salamis', null, null ], [ 'Greece', 'Ionian Islands', 'Cephalonia', null, null ], [ 'Greece', 'Thessaly', 'Skiathos', null, null ], [ 'Greece', 'South Aegean', 'Kea', null, null ], [ 'Greece', 'Attica', 'Kythira', null, null ]]
const geographies3 = [[ 'Denmark', 'Syddanmark', 'Langeland', null, null ], [ 'Denmark', 'Syddanmark', null, null, null ], [ 'Denmark', 'Syddanmark', 'Ærø', null, null ], [ 'Japan', 'Okinawa', 'Izenajima', null, null ], [ 'Japan', 'Hokkaido', 'Rishiri', 'Rishiri-to', null ]]


// demo
console .log (convert (geographies1))
console .log (convert (geographies2))
console .log (convert (geographies3))

.as-console-wrapper {max-height: 100% !important; top: 0}

我们从实用函数 setPath 开始，您可以在我的一些 other answers 中找到更详细的描述。不过，简而言之，它使用字符串和/或整数数组沿所提供对象（的副本）中的嵌套路径设置值。

然后 nest 从这样的路径数组构建一个对象，叶子节点是空对象。

我们编写了一个辅助函数 toObjectTree 以递归地将其转换为您的 label/children 结构。

最后是主函数convert，组合toObjectTree和nest进行完整的转换。

请注意，这里不需要用nulls 填充的固定长度数组。它通过简单地过滤掉任何空值来与它们一起工作。 （filter (Boolean) 很简单，但如果这些路径可能是错误的——可能是空字符串——那么我们必须用filter (x => x!= null) 或类似的东西替换它。）虽然这使它比你的请求更通用，但它应该仍然适用于您的数据。

---

对我来说，这是一种非常强大的数据转换方式：采取多个步骤，每一步都将前一个步骤转换为朝着最终目标前进的有用中间格式，然后通过这一系列更简单的转换简单地传输数据。