js 动态笛卡尔积计算方式 - 多数组转换树形结构（多sku笛卡尔积计算方式）
发布时间：2019-12-02作者：laosun阅读（2401）
<!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;
}
}
}
2 +1
版权属于: 技术客
原文地址: https://www.sunjs.com/article/detail/7e65a21396ba449d9235acfce2084a8d.html
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
关键字： jquery 前端 源码 javascript
共 2 条评论