使用递归-实现二维矩阵数组

废话不多说，直接上代码：

 /* 函数递归  把[1,2] [3,4] [5,6] 得到 [1,3,5],[1,3,6],[1,4,5] ...
	arr : 需要递归的数组 [[1,2],[3,4],[5,6]]
	*/
    function diguiArrData(arr) {
      if (arr.length <= 1) return arr;
      let arr1 = arr[0]
      let arr2 = arr[1]
      let index = 1

      return assembleData(arr, arr1, arr2, index)

      function assembleData(arr, arr1, arr2, index) {
        if (!arr1.length) arr1 = ['']  //空数组
        if (!arr2.length) arr2 = ['']  //空数组
        let arr3 = []

        for (let i = 0; i < arr1.length; i++) {
          for (let j = 0; j < arr2.length; j++) {
            if (arr1[i].length > 1) {
              arr3.push(arr1[i].concat(arr2[j]))  //如果数组里面多于两个数据，合并两个数组
            } else {
              arr3.push([arr1[i], arr2[j]])  //
            }
          }
        }
        if (arr[index + 1]) { //传入的数据下一项，不为空，再执行一次
          return assembleData(arr, arr3, arr[index + 1], index + 1)
        } else {
          return arr3
        }
      };

    };
    let ttarr = [[1, 2], [3, 4], [5, 6], [7]]
    console.log(diguiArrData(ttarr))

实现自己的业务逻辑—效果图如下：
表格使用的ant-design的table组件

已知的数据格式：

var specData = [
      {
        specname: '尺码',
        id: 1,
        type: [
          {
            typename: '大码',
            key: 1,
          },
          {
            typename: '中码',
            key: 2,
          },
          {
            typename: '小码',
            key: 3,
          },
        ],
      },
      {
        specname: '颜色',
        id: 2,
        type: [
          {
            typename: '红色',
            key: 4,
          },
          {
            typename: '黄色',
            key: 5,
          },
          {
            typename: '绿色',
            key: 6,
          },
        ],
      },
      {
        specname: '份数',
        id: 3,
        type: [{
          typename: '中份',
          key: 7,
        },],
      },
      {
        specname: '甜度',
        id: 4,
        type: [{
          typename: '微甜',
          key: 8,
        },
        {
          typename: '不甜',
          key: 9,
        },],
      },
    ]

纵坐标：

const columns = specData.map(item => {
    const perColumns = {
      title: item.specname,
      dataIndex: `id${item.id}`,
      key: `id${item.id}`,
    }
    return perColumns
  })

横坐标数据：

	function rfdata(data) {
      if (data.type.length > 0) {
        let arr = []
        data.type.map(item => {
          let obj = {}
          obj[`id${data.id}`] = item.typename
          return arr.push(obj)
        });
        return arr
      }
    }
    function getTypeArr(specData) {
      const arr = []
      for (let i = 0, len = specData.length; i < len; i++) {
        if (rfdata(specData[i])) {
          arr.push(rfdata(specData[i]))
        }
      }
      return arr
    }
    console.log(getTypeArr(specData))
    let arr = getTypeArr(specData)

重构之后的arr数据：

最终形成所需要的数据格式：

	function refac(arr) {
      if (arr.length <= 1) return arr;
      let arr1 = arr[0]
      let arr2 = arr[1]
      let index = 1

      return assembleData(arr, arr1, arr2, index)

      function assembleData(arr, arr1, arr2, index) {
        let arr3 = []

        for (let i = 0; i < arr1.length; i++) {
          for (let j = 0; j < arr2.length; j++) {
            arr3.push(Object.assign({}, arr1[i], arr2[j]))
          }
        }
        if (arr[index + 1]) {
          return assembleData(arr, arr3, arr[index + 1], index + 1)
        } else {
          return arr3
        }
      }

    }

    console.log(refac(arr))

完成：

---

最后实现简单的封装：

//数据模型
const specTempData = {
      8: {
        spec_grade: "80901",
        spec_id: 8,
        spec_name: "尺码",
        spec_pid: 0,
        subclass: {
          10: { spec_id: 10, spec_name: "L", spec_grade: "80902", spec_pid: 8 },
          11: { spec_id: 11, spec_name: "M", spec_grade: "80902", spec_pid: 8 },
          12: { spec_id: 12, spec_name: "S", spec_grade: "80902", spec_pid: 8 },
        }
      },
      16: {
        spec_grade: "80901",
        spec_id: 16,
        spec_name: "绿色",
        spec_pid: 0,
        subclass: {
          17: { spec_id: 17, spec_name: "绿色", spec_grade: "80902", spec_pid: 16 },
          18: { spec_id: 18, spec_name: "黑色", spec_grade: "80902", spec_pid: 16 },
        }
      },
    }
//获取表格数据
   function getTableDataSource(data) {
      this.data = data
    }
    getTableDataSource.prototype.init = function () {
      const topCategory = this.getTypeArray(this.data)
      // console.log('topCategory', topCategory)
      const refacData = this.mergeSpec(topCategory)
      // console.log('mergeSpec', mergeSpec)
      const Final = this.getFinalData(refacData)
      // console.log('Final', Final)
      return Final
    }
    getTableDataSource.prototype.getSubclass = function (data) { //设置初级子分类
      const tempData = Object.values(data.subclass)
      data.subclass = tempData
      if (data.subclass.length > 0) {
        let rfdatarray = []
        data.subclass.map(item => {
          let obj = {}
          obj[`gs_specid${item.spec_id}`] = `${item.spec_id},`
          obj[`id${data.spec_id}`] = item.spec_name
          return rfdatarray.push(obj)
        });
        return rfdatarray
      }
    }
    getTableDataSource.prototype.getTypeArray = function (data) { //提取每一个子分类
      const tempSpec = Object.values(data)
      const arr = []
      for (let i = 0, len = tempSpec.length; i < len; i++) {
        if (this.getSubclass(tempSpec[i])) {
          arr.push(this.getSubclass(tempSpec[i]))
        }
      }
      return arr
    }
    getTableDataSource.prototype.mergeSpec = function (arr) { //所有分类合并
      if (arr.length < 1) return arr
      if (arr.length == 1) return arr[0];
      let arr1 = arr[0]
      let arr2 = arr[1]
      let index = 1
      return assembleData(arr, arr1, arr2, index)
      function assembleData(arr, arr1, arr2, index) {
        let arr3 = []
        for (let i = 0; i < arr1.length; i++) {
          for (let j = 0; j < arr2.length; j++) {
            arr3.push(Object.assign({}, arr1[i], arr2[j]))
          }
        }
        if (arr[index + 1]) {
          return assembleData(arr, arr3, arr[index + 1], index + 1)
        } else {
          return arr3
        }
      }
    }
    getTableDataSource.prototype.getFinalData = function (refacData) { //生成最终分类
      const finalData = [];
      refacData.map(item => {
        let gSpecid = '';
        Object.keys(item).map(v => {
          if (v.includes('gs_specid')) {
            const specid = v.replace('gs_specid', '')
            gSpecid += `${specid},`;
            delete item[v]
          }
        })
        const tempSpecid = { gs_specid: gSpecid.substr(0, gSpecid.length - 1) }
        finalData.push(Object.assign({}, tempSpecid, item, { gs_pic: null }, { gs_stock: null }, { gs_price: null }, { goods_id: "1" }))
      })
      return finalData
    }
//获取纵坐标数据
function getColumns(specData) {
      const tempData = Object.values(specData);
      const columns = tempData.map(item => {
        const perColumns = {
          title: item.spec_name,
          dataIndex: `id${item.spec_id}`,
          key: `id${item.spec_id}`,
        }
        return perColumns
      })
      return columns
    }

//最终结果
console.log(new getTableDataSource(specTempData).init())
console.log(getColumns(specTempData))