题目描述

将以下结构的数据转成数组：

const listTree = [
  {
    id: 1,
    name: '部门1',
    pid: 0,
    children: [
      {
        id: 2,
        name: '部门1-1',
        pid: 1,
        children: [
          {
            id: 4, 
            name: '部门1-1-1', 
            pid: 2,
            children: []
          }
        ]
      },
      {
        id: 3,
        name: '部门1-2',
        pid: 1,
        children: [
          {
            id: 5, 
            name: '部门1-2-1', 
            pid: 3,
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 6,
    name: '部门2',
    pid: 0,
    children: [
      {
        id: 7, 
        name: '部门2-1', 
        pid: 6,
        children: []
      }
    ]
  },
  {
    id: 8,
    name: '部门3',
    pid: 0,
    children: []
  }
]

转化之后的结果为：

const list = [
  {id: 1, name: '部门1', pid: 0},
  {id: 2, name: '部门1-1', pid: 1},
  {id: 3, name: '部门1-2', pid: 1},
  {id: 4, name: '部门1-1-1', pid: 2},
  {id: 5, name: '部门1-2-1', pid: 3},
  {id: 6, name: '部门2', pid: 0},
  {id: 7, name: '部门2-1', pid: 6},
  {id: 8, name: '部门3', pid: 0},
]

思路解析

深度遍历，可以通过递归或者队列方式

代码实现

1. 递归

function treeToArray(tree, result = []) {
  tree.forEach(item => {
    const {children, ...props} = item;
    result.push(props);
    children && treeToArray(children, result);
  });
  return result;
}

2. 通过队列方式

function treeToArrayByQueue(tree) {
  const queue = [...tree];
  const result = [];
  while (queue.length) {
    const {children, ...item} = queue.shift();
    if (children) {
      // 使用unshift优先加入，打印和递归形式一致
      queue.unshift(...children);
    }
    result.push(item);
  }
  return result;
}