js多维数组变形方法

1、二维数组转换为多维数组类

class initTreeList {
  constructor(arr, pidName, initialPid, idName) {
    this.arr = arr;
    this.formatting = arr.filter((val, ind) => {
      if (val[pidName] == initialPid) {
        if (this.findChild(val[idName], pidName, idName).length > 0) {
          val.children = this.findChild(val[idName], pidName, idName);
        }
        return true;
      } else {
        return false;
      }
    });
    return this;
  }
  findChild(id, pidName, idName) {
    return this.arr.filter((val, ind) => {
      if (val[pidName] == id) {
        if (this.findChild(val[idName], pidName, idName).length > 0) {
          val.children = this.findChild(val[idName], pidName, idName);
        }
        return true;
      } else {
        return false;
      }
    });
  }
}

实例化使用这个类

let treeList = new initTreeList(this.dataArr, "pid", 0, "id");
console.log(treeList.formatting);

传参说明

参数	说明
arr	原始2维数组
pidName	父id字段
initialPid	第一级数据的父id
idName	id字段

返回值说明

返回值	说明
arr	原始2维数组
formatting	格式化后的多维数组

附带一组测试数据

      dataArr: [
        { id: 1, pid: 0 },
        { id: 2, pid: 0 },
        { id: 3, pid: 4 },
        { id: 4, pid: 0 },
        { id: 5, pid: 1 },
        { id: 6, pid: 4 },
        { id: 7, pid: 2 },
        { id: 8, pid: 2 },
        { id: 9, pid: 4 },
        { id: 10, pid: 4 },
        { id: 11, pid: 2 },
        { id: 12, pid: 1 },
        { id: 13, pid: 4 },
        { id: 14, pid: 3 },
        { id: 15, pid: 10 },
      ],

2、多维数组转换为二维数组类

class initList {
  constructor(arr, childrenName) {
    this.arr = arr;
    this.formatting = [];
    this.getChild(arr, childrenName);
  }
  getChild(arrChild, childrenName) {
    arrChild.forEach((val, ind) => {
      this.formatting.push(val);
      if (val[childrenName]) {
        this.getChild(val[childrenName], childrenName);
      }
    });
  }
}

实例化这个类

let data=new initList(this.options,'children')
console.log(data.formatting);

传参说明

参数	说明
arr	原始多维数组
childrenName	子集字段

返回值说明

返回值	说明
arr	原始多维数组
formatting	格式化后的二维数组

附带一组测试数据

	options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                  children: [
                    {
                      value: "layout",
                      label: "Layout 布局",
                      children: [
                        {
                          value: "layout",
                          label: "Layout 布局",
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],

3、多维数组过滤

class filterList {
  constructor(arr, childrenName, type) {
    this.arr = arr;
    this.formatting = arr.filter((val) => {
      if (val[childrenName]) {
        val[childrenName] = this.findChild(
          val[childrenName],
          childrenName,
          type
        );
      }
      return val[type];
    });
  }
  findChild(list, childrenName, type) {
    return list.filter((val) => {
      if (val[childrenName]) {
        val[childrenName] = this.findChild(
          val[childrenName],
          childrenName,
          type
        );
      }
      return val[type];
    });
  }
}

实例化这个类

let treeList = new filterList(this.list, "child", "type");
console.log(data.formatting);

传参说明

参数	说明
arr	原始多维数组
childrenName	子集字段
type	过滤表示字段（只接收Boolean类型）

返回值说明

返回值	说明
arr	原始多维数组
formatting	格式化后的二维数组

附带一组测试数据

	list: [
        {
          name: "1",
          type: true,
          child: [
            {
              name: "8",
              type: true,
              child: [
                { name: "12", type: true, child: [] },
                { name: "13", type: false, child: [] },
              ],
            },
            { name: "9", type: true, child: [] },
            {
              name: "10",
              type: false,
              child: [{ name: "14", type: true, child: [] }],
            },
            { name: "11", type: true, child: [] },
          ],
        },
        {
          name: "2",
          type: true,
          child: [
            { name: "15", type: true, child: [] },
            {
              name: "16",
              type: true,
              child: [{ name: "17", type: false, child: [] }],
            },
          ],
        },
        {
          name: "3",
          type: true,
          child: [{ name: "18", type: true, child: [] }],
        },
        { name: "4", type: false, child: [] },
        {
          name: "5",
          type: true,
          child: [
            {
              name: "19",
              type: true,
              child: [
                {
                  name: "20",
                  type: false,
                  child: [
                    { name: "21", type: true, child: [] },
                    {
                      name: "22",
                      type: true,
                      child: [{ name: "23", type: true, child: [] }],
                    },
                  ],
                },
              ],
            },
          ],
        },
        { name: "6", type: true, child: [] },
        {
          name: "7",
          type: false,
          child: [{ name: "24", type: true, child: [] }],
        },
      ]