JS面试题【算法】 - 数组转树

• 需求：实现数组转树

• 现有一个数据

    const data = [
  {
    id: 1,
    title: '研发部',
    pid: null,
  },
  {
    id: 2,
    title: '开发部',
    pid: null,
  },
  {
    id: 3,
    title: '市场部',
    pid: null,
  },
  {
    id: 4,
    title: '销售部',
    pid: null,
  },
  {
    id: 5,
    title: '前端研发部',
    pid: 1,
  },
  {
    id: 6,
    title: '后端研发部',
    pid: 1,
  },
  {
    id: 7,
    title: '算法研发部',
    pid: 1,
  },
  {
    id: 8,
    title: '前端开发部',
    pid: 2,
  },
  {
    id: 9,
    title: '后端开发部',
    pid: 2,
  },
  {
    id: 10,
    title: '算法开发部',
    pid: 2,
  },
  ];
  

• 实现 arrayToTree 函数，将数组转为树

  [
      {
        id: 1,
        pid: null,
        title: '研发部',
        children: [
          { id: 5, title: '前端研发部', pid: 1 },
          { id: 6, title: '后端研发部', pid: 1 },
          { id: 7, title: '算法研发部', pid: 1 },
        ],
      },
      {
        id: 2,
        pid: null,
        title: '开发部',
        children: [
          { id: 8, title: '前端开发部', pid: 2 },
          { id: 9, title: '后端开发部', pid: 2 },
          { id: 10, title: '算法开发部', pid: 2 },
        ],
      },
      { id: 3, title: '市场部', pid: null },
      { id: 4, title: '销售部', pid: null },
  ];
  

• 实现方法1

  function arrayToTree1(arr) {
      const result = [];
      arr.forEach((item) => {
        if (item.pid === null) {
          result.push(item);
        } else {
          let index = result.findIndex((items) => items.id === item.pid);
          if (index >= 0) {
            result[index].children
              ? result[index].children.push(item)
              : (result[index].children = [item]);
          }
        }
      });
      return result;
  }
  

• 实现方法2

  function arrayToTree2(array, pid = null) {
      return array.reduce((prev, cur) => {
        if (cur.pid === pid) {
          // 接受每次的返回值
          let index = arrayToTree2(array, cur.id);
          // 判断返回值的长度 如果 返回值有长度 则为数据添加 children 属性
          if (index.length) {
            cur.children = index;
          }
          prev.push(cur);
        }
        return prev;
      }, []);
  }