本文給大家介紹JS實(shí)現(xiàn)的笛卡爾乘積之商品發(fā)布的相關(guān)內(nèi)容，涉及到j(luò)s笛卡爾積算法的相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
沒(méi)給大家介紹正文之前先給大家補(bǔ)充點(diǎn)知識(shí)：
js笛卡爾積算法
根據(jù)給的對(duì)象或者數(shù)組生成笛卡爾積
//笛卡兒積組合
function descartes(list)
{
//parent上一級(jí)索引;count指針計(jì)數(shù)
var point = {};
var result = [];
var pIndex = null;
var tempCount = 0;
var temp = [];
//根據(jù)參數(shù)列生成指針對(duì)象
for(var index in list)
{
if(typeof list[index] == 'object')
{
point[index] = {'parent':pIndex,'count':0}
pIndex = index;
}
}
//單維度數(shù)據(jù)結(jié)構(gòu)直接返回
if(pIndex == null)
{
return list;
}
//動(dòng)態(tài)生成笛卡爾積
while(true)
{
for(var index in list)
{
tempCount = point[index]['count'];
temp.push(list[index][tempCount]);
}
//壓入結(jié)果數(shù)組
result.push(temp);
temp = [];
//檢查指針最大值問(wèn)題
while(true)
{
if(point[index]['count']+1 >= list[index].length)
{
point[index]['count'] = 0;
pIndex = point[index]['parent'];
if(pIndex == null)
{
return result;
}
//賦值parent進(jìn)行再次檢查
index = pIndex;
}
else
{
point[index]['count']++;
break;
}
}
}
}
好了，關(guān)于js笛卡爾積算法只是給下文做個(gè)鋪墊，不多說(shuō)了，言歸正傳。
一、需求描述
電商網(wǎng)站的商品發(fā)布功能，類似京東的商品詳細(xì)頁(yè)，如下圖，這樣的可選擇功能，在后臺(tái)是如何生成的呢，其實(shí)你看到的一個(gè)iphone6在發(fā)布時(shí)并不只是發(fā)布一個(gè)商品，而是很多個(gè)，因?yàn)槊恳粋€(gè)選擇出來(lái)的iphone6價(jià)格是不一樣的，那么發(fā)布商品時(shí)這些可選擇項(xiàng)又是從一堆屬性和屬性值中挑選出來(lái)的，問(wèn)題來(lái)了，發(fā)布時(shí)挑選的屬性個(gè)數(shù)是不一樣的，屬性值也是不一樣的，那么生成的商品個(gè)數(shù)是根據(jù)屬性和屬性值組合出來(lái)的。
二、直接上代碼
<script>
/**
* 商品屬性類型
* 一個(gè)屬性個(gè)數(shù)是不確定的
*/
var Spec = function(specName,specItems){
this.specName = specName; //屬性名稱
this.specItems = specItems;//數(shù)值值，是個(gè)數(shù)組，數(shù)組個(gè)數(shù)不確定
}
var result = [];//組合成產(chǎn)品集
/**
* 發(fā)布一款商品選擇的一個(gè)屬性，這是一個(gè)規(guī)格數(shù)組，數(shù)組個(gè)數(shù)不確定
* 根據(jù)這個(gè)選擇的屬性組合成不同的產(chǎn)品
*/
var selectSpec = [{specName:'容量',specItems:['16G','64G','128G']},
{specName:'顏色',specItems:['土豪金','銀色','黑色','pink']},
{specName:'網(wǎng)絡(luò)',specItems:['聯(lián)通','移動(dòng)','電信']}];
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);
/**組合成產(chǎn)品集
* [Object { 容量="16G", 顏色="土豪金", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="16G", 顏色="土豪金", 網(wǎng)絡(luò)="移動(dòng)"},
* Object { 容量="16G", 顏色="土豪金", 網(wǎng)絡(luò)="電信"},
* Object { 容量="16G", 顏色="銀色", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="16G", 顏色="銀色", 網(wǎng)絡(luò)="移動(dòng)"},
* Object { 容量="16G", 顏色="銀色", 網(wǎng)絡(luò)="電信"},
* Object { 容量="16G", 顏色="黑色", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="16G", 顏色="黑色", 網(wǎng)絡(luò)="移動(dòng)"},
* Object { 容量="16G", 顏色="黑色", 網(wǎng)絡(luò)="電信"},
* Object { 容量="16G", 顏色="pink", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="16G", 顏色="pink", 網(wǎng)絡(luò)="移動(dòng)"},
* Object { 容量="16G", 顏色="pink", 網(wǎng)絡(luò)="電信"},
* Object { 容量="64G", 顏色="土豪金", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="64G", 顏色="土豪金", 網(wǎng)絡(luò)="移動(dòng)"},
* Object { 容量="64G", 顏色="土豪金", 網(wǎng)絡(luò)="電信"},
* Object { 容量="64G", 顏色="銀色", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="64G", 顏色="銀色", 網(wǎng)絡(luò)="移動(dòng)"},
* Object { 容量="64G", 顏色="銀色", 網(wǎng)絡(luò)="電信"},
* Object { 容量="64G", 顏色="黑色", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="64G", 顏色="黑色", 網(wǎng)絡(luò)="移動(dòng)"},
* Object { 容量="64G", 顏色="黑色", 網(wǎng)絡(luò)="電信"},
* Object { 容量="64G", 顏色="pink", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="64G", 顏色="pink", 網(wǎng)絡(luò)="移動(dòng)"},
* Object { 容量="64G", 顏色="pink", 網(wǎng)絡(luò)="電信"},
* Object { 容量="128G", 顏色="土豪金", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="128G", 顏色="土豪金", 網(wǎng)絡(luò)="移動(dòng)"},
* Object { 容量="128G", 顏色="土豪金", 網(wǎng)絡(luò)="電信"},
* Object { 容量="128G", 顏色="銀色", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="128G", 顏色="銀色", 網(wǎng)絡(luò)="移動(dòng)"},
* Object { 容量="128G", 顏色="銀色", 網(wǎng)絡(luò)="電信"},
* Object { 容量="128G", 顏色="黑色", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="128G", 顏色="黑色", 網(wǎng)絡(luò)="移動(dòng)"},
* Object { 容量="128G", 顏色="黑色", 網(wǎng)絡(luò)="電信"},
* Object { 容量="128G", 顏色="pink", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="128G", 顏色="pink", 網(wǎng)絡(luò)="移動(dòng)"},
* Object { 容量="128G", 顏色="pink", 網(wǎng)絡(luò)="電信"}]
*/
</script>
以上所述是小編給大家介紹的基于JS實(shí)現(xiàn)的笛卡爾乘積之商品發(fā)布的想內(nèi)容，希望對(duì)大家有所幫助