很久沒有發文了，今天發點不一樣的，如下：

<script>// 一維數據：let arrData=[{ r_id: 1, role_name: '開發商', n_id: 1, txt: '主頁' },{ r_id: 1, role_name: '開發商', n_id: 2, txt: '項目' },{ r_id: 1, role_name: '開發商', n_id: 3, txt: '報警' },{ r_id: 1, role_name: '開發商', n_id: 4, txt: '客戶' },{ r_id: 1, role_name: '開發商', n_id: 5, txt: '設備' },{ r_id: 1, role_name: '開發商', n_id: 6, txt: '設置' },{ r_id: 1, role_name: '開發商', n_id: 7, txt: '集中監控' },{ r_id: 1, role_name: '開發商', n_id: 9, txt: '用戶列表' },{ r_id: 1, role_name: '開發商', n_id: 10, txt: '系統設置' },{ r_id: 1, role_name: '開發商', n_id: 11, txt: '報警設置' },{ r_id: 1, role_name: '開發商', n_id: 12, txt: '我的項目' },{ r_id: 1, role_name: '開發商', n_id: 13, txt: '增加項目' },{ r_id: 1, role_name: '開發商', n_id: 14, txt: '權限' },{ r_id: 1, role_name: '開發商', n_id: 15, txt: '角色列表' },{ r_id: 1, role_name: '開發商', n_id: 16, txt: '權限列表' },{ r_id: 1, role_name: '開發商', n_id: 17, txt: '報警日志' },{ r_id: 1, role_name: '開發商', n_id: 18, txt: '報警管理' },{ r_id: 1, role_name: '開發商', n_id: 19, txt: '設備列表' },{ r_id: 2, role_name: '廠商', n_id: 1, txt: '主頁' },{ r_id: 2, role_name: '廠商', n_id: 2, txt: '項目' },{ r_id: 3, role_name: '用戶', n_id: 2, txt: '項目' },{ r_id: 3, role_name: '用戶', n_id: 1, txt: '主頁' },{ r_id: 4, role_name: '普通員工', n_id: 3, txt: '報警' },{ r_id: 4, role_name: '普通員工', n_id: 5, txt: '設備' }]// 進行轉換：let newArr = [...new Set(arrData.map(item => item.role_name))] // 找出arrData數據中的role_name的多個數據：{role_name:'值'},通過set去重，之后在解構成數組：[]let list = []newArr.forEach(names => {list.push(arrData.filter(item => item.role_name === names))})let mlist = []list.forEach((e,i)=>{let arr = []e.forEach(its=>{arr.push({n_id:its.n_id,txt:its.txt})})mlist.push({r_id:e[0].r_id,role_name:newArr[i],children: arr})})console.log(mlist)//轉換后具有父子級關系的數據console.log(mlist)打印的結果如下：[{r_id: 1,role_name: '開發商',children: [{ n_id: 1, txt: '主頁' },{ n_id: 2, txt: '項目' },{ n_id: 3, txt: '報警' },{ n_id: 4, txt: '客戶' },{ n_id: 5, txt: '設備' },{ n_id: 6, txt: '設置' },{ n_id: 7, txt: '集中監控' },{ n_id: 9, txt: '用戶列表' },{ n_id: 10, txt: '系統設置' },{ n_id: 11, txt: '報警設置' },{ n_id: 12, txt: '我的項目' },{ n_id: 13, txt: '增加項目' },{ n_id: 14, txt: '權限' },{ n_id: 15, txt: '角色列表' },{ n_id: 16, txt: '權限列表' },{ n_id: 17, txt: '報警日志' },{ n_id: 18, txt: '報警管理' },{ n_id: 19, txt: '設備列表' }]},{r_id: 2,role_name: '廠商',children: [ { n_id: 1, txt: '主頁' }, { n_id: 2, txt: '項目' } ]},{r_id: 3,role_name: '用戶',children: [ { n_id: 2, txt: '項目' }, { n_id: 1, txt: '主頁' } ]},{r_id: 4,role_name: '普通員工',children: [ { n_id: 3, txt: '報警' }, { n_id: 5, txt: '設備' } ]}]// 對let newArr = [...new Set(arrData.map(item => item.role_name))]的詳細解說如下：let obj = arrData.map(item => item.role_name) console.log(obj) //['開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '開發商', '廠商', '廠商', '用戶', '用戶', '普通員工', '普通員工']let res = new Set(obj)console.log(res) //{'開發商', '廠商', '用戶', '普通員工'}let arrs = [...res]console.log(arrs) //['開發商', '廠商', '用戶', '普通員工']// 注意：上面只是簡單的實現具有層級關系的數據處理，實際工作中常常出現三級層級關系的數據，就權限功能而言，每個主菜單（一級菜單）和負極菜單（二級菜單或更多級菜單）之間應該是嵌套的父子級關系，而并非是上面的同級非嵌套關系，優化后的代碼如下：let arrdatas=[{r_id: 1,role_name: '開發商',n_id: 1,txt: '主頁',pid: null},{r_id: 1,role_name: '開發商',n_id: 2,txt: '項目',pid: null},{r_id: 1,role_name: '開發商',n_id: 3,txt: '報警',pid: null},{r_id: 1,role_name: '開發商',n_id: 4,txt: '客戶',pid: null},{r_id: 1,role_name: '開發商',n_id: 5,txt: '設備',pid: null},{r_id: 1,role_name: '開發商',n_id: 6,txt: '設置',pid: null},{r_id: 1,role_name: '開發商',n_id: 7,txt: '集中監控',pid: 1},{r_id: 1,role_name: '開發商',n_id: 9,txt: '用戶列表',pid: 4},{r_id: 1,role_name: '開發商',n_id: 10,txt: '系統設置',pid: 6},{r_id: 1,role_name: '開發商',n_id: 11,txt: '報警設置',pid: 6},{r_id: 1,role_name: '開發商',n_id: 12,txt: '我的項目',pid: 2},{r_id: 1,role_name: '開發商',n_id: 13,txt: '增加項目',pid: 2},{r_id: 1,role_name: '開發商',n_id: 14,txt: '權限',pid: null},{r_id: 1,role_name: '開發商',n_id: 15,txt: '角色列表',pid: 14},{r_id: 1,role_name: '開發商',n_id: 16,txt: '權限列表',pid: 14},{r_id: 1,role_name: '開發商',n_id: 17,txt: '報警日志',pid: 3},{r_id: 1,role_name: '開發商',n_id: 18,txt: '報警管理',pid: 3},{r_id: 1,role_name: '開發商',n_id: 19,txt: '設備列表',pid: 5},{r_id: 2,role_name: '廠商',n_id: 1,txt: '主頁',pid: null},{r_id: 2,role_name: '廠商',n_id: 2,txt: '項目',pid: null},{r_id: 3,role_name: '用戶',n_id: 2,txt: '項目',pid: null},{r_id: 3,role_name: '用戶',n_id: 1,txt: '主頁',pid: null},{r_id: 4,role_name: '普通員工',n_id: 3,txt: '報警',pid: null},{r_id: 4,role_name: '普通員工',n_id: 5,txt: '設備',pid: null}]let newarr = [...new Set(arrdatas.map(item => item.role_name))]let lists = []newarr.forEach(names => {lists.push(result.filter(item => item.role_name === names))})let mlists = []list.forEach((e,i)=>{let arr = []e.forEach(its=>{arr.push({n_id:its.n_id,txt:its.txt,pid:its.pid})})// 對沒有層級關系的菜單數組進arr行處理的方法：function tree(data,pid,child){let parents = data.filter(p => p[pid] === null),children = data.filter(c => c[pid] !== null);function dataToTree(parents, children){parents.map(p => {children.map((c, i) => {if(c[pid] === p.n_id){let _children = JSON.parse(JSON.stringify(children));_children.splice(i, 1);dataToTree([c], _children);if(p[child]){p[child].push(c);}else{p[child] = [c];};};});});};dataToTree(parents, children);return parents;};let arrTree = tree(arr,'pid','childs');//調用方法最終實現具有嵌套關系的層級菜單數組mlists.push({r_id:e[0].r_id,role_name:newArr[i],childrens: arrTree})})// 最終實現的三級菜單效果如下圖：</script>

三級權限菜單數據如下圖：

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的js中将有层级关系的一维数据转换为父子级关系的二维数据、菜单权限三级层级数据实现（树形结构数据）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。