js 动态笛卡尔积计算方式 - 多数组转换树形结构(多sku笛卡尔积计算方式)

发布时间:2019-12-02作者:laosun阅读(643)

js
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=">
    <meta http-equiv="X-UA-Compatible" content="">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <title></title>
    </head>
    <body>
        <center><h2>生成示例展示</h2></center>
        <table width="100%" cellpadding="1" cellspacing="1" border="1">
          <thead>
            <tr>
              <th width="15%">型号</th>
              <th width="15%">颜色</th>
              <th width="15%">大小</th>
              <th>价格</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td rowspan="4">iphone4</td>
              <td rowspan="2">黑色</td>
              <td rowspan="1">16G</td>
              <td>
                <div>
                  <span class="input-group-addon input-group-addon-sku">
                    <span>¥</span></span>
                  <input type="text" class="form-control prices" name="" id="" value="" /></div>
              </td>
            </tr>
            <tr>
              <td rowspan="1">32G</td>
              <td>
                <div>
                  <span class="input-group-addon input-group-addon-sku">
                    <span>¥</span></span>
                  <input type="text" class="form-control prices" name="" id="" value="" /></div>
              </td>
            </tr>
            <tr>
              <td rowspan="2">银色</td>
              <td rowspan="1">16G</td>
              <td>
                <div>
                  <span class="input-group-addon input-group-addon-sku">
                    <span>¥</span></span>
                  <input type="text" class="form-control prices" name="" id="" value="" /></div>
              </td>
            </tr>
            <tr>
              <td rowspan="1">32G</td>
              <td>
                <div>
                  <span class="input-group-addon input-group-addon-sku">
                    <span>¥</span></span>
                  <input type="text" class="form-control prices" name="" id="" value="" /></div>
              </td>
            </tr>
            <tr>
              <td rowspan="4">iphone5</td>
              <td rowspan="2">黑色</td>
              <td rowspan="1">16G</td>
              <td>
                <div>
                  <span class="input-group-addon input-group-addon-sku">
                    <span>¥</span></span>
                  <input type="text" class="form-control prices" name="" id="" value="" /></div>
              </td>
            </tr>
            <tr>
              <td rowspan="1">32G</td>
              <td>
                <div>
                  <span class="input-group-addon input-group-addon-sku">
                    <span>¥</span></span>
                  <input type="text" class="form-control prices" name="" id="" value="" /></div>
              </td>
            </tr>
            <tr>
              <td rowspan="2">银色</td>
              <td rowspan="1">16G</td>
              <td>
                <div>
                  <span class="input-group-addon input-group-addon-sku">
                    <span>¥</span></span>
                  <input type="text" class="form-control prices" name="" id="" value="" /></div>
              </td>
            </tr>
            <tr>
              <td rowspan="1">32G</td>
              <td>
                <div>
                  <span class="input-group-addon input-group-addon-sku">
                    <span>¥</span></span>
                  <input type="text" class="form-control prices" name="" id="" value="" /></div>
              </td>
            </tr>
            <tr>
              <td rowspan="4">iphone6</td>
              <td rowspan="2">黑色</td>
              <td rowspan="1">16G</td>
              <td>
                <div>
                  <span class="input-group-addon input-group-addon-sku">
                    <span>¥</span></span>
                  <input type="text" class="form-control prices" name="" id="" value="" /></div>
              </td>
            </tr>
            <tr>
              <td rowspan="1">32G</td>
              <td>
                <div>
                  <span class="input-group-addon input-group-addon-sku">
                    <span>¥</span></span>
                  <input type="text" class="form-control prices" name="" id="" value="" /></div>
              </td>
            </tr>
            <tr>
              <td rowspan="2">银色</td>
              <td rowspan="1">16G</td>
              <td>
                <div>
                  <span class="input-group-addon input-group-addon-sku">
                    <span>¥</span></span>
                  <input type="text" class="form-control prices" name="" id="" value="" /></div>
              </td>
            </tr>
            <tr>
              <td rowspan="1">32G</td>
              <td>
                <div>
                  <span class="input-group-addon input-group-addon-sku">
                    <span>¥</span></span>
                  <input type="text" class="form-control prices" name="" id="" value="" /></div>
              </td>
            </tr>
          </tbody>
        </table>
        <script>
        //生成数据实例
        var tmp = [
            {
                name:"iphone4",
                arr:[
                    {
                        name:"黑色",
                        arr:[
                            {
                                name:"16G",
                                arr:[]
                            },
                            {
                                name:"32G",
                                arr:[]
                            }
                        ]
                    },
                    {
                        name:"银色",
                        arr:[
                            {
                                name:"16G",
                                arr:[]
                            },
                            {
                                name:"32G",
                                arr:[]
                            }
                        ]
                    }
                ]
            },
            {
                name:"iphone5",
                arr:[
                    {
                        name:"黑色",
                        arr:[
                            {
                                name:"16G",
                                arr:[]
                            },
                            {
                                name:"32G",
                                arr:[]
                            }
                        ]
                    },
                    {
                        name:"银色",
                        arr:[
                            {
                                name:"16G",
                                arr:[]
                            },
                            {
                                name:"32G",
                                arr:[]
                            }
                        ]
                    }
                ]
            },
            {
                name:"iphone6",
                arr:[
                    {
                        name:"黑色",
                        arr:[
                            {
                                name:"16G",
                                arr:[]
                            },
                            {
                                name:"32G",
                                arr:[]
                            }
                        ]
                    },
                    {
                        name:"银色",
                        arr:[
                            {
                                name:"16G",
                                arr:[]
                            },
                            {
                                name:"32G",
                                arr:[]
                            }
                        ]
                    }
                ]
            }
        ];
    
        //动态笛卡尔积计算方式 - 转换树形结构
        //至于性能瓶颈是多少,请自行测试。
    
        var arr1 = ["iphone4", "iphone5", "iphone6"];
        var arr2 = ["黑色", "银色"];
        var arr3 = ["16G", "32G"];
    
        //将数组合并成一个数组
        var totalArr = [];
        totalArr.push(arr1);
        totalArr.push(arr2);
        totalArr.push(arr3);
    
        //转换后的结果集
        var mergeArr = [];
    
        //倒序循环(目前是为了简单,将第一次循环的结果集放入下一次循环的结果集中,也就是所谓的子数据放入父节点中)
        for(var i=totalArr.length-1;i>=0;i--){
            if(i-1>=0){
                //有父节点,需要将本次循环所得数组放入下一次循环中
                var nextArr = totalArr[i-1];//获取下一次循环的数组集合(就是arr2)
                var tmpArr = [];
                for(var j=0;j<nextArr.length;j++){//循环遍历arr2的每一项
                    var obj = [];
                    obj.name = nextArr[j];
                    if(mergeArr!=null && mergeArr.length>0){
                        //如果mergeArr不为空,表示之前已经遍历过一次,直接赋值到父节点下的每一项中即可
                        obj.child = mergeArr;
                    }else{
                        //如果是第一次遍历,需要对最外层的arr3进行拆除,拆分成多个数组的形式。
                        var firstArr = [];
                        for(var m=0;m<totalArr[i].length;m++){
                            var tmpObj = [];
                            tmpObj.name = totalArr[i][m];
                            tmpObj.child = [];
                            firstArr.push(tmpObj);
                        }
                        obj.child = firstArr;
                    }
                    tmpArr.push(obj);
                }
                mergeArr = tmpArr;
            }else{
                //无父节点的情况下,需要判断是否是第一次循环。
                //如果是第一次循环,证明只有一组数据,无父子节点
                if(totalArr.length-1==i){
                    for(var j=0;j<totalArr[i].length;j++){
                        var obj = [];
                        obj.name = totalArr[i][j];
                        obj.child = [];
                        mergeArr.push(obj);
                    }
                }else{
                    //非第一次循环,笛卡尔积计算完毕
                    break;
                }
            }
        }
        console.log(mergeArr);
        </script>
    </body>
    </html>


    其中数组转笛卡尔积的程序片段是以下这段代码:


    //动态笛卡尔积计算方式 - 转换树形结构
        //至于性能瓶颈是多少,请自行测试。
    
        var arr1 = ["iphone4", "iphone5", "iphone6"];
        var arr2 = ["黑色", "银色"];
        var arr3 = ["16G", "32G"];
    
        //将数组合并成一个数组
        var totalArr = [];
        totalArr.push(arr1);
        totalArr.push(arr2);
        totalArr.push(arr3);
    
        //转换后的结果集
        var mergeArr = [];
    
        //倒序循环(目前是为了简单,将第一次循环的结果集放入下一次循环的结果集中,也就是所谓的子数据放入父节点中)
        for(var i=totalArr.length-1;i>=0;i--){
            if(i-1>=0){
                //有父节点,需要将本次循环所得数组放入下一次循环中
                var nextArr = totalArr[i-1];//获取下一次循环的数组集合(就是arr2)
                var tmpArr = [];
                for(var j=0;j<nextArr.length;j++){//循环遍历arr2的每一项
                    var obj = [];
                    obj.name = nextArr[j];
                    if(mergeArr!=null && mergeArr.length>0){
                        //如果mergeArr不为空,表示之前已经遍历过一次,直接赋值到父节点下的每一项中即可
                        obj.child = mergeArr;
                    }else{
                        //如果是第一次遍历,需要对最外层的arr3进行拆除,拆分成多个数组的形式。
                        var firstArr = [];
                        for(var m=0;m<totalArr[i].length;m++){
                            var tmpObj = [];
                            tmpObj.name = totalArr[i][m];
                            tmpObj.child = [];
                            firstArr.push(tmpObj);
                        }
                        obj.child = firstArr;
                    }
                    tmpArr.push(obj);
                }
                mergeArr = tmpArr;
            }else{
                //无父节点的情况下,需要判断是否是第一次循环。
                //如果是第一次循环,证明只有一组数据,无父子节点
                if(totalArr.length-1==i){
                    for(var j=0;j<totalArr[i].length;j++){
                        var obj = [];
                        obj.name = totalArr[i][j];
                        obj.child = [];
                        mergeArr.push(obj);
                    }
                }else{
                    //非第一次循环,笛卡尔积计算完毕
                    break;
                }
            }
        }


1 +1

版权声明

 jquery  前端  源码  javascript

 请文明留言

2 条评论