点分隔字符串数组中的树

Question

我有一个点分隔的字符串数组，如下所示data = [    'Europe.UK.London.TrafalgarSq',     'Europe.UK.London.HydePark',     'Europe.UK.London.OxfordStreet',     'Europe.UK.London.City.Bank',     'Europe.France.Paris',     'Europe.France.Bordeaux'},]我想构建以下嵌套对象树。万一这很重要，这适用于将要使用Tree Layers Controlleaflet的地图var tree = {    label: 'Places',    selectAllCheckbox: 'Un/select all',    children: [        {            label: 'Europe',            selectAllCheckbox: true,            children: [                {                    label: 'Europe.UK',                    selectAllCheckbox: true,                    children: [                        {                            label: 'Europe.UK.London',                            selectAllCheckbox: true,                            children: [                                {label: 'Europe.UK.London.TrafalgarSq'},                                {label: 'Europe.UK.London.HydePark'},                                {label: 'Europe.UK.London.OxfordStreet'},                                {                                    label: 'Europe.UK.London.City',                                    selectAllCheckbox: true,                                    children: [                                        {label: 'Europe.UK.London.City.Bank'},                                    ]                                },                            ]                        },                        {                            label: 'Europe.France',                            selectAllCheckbox: true,                            children: [                                {label: 'Europe.France.Paris'},                                {label: 'Europe.France.Bordeaux'},                            ]                        },                    ]                }            ]        }    ]};请问这棵树怎么做？

Answer 1

您可以使用mapper具有部分路径（或label）的对象作为键，并使用对树中对象的引用作为其值。split路径.和reduce数组tree作为initialValue。如果path尚不存在，请将其添加到映射器和树中。在每次迭代中返回嵌套对象。

const data = ["Europe.UK.London.TrafalgarSq","Europe.UK.London.HydePark","Europe.UK.London.OxfordStreet","Europe.UK.London.City.Bank","Europe.France.Paris","Europe.France.Bordeaux"],

    mapper = {},

    tree = {

      label: 'Places',

      selectAllCheckbox: 'Un/select all',

      children: []

    }

for (const str of data) {

  let splits = str.split('.'),

      label = '';

  splits.reduce((parent, place) => {

    if (label)

      label += `.${place}`

    else

      label = place

    if (!mapper[label]) {

      const o = { label };

      mapper[label] = o;

      parent.selectAllCheckbox = true

      parent.children = parent.children || [];

      parent.children.push(o)

    }

    return mapper[label];

  }, tree)

}

console.log(tree)

Answer 2

您可以使用减少嵌套对象的迭代方法。

var data = ['Europe.UK.London.TrafalgarSq', 'Europe.UK.London.HydePark', 'Europe.UK.London.OxfordStreet', 'Europe.UK.London.City.Bank', 'Europe.France.Paris', 'Europe.France.Bordeaux'],

    children = data.reduce((r, s) => {

        s.split('.').reduce((q, _, i, a) => {

            q.selectAllCheckbox = true;

            var label = a.slice(0, i + 1).join('.'),

                temp = (q.children = q.children || []).find(o => o.label === label);

            if (!temp) q.children.push(temp = { label });

            return temp;

        }, r);

        return r;

    }, { children: [] }).children,

    tree = { label: 'Places', selectAllCheckbox: 'Un/select all', children };

console.log(tree);

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