一维数组和多维数组的转换

一维数组和多维数组的转换

• 原链接：https://blog.csdn.net/qq_42451776/article/details/118944631

一维数组转多维数组

  // idsysarea 表示父级元素
  const arr = [
    {
      id: 110000, // 省市县id,
      idsysarea: 100000, // 上级id
      mergername: "北京",
      name: "北京", // 省市县名称"
    },
    {
      id: 110100,
      idsysarea: 110000,
      mergername: "北京,北京市",
      name: "北京市",
    },
    {
      id: 110101,
      idsysarea: 110100,
      mergername: "北京,北京市,东城区",
      name: "东城区",
    },
    {
      id: 110102,
      idsysarea: 110100,
      mergername: "北京,北京市,西城区",
      name: "西城区",
    },
    {
      id: 110105,
      idsysarea: 110100,
      mergername: "北京,北京市,朝阳区",
      name: "朝阳区",
    },
    {
      id: 120000,
      idsysarea: 100000,
      mergername: "天津",
      name: "天津",
    },
    {
      id: 120100,
      idsysarea: 120000,
      mergername: "天津,天津市",
      name: "天津市",
    },
    {
      id: 120101,
      idsysarea: 120100,
      mergername: "天津,天津市,和平区",
      name: "和平区",
    },
    {
      id: 120102,
      idsysarea: 120100,
      mergername: "天津,天津市,河东区",
      name: "河东区",
    },
    {
      id: 120103,
      idsysarea: 120100,
      mergername: "天津,天津市,河西区",
      name: "河西区",
    },
  ];
  function arrToTree(data) {
    const result = [];
    const obj = {};
    // 第一次类似浅拷贝赋值 两次浅拷贝导致data和obj相互影响
    data.forEach(item => {
      obj[item.id] = item;
    });
    data.forEach(item => {
      // 这儿需要注意item的父级是obj[item.idsysarea]
      // 第二次类似浅拷贝赋值
      const parent = obj[item.idsysarea];
      if (!parent) {
        // 找出父级
        result.push(obj[item.id]); // 直接item也可以
        return;
      }
      // 表示这个项存在父级
      // 即使原来的父级还没创建，由于浅拷贝data和obj上的数据还是会受到影响
      (parent.children || (parent.children = [])).push(item);
    });
    return result;
  }
  console.log(arrToTree(arr));

多维数组转一维

  const arr = [
    {
      id: 110000,
      idsysarea: 100000,
      mergername: "北京",
      name: "北京",
      children: [
        {
          id: 110100,
          idsysarea: 110000,
          mergername: "北京,北京市",
          name: "北京市",
          children: [
            {
              children: [],
              id: 110101,
              idsysarea: 110100,
              mergername: "北京,北京市,东城区",
              name: "东城区",
            },
            {
              children: [],
              id: 110102,
              idsysarea: 110100,
              mergername: "北京,北京市,西城区",
              name: "西城区",
            },
            {
              children: [],
              id: 110105,
              idsysarea: 110100,
              mergername: "北京,北京市,朝阳区",
              name: "朝阳区",
            },
          ],
        },
      ],
    },
    {
      id: 120000,
      idsysarea: 100000,
      mergername: "天津",
      name: "天津",
      children: [
        {
          id: 120100,
          idsysarea: 120000,
          mergername: "天津,天津市",
          name: "天津市",
          children: [
            {
              children: [],
              id: 120101,
              idsysarea: 120100,
              mergername: "天津,天津市,和平区",
              name: "和平区",
            },
            {
              children: [],
              id: 120102,
              idsysarea: 120100,
              mergername: "天津,天津市,河东区",
              name: "河东区",
            },
            {
              children: [],
              id: 120103,
              idsysarea: 120100,
              mergername: "天津,天津市,河西区",
              name: "河西区",
            },
          ],
        },
      ],
    },
  ];
  function deepArr(data) {
    if (!Array.isArray(data)) {
      return data;
    }
    const newArr = [];
    data.forEach(item => {
      if (!item.children) {
        return newArr.push(item);
      }
      const obj = JSON.parse(JSON.stringify(item));
      delete obj.children;
      newArr.push(obj);
      newArr.push(...deepArr(item.children));
    });
    return newArr;
  }
  console.log(deepArr(arr));

• 方法 2

    function changeArr(data) {
      let result = [];
      function getChildrens(item) {
        let arr = [];
        if (item.children && item.children.length) {
          arr = arr.concat(item.children);
          item.children.forEach(el => {
            arr = arr.concat(getChildrens(el));
          });
        }
        return arr;
      }
  
      data.forEach(item => {
        result.push(item);
        result = result.concat(getChildrens(item));
      });
      return result;
    }
    console.log(changeArr(arr));