JavaScript实现商品规格的组合匹配

做商城后台的时候有一个添加商品功能，需要填写商品的规格名和规格值，类似于下图

产品要求可以添加多组，每组的规格值可以有多个。

后台传过来的数据格式如下

let params1 = [
  { name: '颜色', spec: ['黑', '白'] },
  { name: '尺寸', spec: ['s码', 'm码'] }
]

经过程序处理后转换为以下格式。

以下介绍一下自己实现代码的思路

第一步：将规格名处理为一个数组

  /**
   * @将name值转换格式为 ['颜色','尺寸',]
   * */
  let keys=[]
  function keyConvertArr() {
    params1.forEach(item => {
      keys.push(item.name)
    })
  }

第二步：将规格值处理为数组嵌套数组结构

    /**
     * @将spec值转换格式为['黑', '白',['s码', 'm码']]
     * */
    function valueConvertArr() {
        let arr1;
        //判断是否只有一组规格
        if (params1.length !== 1) {
            for (let j = params1.length - 1, i = j; i >= 0; i--) {
                if (!arr1) {
                    params1[i - 1].spec.push(params1[i].spec)
                    arr1 = params1[i - 1].spec
                    if (i <= 1) break
                    i = i - 2
                }
                params1[i].spec.push(arr1)
                arr1 = params1[i].spec
            }
        } else {
            arr1 = params1[0].spec
        }
        //调用deepClone函数将处理好的数组传入
        deepClone(arr1)
    }

第三步：deepClone函数内的逻辑处理

    let obj = {}//结果对象
    let arr = []//结果数组
    let num = 0//判断是在第几层，用作keys的index
    function deepClone(data) {
        for (let i = 0; i < data.length; i++) {
            /**
             * 因为循环到数组的最后一项还是数组的话，已经通过递归传入，所以这里要做的是num--，并退出当前循环。
             * 两级结构此判断没有，三级结构后有用
             * 类似：['黑', '白', ['s码', 'm码',['不锈钢','塑料']]
             */
            if (data[i] instanceof Array) {
                num--
                return
            }
            obj[keys[num]] = data[i]
            if (data[data.length - 1] instanceof Array) {
                num++
                deepClone(data[data.length - 1])
            } else {
                let obj1 = JSON.parse(JSON.stringify(obj))
                arr.push(obj1)
            }
            if (i === data.length - 1) {
                num--
            }
        }
    }