开发很多情况都会遇到级联数据的组合，比如省、市、县、区域数据，菜单数据，组织架构数据都是级联关系数据，这里假如一个接口给你一个集合（数组）数据给你，如何将集合（数组）高效转为级联关系数据，网上很多案例，大多数的代码思想都是一堆for循环加递归实现，庞大的代码体，一点也不直观，不优雅，而且维护很难，废话不多说，本人现将给出最简单的方法代码量不超过十行。
比如后台给出如下数据给你：
var data = [
{ Id : "a", Text : "组织a", isEnd : 0, key : '1' },
{ Id : "b", Text : "组织b", isEnd : 0, key : '2' , ParentId : 'a' },
{ Id : "c", Text : "组织c", isEnd : 0, key : '3' , ParentId : 'b' },
{ Id : "d", Text : "组织d", isEnd : 0, key : '4' , ParentId : 'c' },
{ Id : "e", Text : "组织e", isEnd : 0, key : '5' , ParentId : 'd' },
{ Id : "f", Text : "组织f", isEnd : 1, key : '6' , ParentId : 'e' },
{ Id : "g", Text : "组织g", isEnd : 0, key : '7' , ParentId : 'b' },
{ Id : "h", Text : "组织h", isEnd : 1, key : '8' , ParentId : 'c' },
{ Id : "i", Text : "组织i", isEnd : 0, key : '9' , ParentId : 'a' },
{ Id : "j", Text : "组织j", isEnd : 0, key : '10' , ParentId : 'i' },
{ Id : "k", Text : "组织k", isEnd : 1, key : '11' , ParentId : 'j' },
{ Id : "l", Text : "组织l", isEnd : 0, key : '12' , ParentId : 'i' },
{ Id : "m", Text : "组织m", isEnd : 1, key : '13' , ParentId : 'j' },
{ Id : "n", Text : "组织n", isEnd : 0, key : '14' , ParentId : 'a' },
{ Id : "o", Text : "组织o", isEnd : 0, key : '15' , ParentId : 'n' },
{ Id : "p", Text : "组织p", isEnd : 1, key : '16' , ParentId : 'o' },
{ Id : "q", Text : "组织q", isEnd : 0, key : '17' , ParentId : 'p' },
{ Id : "r", Text : "组织r", isEnd : 1, key : '18' , ParentId : 'o' },
{ Id : "s", Text : "组织s", isEnd : 0, key : '19' , ParentId : 'a' },
{ Id : "t", Text : "组织t", isEnd : 0, key : '20' , ParentId : 's' },
{ Id : "u", Text : "组织u", isEnd : 1, key : '21' , ParentId : 't' },
{ Id : "v", Text : "组织v", isEnd : 0, key : '22' , ParentId : 's' },
{ Id : "w", Text : "组织w", isEnd : 1, key : '23' , ParentId : 't' }
];
现在我们的组件需要这种数据：
[
{"Id":"a","Text":"a","key":1,"children":[
{"Id":"b","Text":"b","key":2,"ParentId":"a","children":[
{"Id":"c","Text":"c","key":3,"ParentId":"b","children":[
{"Id":"d","Text":"d","key":4,"ParentId":"c","children":[
{"Id":"e","Text":"e","key":5,"ParentId":"d","children":[
{"Id":"f","Text":"f","key":6,"ParentId":"e"}
]}
]},
{"Id":"h","Text":"h","key":8,"ParentId":"c"}
]},
{"Id":"g","Text":"g","key":7,"ParentId":"b"}
]},
{"Id":"i","Text":"i","key":9,"ParentId":"a","children":[
{"Id":"j","Text":"j","key":10,"ParentId":"i","children":[
{"Id":"k","Text":"k","key":11,"ParentId":"j"},
{"Id":"m","Text":"m","key":13,"ParentId":"j"}
]},
{"Id":"l","Text":"l","key":12,"ParentId":"i"}
]},
{"Id":"n","Text":"n","key":14,"ParentId":"a","children":[
{"Id":"o","Text":"o","key":15,"ParentId":"n","children":[
{"Id":"p","Text":"p","key":16,"ParentId":"o","children":[
{"Id":"q","Text":"q","key":17,"ParentId":"p"}
]},
{"Id":"r","Text":"r","key":18,"ParentId":"o"}
]}
]},
{"Id":"s","Text":"s","key":19,"ParentId":"a","children":[
{"Id":"t","Text":"t","key":20,"ParentId":"s","children":[
{"Id":"u","Text":"u","key":21,"ParentId":"t"},
{"Id":"w","Text":"w","key":23,"ParentId":"t"}
]},
{"Id":"v","Text":"v","key":22,"ParentId":"s"}
]}
]}
]
好了，接下来直接上干货：
//ES 5 语法, 9行代码。。。
var data = required("./data");
var render = function(it) {
var children = data.filter(item => item.ParentId === it.Id).map(render);
if(children.length) {
it.children = children;
}
return { Id : it.Id, Text : it.Text, key: it.key, ParentId : it.ParentId };
}
console.log(JSON.stringify(data.filter(it => !it.ParentId).map(render)));
//ES 6 语法 9行代码。。。
let { data } = require("./data");
let render = it => {
let children = data.filter(item => item.ParentId === it.Id).map(render);
if(children.length) {
it.children = children;
}
return { Id, Text, key, ParentId} = it;
}
console.log(JSON.stringify(data.filter(it => !it.ParentId).map(render)));
你还相信网上一大堆不动脑，只会无限for循环加递归的例子吗? 这个例子可以让你的程序更高效、更优雅，关键你的工作量会让你两个小时变成5分钟！
