<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>無限分類</title> </head> <body> <script> window.onload = function () { console.log(deeploop(0)); }; /** * 根據 id 查詢到數據並將數據存儲到數組 返回 */ var findById = function (id) { let child = []; arr.forEach((value) => { if (value.pid == id) { child.push(value); } }); return child; }; /** * 遞歸查詢 到數據並將數據存儲到數組 返回 */ var deeploop = function (id) { let dataArr = findById(id); if (dataArr.length <= 0) { return null; } else { dataArr.forEach((value) => { if (deeploop(value.id) != null) { value["children"] = deeploop(value.id); } }); } return dataArr; }; /** * 每一個分類都有記錄它的父級id (pid 意為 parent id) * 當為頂級分類時，它的父級id為0 */ var arr = [ { id: 1, name: "計算機專業", pid: 0 }, { id: 2, name: "軟件專業", pid: 1 }, { id: 3, name: "前端", pid: 2 }, { id: 33, name: "html", pid: 3 }, { id: 34, name: "css", pid: 3 }, { id: 4, name: "后端", pid: 2 }, { id: 41, name: "php", pid: 4 }, { id: 42, name: "java", pid: 4 }, { id: 5, name: "動漫專業", pid: 0 }, { id: 51, name: "2d動漫", pid: 5 }, { id: 511, name: "插畫設計", pid: 51 }, { id: 52, name: "3d動漫", pid: 5 }, ]; </script> </body> </html>