<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js樹結構列表轉化</title> </head> <body> <script> let tree = [ { id: '1', title: '節點1', children: [ { id: '1-1', title: '節點1-1' }, { id: '1-2', title: '節點1-2' } ] }, { id: '2', title: '節點2', children: [ { id: '2-1', title: '節點2-1' } ] } ] // 廣度優先 function treeForeach1(tree, func) { let node, list = [...tree] while (node = list.shift()) { // node = undefined node = list.shift() 刪除第一個 node賦值成功 func(node) node.children && list.push(...node.children) // 在最後追加數組 } } treeForeach1(tree, node => { console.log(node.title) }) /** * 節點1 * 節點2 * 節點1-1 * 節點1-2 * 節點2-1 */ // 先序遍歷 遞歸 function treeForeach2(tree, func) { tree.forEach(data => { func(data) data.children && treeForeach2(data.children, func) // 遍歷子樹 遞歸的條件 data.children存在 }) } treeForeach2(tree, node => { console.log(node.title) }) /** * 節點1 * 節點1-1 * 節點1-2 * 節點2 * 節點2-1 */ // 后序遍歷 遞歸 function treeForeach3(tree, func) { tree.forEach(data => { data.children && treeForeach3(data.children, func) // 遍歷子樹 遞歸的條件 data.children存在 func(data) }) } treeForeach3(tree, node => { console.log(node.title) }) /** * 節點1-1 * 節點1-2 * 節點1 * 節點2-1 * 節點2 */ // 深度優先遍歷 循環 function treeForeach4(tree, func) { let node, list = [...tree] while (node = list.shift()) { func(node) node.children && list.unshift(...node.children) } } treeForeach4(tree, node => { console.log(node.title) }) /** * 節點1 * 節點1-1 * 節點1-2 * 節點2 * 節點2-1 */ // 深度后序遍歷 循環 function treeForeach4(tree, func) { let node, list = [...tree], i = 0 while (node = list[i]) { let childCount = node.children ? node.children.length : 0 if (!childCount || node.children[childCount - 1] === list[i - 1]) { func(node) i++ } else { list.splice(i, 0, ...node.children) } } } treeForeach4(tree, node => { console.log(node.title) }) /** * 節點1-1 * 節點1-2 * 節點1 * 節點2-1 * 節點2 */ // <--------------------------------===========================-----------------------------> let list = [ { id: '1', title: '節點1', parentId: '', }, { id: '1-1', title: '節點1-1', parentId: '1' }, { id: '1-2', title: '節點1-2', parentId: '1' }, { id: '2', title: '節點2', parentId: '' }, { id: '2-1', title: '節點2-1', parentId: '2' } ] function listToTree1(list) { let funb = (map, node) => (map[node.id] = node, node.children = [], map) let info = list.reduce(funb, {}) return list.filter(node => { info[node.parentId] && info[node.parentId].children.push(node) return !node.parentId }) } let list2 = listToTree1(list); console.log(list2); /** * (2) [{…}, {…}] */ // 樹結構==》列表結構 // 遞歸實現 function treeToList1(tree, result = [], level = 0) { tree.forEach(node => { result.push(node) node.level = level + 1 node.children && treeToList1(node.children, result, level + 1) }) return result } let list3 = treeToList1(list2); console.log(list3) /** * [{…}, {…}, {…}, {…}, {…}] */ // 循環實現 function treeToList2(tree) { let node, result = tree.map(node => (node.level = 1, node)) for (let i = 0; i < result.length; i++) { if (!result[i].children) continue let list = result[i].children.map(node => (node.level = result[i].level + 1, node)) result.splice(i + 1, 0, ...list) } return result } let list4 = treeToList2(list2); console.log(list4); /** * [{…}, {…}, {…}, {…}, {…}] */ </script> </body> </html>
參考鏈接：https://mp.weixin.qq.com/s/2fYDzu1Qz6CPBBUOQlTX6A