数组扁平化

<script>
  /* 数组扁平化 */
  const listData = [
    { id: "p1", title: "广东" },
    { id: "p2", title: "四川" },
    { id: "p2-1", pid: "p2", title: "成都" },
    { id: "p1-1", pid: "p1", title: "广州" },
    { id: "p2-2", pid: "p2", title: "德阳" },
    { id: "p2-3", pid: "p2", title: "绵阳" },
    { id: "p2-1-1", pid: "p2-1", title: "高新区" },
  ];

  /* 数组扁平化的函数  flatten是数组扁平化的意思 */
  function flatten(list) {
    //1.定义最终结果的集合
    let result = [];
    //2.定义一个映射对象来保存如下格式的数据
    let map = {};
    /* 
       {
          "p1": { id: "p1", title: "广东" },
          "p2": { id: "p2", title: "四川" },
          "p1-1":  { id: "p1-1", pid: "p1", title: "广州" },
          "p2-1":  { id: "p2-1", pid: "p2", title: "成都" },
          "p2-2":  { id: "p2-2", pid: "p2", title: "德阳" },
          "p2-3":  { id: "p2-3", pid: "p2", title: "绵阳" },
          "p2-1-1":  { id: "p2-1-1", pid: "p2-1", title: "高新区" },
        } 
        */
    for (const item of list) {
      map[item.id] = item;
    }

    console.log("map", map);

    //3.再次循环list
    for (const item of list) {
      if (!item.pid) {
        //顶层数据，广东和四川，将这两条数据直接追加到result中
        result.push(item);
      } else {
        //有pid的
        // 1.使用pid作为key到map对象中找到对应的数据
        // 2.让它身上追加儿子

        //map[item.pid];就是他儿子的数据

        //通过map[item.pid]找到上面map数组中的对应的下标进行添加children
        const current = map[item.pid];

        console.log(current);
        //判断并创建childern
        if (current.children) {
          current.children.push(item);
        } else {
          //创建chilrden的数组
          current.children = [item];
        }
      }
    }

    return result;
  }

  const arr = flatten(listData);
  console.log(arr);
</script>

image.png