Question

大家。我有一个地图对象数组，这些地图对象简单地具有url: "string", css: "string", childCSS: []属性。我想在其childCSS属性中执行此对象。我应该使用什么？此递归可以有无限多个孩子。对此有什么看法？我有这个数组，例如：

[
    {
        url: "http://example.com/1.css",
        css: "... *css for 1.css*",
        childCSS: [
            "http://example.com/1-1.css",
            "http://example.com/1-2.css"
        ]
    },
    {
        url: "http://example.com/1-1.css",
        css: "... *css for 1-1.css*",
        childCSS: [
            "http://example.com/1-1-1.css"
        ]
    },
    {
        url: "http://example.com/1-2.css",
        css: "... *css for 1-2.css*",
        childCSS: []
    },
    {
        url: "http://example.com/1-1-1.css",
        css: "... *css for 1-1-1.css*",
        childCSS: [
            "http://example.com/1-1-1-1.css"
        ]
    },
    {
        url: "http://example.com/1-1-1-1.css",
        css: "... *css for 1-1-1-1.css*",
        childCSS: []
    }
    .
    .
    .
],

我想做这个数组，像这样：孩子们，在他们的孩子里：

[
    {
        url: "http://example.com/1.css",
        css: "... *css for 1.css*",
        childCSS: [
            {
                url: "http://example.com/1-1.css",
                css: "... *css for 1-1.css*",
                childCSS: [
                    {
                        url: "http://example.com/1-1-1.css",
                        css: "... *css for 1-1-1.css*",
                        childCSS: [
                            {
                                url: "http://example.com/1-1-1-1.css",
                                css: "... *css for 1-1-1-1.css*",
                                childCSS: []
                            }
                        ]
                    }
                ]
            },
            {
                url: "http://example.com/1-2.css",
                css: "... *css for 1-2.css*",
                childCSS: []
            }
        ]
    },
    .
    .
    .
]

感谢一切。祝你有美好的一天！

Answer 1

这里不需要递归，可以通过对数据进行两次迭代来做到这一点：

let data = [
    {
        url: "http://example.com/1.css",
        css: "... *css for 1.css*",
        childCSS: [
            "http://example.com/1-1.css",
            "http://example.com/1-2.css"
        ]
    },
    {
        url: "http://example.com/1-1.css",
        css: "... *css for 1-1.css*",
        childCSS: [
            "http://example.com/1-1-1.css"
        ]
    },
    {
        url: "http://example.com/1-2.css",
        css: "... *css for 1-2.css*",
        childCSS: []
    },
    {
        url: "http://example.com/1-1-1.css",
        css: "... *css for 1-1-1.css*",
        childCSS: [
            "http://example.com/1-1-1-1.css"
        ]
    },
    {
        url: "http://example.com/1-1-1-1.css",
        css: "... *css for 1-1-1-1.css*",
        childCSS: []
    }
];

let dataByUrl = {},
  urlToItem = url => dataByUrl[url];

// index all items by their url
data.forEach(item => {
  dataByUrl[item.url] = item;
});

// now let's update childCSS with the respoective items
data.forEach(item => {
  item.childCSS = item.childCSS.map(urlToItem);
});

console.log(data);

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

假设您的数组在其父级之前不包含任何子项（通过imo。此类数据几乎总是这样），您可以一口气做到这一点。

let data = [
    {
        url: "http://example.com/1.css",
        css: "... *css for 1.css*",
        childCSS: [
            "http://example.com/1-1.css",
            "http://example.com/1-2.css"
        ]
    },
    {
        url: "http://example.com/1-1.css",
        css: "... *css for 1-1.css*",
        childCSS: [
            "http://example.com/1-1-1.css"
        ]
    },
    {
        url: "http://example.com/1-2.css",
        css: "... *css for 1-2.css*",
        childCSS: []
    },
    {
        url: "http://example.com/1-1-1.css",
        css: "... *css for 1-1-1.css*",
        childCSS: [
            "http://example.com/1-1-1-1.css"
        ]
    },
    {
        url: "http://example.com/1-1-1-1.css",
        css: "... *css for 1-1-1-1.css*",
        childCSS: []
    }
];

let dataByUrl = {},
  urlToItem = url => dataByUrl[url];

for (let i = data.length; i--;) {
  let item = data[i];
  dataByUrl[item.url] = item;
  item.childCSS = item.childCSS.map(urlToItem);
}

console.log(data);

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

Answer 2

您可以尝试

a.forEach(cssObject=> {
    cssObject.childCSS=_.flatten(cssObject.childCSS.map(reference => 
         a.filter(child => child.url===reference)));
});
console.log(JSON.stringify(a, null, 4));

其中a是您的CSS数组

它返回一个看起来像

的结构

[
    {
        "url": "http://example.com/1.css",
        "css": "... *css for 1.css*",
        "childCSS": [
            {
                "url": "http://example.com/1-1.css",
                "css": "... *css for 1-1.css*",
                "childCSS": [
                    {
                        "url": "http://example.com/1-1-1.css",
                        "css": "... *css for 1-1-1.css*",
                        "childCSS": [
                            {
                                "url": "http://example.com/1-1-1-1.css",
                                "css": "... *css for 1-1-1-1.css*",
                                "childCSS": []
                            }
                        ]
                    }
                ]
            },
            {
                "url": "http://example.com/1-2.css",
                "css": "... *css for 1-2.css*",
                "childCSS": []
            }
        ]
    },
    {
        "url": "http://example.com/1-1.css",
        "css": "... *css for 1-1.css*",
        "childCSS": [
            {
                "url": "http://example.com/1-1-1.css",
                "css": "... *css for 1-1-1.css*",
                "childCSS": [
                    {
                        "url": "http://example.com/1-1-1-1.css",
                        "css": "... *css for 1-1-1-1.css*",
                        "childCSS": []
                    }
                ]
            }
        ]
    },
    {
        "url": "http://example.com/1-2.css",
        "css": "... *css for 1-2.css*",
        "childCSS": []
    },
    {
        "url": "http://example.com/1-1-1.css",
        "css": "... *css for 1-1-1.css*",
        "childCSS": [
            {
                "url": "http://example.com/1-1-1-1.css",
                "css": "... *css for 1-1-1-1.css*",
                "childCSS": []
            }
        ]
    },
    {
        "url": "http://example.com/1-1-1-1.css",
        "css": "... *css for 1-1-1-1.css*",
        "childCSS": []
    }
]

遍历一组地图对象

2 个答案: