javascript处理树形结构数据（级联选择器，省市县联动）

后端返回给我们数据：

const dataList = [
  {
    id: 1,
    pid: 0,
    name: '服装类',
  },
  {
    id: 2,
    pid: 0,
    name: '手机类',
  },
  {
    id: 3,
    pid: 0,
    name: '食品类',
  },
  {
    id: 4,
    pid: 1,
    name: '连衣裙',
  },
  {
    id: 5,
    pid: 2,
    name: '小米手机',
  },
  {
    id: 6,
    pid: 3,
    name: '北方食品',
  },
  {
    id: 7,
    pid: 4,
    name: '女士连衣裙',
  },
  {
    id: 8,
    pid: 6,
    name: '饺子',
  },
];

我们可以看到每一个数据都有自己的id和pid，其中pid指的是当前数据父级的id，所以通过pid我们可以讲上面的数据转换为树形结构数据。

/**
 * 我们要求数据处理完成后为当下格式
 */
const resultData = [
  {
    id: 1,
    pid: 0,
    name: '服装类',
    children: [
      {
        id: 4,
        pid: 1,
        name: '连衣裙',
        children: [
          {
            id: 7,
            pid: 4,
            name: '女士连衣裙',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    pid: 0,
    name: '手机类',
    children: [
      {
        id: 5,
        pid: 2,
        name: '小米手机',
      },
    ],
  },
  {
    id: 3,
    pid: 0,
    name: '食品类',
    children: [
      {
        id: 6,
        pid: 3,
        name: '北方食品',
        children: [
          {
            id: 8,
            pid: 6,
            name: '饺子',
          },
        ],
      },
    ],
  },
];

这样我们在使用 element-ui，或者是ant-design都可以渲染出来数据。
数据处理函数：

/**
 * 封装formatTreeData
 */
function formatTreeData(arr) {
  // 删除所有的children，以防止多次调用
  arr.forEach(item => {
    delete item.children;
  });

  // 构建map
  let map = {};
  arr.forEach(c => {
    map[c.id] = c;
  });

  let treeData = [];

  arr.forEach(c => {
    const mapItem = map[c.pid];
    if (mapItem) {
      // mapItem 存在，说明当前数据不是顶层数据
      (mapItem.children || (mapItem.children = [])).push(c);
    } else {
      // mapItem 不存在，说明当前数据是顶层数据
      treeData.push(c);
    }
  });

  return treeData;
}

console.log(formatTreeData(dataList));