js每个循环为对象或数组添加一个深度

Question

我有这个网页数组的网址，现在我需要制作一个层次结构。

所以从这个：

   allPages = [
       { "url": "/polygon/color/red.html", "name": "Red" }, 
       { "url": "/polygon/color/blue.html", "name": "Blue" }, 
       { "url": "/polygon/shape/tri.html", "name": "Triangle" }, 
       { "url": "/weight/heavy.html", "name": "Heavy Item" }
   ];

对此：

siteMap = [
    polygon:
        color:
            [{url:"red.html", name:"Red"}],
            [{url:"blue.html", name:"Blue"}],
        shape:
            [{url:"tri.html", name:"Triangle"}],
    weight: 
        [{url:"heavy.html", name:"Heavy Item"}],
];

最终结构可以是对象或数组。但我只能使用JS，而不是jQuery或php。

编辑：将输入数据更改为对象数组。抱歉让这更难。

Answer 1

小提琴：https://jsfiddle.net/ss92kw4a/2/

几个步骤：

首先我们将字符串拆分为数组：

for(i in all){
    all[i] = all[i].substring(1).split("/");     
}

接下来我们进行递归插入：

function insert(o, a){
    if(a.length == 0){return; }
    if(!o[a[0]]){
        o[a[0]] = {};
    }
    insert(o[a[0]], a.slice(1));
}

我们开始这样的递归：

ans = {};

all.forEach(function(entry){
    insert(ans, entry);
});

全部完成。结果树现在位于ans对象中：

console.log(ans);

更新：此代码使最后一级成为数组：https://jsfiddle.net/ss92kw4a/3/

Answer 2

您可以使用以下内容：

＆＃xA;＆＃xA;

  var allPages = [＆＃xA; “/polygon/color/red.html",
 “/polygon/color/green.html",
 “/polygon/color/blue.html",
 “/polygon/shape/tri.html",
 “/polygon/shape/rect.html",
 “/weight/heavy.html",
 “/weight/light.html"
];
var siteMap = {};＆＃xA; for（var i in allPages）{＆＃xA; var fragments = allPages [i] .match（/ [^ \ / + + / g）;＆＃xA; if（!! pieces）{＆＃xA; var currentMember = siteMap;＆＃xA; for（var j in fragments）{＆＃xA; fragment = fragments [j];＆＃xA; if（！currentMember.hasOwnProperty（fragment））{＆＃xA; currentMember [fragment] = {};＆＃xA; }＆＃XA; currentMember = currentMember [fragment];＆＃xA; }＆＃XA; }＆＃xA;}＆＃xA;  

＆＃xA;＆＃xA;

可能会得到增强，特别是在结尾的叶子是对象的事实上，＆＃xA;但是它有效

＆＃XA;