從父菜單遞歸查找所有子級

Question

我有一個像這樣的JSON結構：

[
    {"menuId":"1001","depth":"1","parentId":"0"},
    {"menuId":"1002","depth":"1","parentId":"0"},
    {"menuId":"1003","depth":"2","parentId":"1001"},
    {"menuId":"1004","depth":"2","parentId":"1001"},
    {"menuId":"1005","depth":"3","parentId":"1003"}, 
    {"menuId":"1006","depth":"3","parentId":"1004"}, 
    {"menuId":"1007","depth":"4","parentId":"1006"}, 
    {"menuId":"1008","depth":"4","parentId":"1006"}, 
    {"menuId":"1009","depth":"5","parentId":"1008"}
]

因此，我需要一個（可能）遞歸函數，該函數將找到一個menuId的所有子級，甚至包括深層嵌套的子級。

假設我要findChildrens（'1004'） 。 這應該返回以下結果：

['1006', '1007', '1008', '1009']

因為每個菜單都可以參考1004 。 不需要特定的訂單。 深度可以不加限制地進行。

Answer 1

您可以通過檢查parentId並獲取結果集的menuId來采取迭代和遞歸的方法。 然后也添加新的子代。

 function getChildren(array, id) { return array.reduce((r, { menuId, parentId }) => { if (parentId === id) { r.push(menuId, ...getChildren(array, menuId)); } return r; }, []); } var data = [{ menuId: "1001", depth: "1", parentId: "0" }, { menuId: "1002", depth: "1", parentId: "0" }, { menuId: "1003", depth: "2", parentId: "1001" }, { menuId: "1004", depth: "2", parentId: "1001" }, { menuId: "1005", depth: "3", parentId: "1003" }, { menuId: "1006", depth: "3", parentId: "1004" }, { menuId: "1007", depth: "4", parentId: "1006" }, { menuId: "1008", depth: "4", parentId: "1006" }, { menuId: "1009", depth: "5", parentId: "1008" }], result = getChildren(data, '1004'); console.log(result); 

Answer 2

您可以像這樣使用普通的遞歸。

  var k = [{"menuId":"1001","depth":"1","parentId":"0"}, {"menuId":"1002","depth":"1","parentId":"0"}, {"menuId":"1003","depth":"2","parentId":"1001"}, {"menuId":"1004","depth":"2","parentId":"1001"}, {"menuId":"1005","depth":"3","parentId":"1003"}, {"menuId":"1006","depth":"3","parentId":"1004"}, {"menuId":"1007","depth":"4","parentId":"1006"}, {"menuId":"1008","depth":"4","parentId":"1006"}, {"menuId":"1009","depth":"5","parentId":"1008"}] var res = []; var findChildren = function(id){ k.forEach(obj => { if(obj.parentId === id){ res.push(obj.menuId); findChildren(obj.menuId) } }) } findChildren('1004'); console.log(res); 

Answer 3

Array.prototype.map和Array.prototype.filter簡單替代方法：

 const data = [{"menuId":"1001","depth":"1","parentId":"0"},{"menuId":"1002","depth":"1","parentId":"0"},{"menuId":"1003","depth":"2","parentId":"1001"},{"menuId":"1004","depth":"2","parentId":"1001"},{"menuId":"1005","depth":"3","parentId":"1003"}, {"menuId":"1006","depth":"3","parentId":"1004"}, {"menuId":"1007","depth":"4","parentId":"1006"}, {"menuId":"1008","depth":"4","parentId":"1006"}, {"menuId":"1009","depth":"5","parentId":"1008"}]; function findChildren(id) { const menuIds = data.filter(({parentId}) => parentId == id).map(({menuId}) => menuId); return menuIds.concat(...menuIds.map(findChildren)); } console.log(findChildren(1004)); 

Answer 4

您可以使用使用遞歸函數的filter()方法來查找子代。

ES6中的演示

 const findChildrens = (data, menuId, oputArr, callback) => { let filterArr = data.filter(({ parentId }) => parentId == menuId); if (filterArr.length) { //Concat array with filtered data oputArr = [...oputArr, ...filterArr.map(({ menuId }) => menuId)]; //Recursive call for again search next node data findChildrens(data, oputArr[oputArr.length - 1], oputArr, callback); } else { //If find callback(oputArr); } } const arr =[{"menuId":"1001","depth":"1","parentId":"0"},{"menuId":"1002","depth":"1","parentId":"0"},{"menuId":"1003","depth":"2","parentId":"1001"},{"menuId":"1004","depth":"2","parentId":"1001"},{"menuId":"1005","depth":"3","parentId":"1003"},{"menuId":"1006","depth":"3","parentId":"1004"},{"menuId":"1007","depth":"4","parentId":"1006"},{"menuId":"1008","depth":"4","parentId":"1006"},{"menuId":"1009","depth":"5","parentId":"1008"}]; //Call find children function for 1004 findChildrens(arr, '1004', [], (res) => { console.log('result for 1004',res); }); //Call find children function 1001 findChildrens(arr, '1001', [], (res) => { console.log('result for 1001',res); }); 

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

ES5中的演示

 var filterArr = []; function findChildrens(data, menuId, oputArr, callback) { filterArr = data.filter(function(o) { return o.parentId == menuId; }); if (filterArr.length) { //Concat array with filtered data oputArr = [].concat.apply(oputArr, filterArr.map(function(o) { return o.menuId; })); //Recursive call for again search next node data findChildrens(data, oputArr[oputArr.length - 1], oputArr, callback); } else { //If find callback(oputArr); } } var arr = [{"menuId":"1001","depth":"1","parentId":"0"},{"menuId":"1002","depth":"1","parentId":"0"},{"menuId":"1003","depth":"2","parentId":"1001"},{"menuId":"1004","depth":"2","parentId":"1001"},{"menuId":"1005","depth":"3","parentId":"1003"},{"menuId":"1006","depth":"3","parentId":"1004"},{"menuId":"1007","depth":"4","parentId":"1006"},{"menuId":"1008","depth":"4","parentId":"1006"},{"menuId":"1009","depth":"5","parentId":"1008"}]; //Call find children function for 1004 findChildrens(arr, '1004', [], function(res){ console.log('result for 1004', res); }); //Call find children function 1001 findChildrens(arr, '1001', [], (res) => { console.log('result for 1001', res); }); 

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