点分隔字符串数组中的树

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; }