基于JS实现的笛卡尔乘积之商品发布

前端技术 2023/09/02 JavaScript

没给大家介绍正文之前先给大家补充点知识：

js笛卡尔积算法

根据给的对象或者数组生成笛卡尔积

//笛卡儿积组合
function descartes(list)
{
//parent上一级索引;count指针计数
var point = {};
var result = [];
var pIndex = null;
var tempCount = 0;
var temp = [];
//根据参数列生成指针对象
for(var index in list)
{
if(typeof list[index] == \'object\')
{
point[index] = {\'parent\':pIndex,\'count\':0}
pIndex = index;
}
}
//单维度数据结构直接返回
if(pIndex == null)
{
return list;
}
//动态生成笛卡尔积
while(true)
{
for(var index in list)
{
tempCount = point[index][\'count\'];
temp.push(list[index][tempCount]);
}
//压入结果数组
result.push(temp);
temp = [];
//检查指针最大值问题
while(true)
{
if(point[index][\'count\']+1 >= list[index].length)
{
point[index][\'count\'] = 0;
pIndex = point[index][\'parent\'];
if(pIndex == null)
{
return result;
}
//赋值parent进行再次检查
index = pIndex;
}
else
{
point[index][\'count\']++;
break;
}
}
}
}

好了，关于js笛卡尔积算法只是给下文做个铺垫，不多说了，言归正传。

一、需求描述

电商网站的商品发布功能，类似京东的商品详细页，如下图，这样的可选择功能，在后台是如何生成的呢，其实你看到的一个iphone6在发布时并不只是发布一个商品，而是很多个，因为每一个选择出来的iphone6价格是不一样的，那么发布商品时这些可选择项又是从一堆属性和属性值中挑选出来的，问题来了，发布时挑选的属性个数是不一样的，属性值也是不一样的，那么生成的商品个数是根据属性和属性值组合出来的。

二、直接上代码

<script>
/**
* 商品属性类型
* 一个属性个数是不确定的
*/
var Spec = function(specName,specItems){
this.specName = specName; //属性名称
this.specItems = specItems;//数值值，是个数组，数组个数不确定
}
var result = [];//组合成产品集
/**
* 发布一款商品选择的一个属性，这是一个规格数组，数组个数不确定
* 根据这个选择的属性组合成不同的产品
*/
var selectSpec = [{specName:\'容量\',specItems:[\'16G\',\'64G\',\'128G\']},
{specName:\'颜色\',specItems:[\'土豪金\',\'银色\',\'黑色\',\'pink\']},
{specName:\'网络\',specItems:[\'联通\',\'移动\',\'电信\']}];
function combine(index, current){
if (index < selectSpec.length - 1){
var specItem = selectSpec[index];
var keya = specItem.specName;
var items = specItem.specItems;
if(items.length==0){
run( index + 1, current);
}
for (var i = 0; i < items.length; i++){
if(!items[i])continue;
var newMap = {};
newMap = $.extend(newMap,current);
newMap[keya] = items[i];
run( index + 1, newMap);
}
}else if (index == selectSpec.length - 1){
var specItem = selectSpec[index];
var keya = specItem.specName;
var items = specItem.specItems;
if(items.length==0){
result.push(current);
}
for (var i = 0; i < items.length; i++){
if(!items[i])continue;
var newMap = {};
newMap = $.extend(newMap,current);
newMap[keya] = items[i];
result.push(newMap);
}
}
}
combine(0, {});
console.info(result);
/**组合成产品集
* [Object { 容量=\"16G\", 颜色=\"土豪金\", 网络=\"联通\"}, 
* Object { 容量=\"16G\", 颜色=\"土豪金\", 网络=\"移动\"}, 
* Object { 容量=\"16G\", 颜色=\"土豪金\", 网络=\"电信\"},
* Object { 容量=\"16G\", 颜色=\"银色\", 网络=\"联通\"},
* Object { 容量=\"16G\", 颜色=\"银色\", 网络=\"移动\"}, 
* Object { 容量=\"16G\", 颜色=\"银色\", 网络=\"电信\"}, 
* Object { 容量=\"16G\", 颜色=\"黑色\", 网络=\"联通\"}, 
* Object { 容量=\"16G\", 颜色=\"黑色\", 网络=\"移动\"}, 
* Object { 容量=\"16G\", 颜色=\"黑色\", 网络=\"电信\"}, 
* Object { 容量=\"16G\", 颜色=\"pink\", 网络=\"联通\"}, 
* Object { 容量=\"16G\", 颜色=\"pink\", 网络=\"移动\"}, 
* Object { 容量=\"16G\", 颜色=\"pink\", 网络=\"电信\"}, 
* Object { 容量=\"64G\", 颜色=\"土豪金\", 网络=\"联通\"}, 
* Object { 容量=\"64G\", 颜色=\"土豪金\", 网络=\"移动\"}, 
* Object { 容量=\"64G\", 颜色=\"土豪金\", 网络=\"电信\"},
* Object { 容量=\"64G\", 颜色=\"银色\", 网络=\"联通\"}, 
* Object { 容量=\"64G\", 颜色=\"银色\", 网络=\"移动\"},
* Object { 容量=\"64G\", 颜色=\"银色\", 网络=\"电信\"}, 
* Object { 容量=\"64G\", 颜色=\"黑色\", 网络=\"联通\"}, 
* Object { 容量=\"64G\", 颜色=\"黑色\", 网络=\"移动\"}, 
* Object { 容量=\"64G\", 颜色=\"黑色\", 网络=\"电信\"}, 
* Object { 容量=\"64G\", 颜色=\"pink\", 网络=\"联通\"}, 
* Object { 容量=\"64G\", 颜色=\"pink\", 网络=\"移动\"}, 
* Object { 容量=\"64G\", 颜色=\"pink\", 网络=\"电信\"}, 
* Object { 容量=\"128G\", 颜色=\"土豪金\", 网络=\"联通\"}, 
* Object { 容量=\"128G\", 颜色=\"土豪金\", 网络=\"移动\"}, 
* Object { 容量=\"128G\", 颜色=\"土豪金\", 网络=\"电信\"}, 
* Object { 容量=\"128G\", 颜色=\"银色\", 网络=\"联通\"}, 
* Object { 容量=\"128G\", 颜色=\"银色\", 网络=\"移动\"}, 
* Object { 容量=\"128G\", 颜色=\"银色\", 网络=\"电信\"}, 
* Object { 容量=\"128G\", 颜色=\"黑色\", 网络=\"联通\"}, 
* Object { 容量=\"128G\", 颜色=\"黑色\", 网络=\"移动\"}, 
* Object { 容量=\"128G\", 颜色=\"黑色\", 网络=\"电信\"}, 
* Object { 容量=\"128G\", 颜色=\"pink\", 网络=\"联通\"}, 
* Object { 容量=\"128G\", 颜色=\"pink\", 网络=\"移动\"}, 
* Object { 容量=\"128G\", 颜色=\"pink\", 网络=\"电信\"}]
*/
</script>

以上所述是小编给大家介绍的基于JS实现的笛卡尔乘积之商品发布的想内容，希望对大家有所帮助，同时也非常感谢大家对phpstudy网站的支持，相信我们会做的更好！

本文地址：https://www.stayed.cn/item/5444

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案