js数组拆分与拼接问题

Question

下面这样一个数组，怎么拆分拼接之后为这样
{指南/设计原则/一致 },
{指南/设计原则/可控 },
{指南/导航/侧向导航},
{指南/导航/顶部导航},
{组件/Basic/Layout 布局},
{组件/Basic/Button 按钮},

options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'zujian',
        label: '组件',
        children: [{
          value: 'basic',
          label: 'Basic',
          children: [{
            value: 'layout',
            label: 'Layout 布局'
          }, {
            value: 'button',
            label: 'Button 按钮'
          }]
        }]
      }]

Answer 1

const getLabels = (list, preLabel = '') => {
  const newOptions = [];
  list.forEach(({label, children = []}) => {
    const supLabel = (preLabel ? `${preLabel}/` : '') + label;
    if (children.length) {
      newOptions.push(...getLabels(children, supLabel))
    } else {
      newOptions.push({label: supLabel})
    }
  })
  return newOptions
}
getLabels(options)

Answer 2

就是一个递归遍历的过程，关于递归遍历，可以阅读：使用递归遍历并转换树形数据（以 TypeScript 为例） - SegmentFault 思否

function getPathes(nodes, getLabel) {
    return nodes.flatMap(node => {
        const label = getLabel(node);
        return node.children?.length
            ? getPathes(node.children, getLabel).map(subPath => `${label}/${subPath}`)
            : label;
    });
}

const r = getPathes(options, node => node.label);
console.log(r);