获取树结构所有路径？

Question

有一下树形数据：

const data= [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
     
    ],
  }
]

期望输出所有叶子节点的路径：

["Level one 1 > Level two 1-1 > Level three 1-1-1", "Level one 2 > Level two 2-1 > Level three 2-1-1"]

Answer 1

其实就是树的先序遍历

function preOrder(list, result=[], labels=[]) {
  return list.reduce((res,v) => {
    labels.push(v.label);
    if(v.children && v.children.length) preOrder(v.children, res, labels);
    else res.push(labels.join(' > '))
    labels.pop();
    return res;
  }, result)
}

preOrder(data)

Answer 2

使用reduce大法加递归可以搞定~

data.reduce((acc, cur) => {
  function concat(obj) {
    if (obj.hasOwnProperty('children')) {
      return obj['label'] + ' > ' + concat(obj['children'][0]);
    } else {
      return obj['label'];
    }
  }

  acc.push(concat(cur));
  return acc;
}, []);

Answer 3

写了个更简短的：

let f = (n, p = []) => n?.flatMap(i => f(i.children, [...p, i.label])) ?? p.join(' > ');

结果

[
  "Level one 1 > Level two 1-1 > Level three 1-1-1",
  "Level one 1 > Level two 1-1 > Level three 1-1-2",
  "Level one 2 > Level two 2-1 > Level three 2-1-1"
]

使用代码

const data = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
          {
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
    ],
  }
];

console.log(f(data));

Answer 4

const data= [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
     
    ],
  }
]
let html = ''
function fn (arr) {
  arr.forEach((v, i) => {
    fn1(v)
 })
}
function fn1 (item) {
  html = html + item.label + '>'
  item.children && fn(item.children)
}
fn(data)
let arr = []
arr.push(html)
console.log(arr)

Answer 5

function treeForEach(data, arr = [], str = '') {

  for (let i = 0; i < data.length; i++) {
    let item = data[i]

    str = !str.length ? str + item.label : str + '>' + item.label

    if (item.children) {
      treeForEach(item.children, arr, str)
    } else {
      arr.push(str)
    }
    
    str = ''
  }
  return arr
}
treeForEach(data)