本文給大家介紹JS實現(xiàn)的笛卡爾乘積之商品發(fā)布的相關(guān)內(nèi)容，涉及到j(luò)s笛卡爾積算法的相關(guān)知識，本文介紹的非常詳細(xì)，具有參考價值，感興趣的朋友一起學(xué)習(xí)吧

沒給大家介紹正文之前先給大家補充點知識：

js笛卡爾積算法

根據(jù)給的對象或者數(shù)組生成笛卡爾積

//笛卡兒積組合

function descartes(list)

{

//parent上一級索引;count指針計數(shù)

var point = {};

var result = [];

var pIndex = null;

var tempCount = 0;

var temp = [];

//根據(jù)參數(shù)列生成指針對象

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;

}

//動態(tài)生成笛卡爾積

while(true)

{

for(var index in list)

{

tempCount = point[index]['count'];

temp.push(list[index][tempCount]);

}

//壓入結(jié)果數(shù)組

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進(jìn)行再次檢查

index = pIndex;

}

else

{

point[index]['count']++;

break;

}

}

}

}

好了，關(guān)于js笛卡爾積算法只是給下文做個鋪墊，不多說了，言歸正傳。

一、需求描述

電商網(wǎng)站的商品發(fā)布功能，類似京東的商品詳細(xì)頁，如下圖，這樣的可選擇功能，在后臺是如何生成的呢，其實你看到的一個iphone6在發(fā)布時并不只是發(fā)布一個商品，而是很多個，因為每一個選擇出來的iphone6價格是不一樣的，那么發(fā)布商品時這些可選擇項又是從一堆屬性和屬性值中挑選出來的，問題來了，發(fā)布時挑選的屬性個數(shù)是不一樣的，屬性值也是不一樣的，那么生成的商品個數(shù)是根據(jù)屬性和屬性值組合出來的。

二、直接上代碼

<script>

/**

* 商品屬性類型

* 一個屬性個數(shù)是不確定的

*/

var Spec = function(specName,specItems){

this.specName = specName; //屬性名稱

this.specItems = specItems;//數(shù)值值，是個數(shù)組，數(shù)組個數(shù)不確定

}

var result = [];//組合成產(chǎn)品集

/**

* 發(fā)布一款商品選擇的一個屬性，這是一個規(guī)格數(shù)組，數(shù)組個數(shù)不確定

* 根據(jù)這個選擇的屬性組合成不同的產(chǎn)品

*/

var selectSpec = [{specName:'容量',specItems:['16G','64G','128G']},

{specName:'顏色',specItems:['土豪金','銀色','黑色','pink']},

{specName:'網(wǎng)絡(luò)',specItems:['聯(lián)通','移動','電信']}];

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ò)="移動"},

* Object { 容量="16G", 顏色="土豪金", 網(wǎng)絡(luò)="電信"},

* Object { 容量="16G", 顏色="銀色", 網(wǎng)絡(luò)="聯(lián)通"},

* Object { 容量="16G", 顏色="銀色", 網(wǎng)絡(luò)="移動"},

* Object { 容量="16G", 顏色="銀色", 網(wǎng)絡(luò)="電信"},

* Object { 容量="16G", 顏色="黑色", 網(wǎng)絡(luò)="聯(lián)通"},

* Object { 容量="16G", 顏色="黑色", 網(wǎng)絡(luò)="移動"},

* Object { 容量="16G", 顏色="黑色", 網(wǎng)絡(luò)="電信"},

* Object { 容量="16G", 顏色="pink", 網(wǎng)絡(luò)="聯(lián)通"},

* Object { 容量="16G", 顏色="pink", 網(wǎng)絡(luò)="移動"},

* Object { 容量="16G", 顏色="pink", 網(wǎng)絡(luò)="電信"},

* Object { 容量="64G", 顏色="土豪金", 網(wǎng)絡(luò)="聯(lián)通"},

* Object { 容量="64G", 顏色="土豪金", 網(wǎng)絡(luò)="移動"},

* Object { 容量="64G", 顏色="土豪金", 網(wǎng)絡(luò)="電信"},

* Object { 容量="64G", 顏色="銀色", 網(wǎng)絡(luò)="聯(lián)通"},

* Object { 容量="64G", 顏色="銀色", 網(wǎng)絡(luò)="移動"},

* Object { 容量="64G", 顏色="銀色", 網(wǎng)絡(luò)="電信"},

* Object { 容量="64G", 顏色="黑色", 網(wǎng)絡(luò)="聯(lián)通"},

* Object { 容量="64G", 顏色="黑色", 網(wǎng)絡(luò)="移動"},

* Object { 容量="64G", 顏色="黑色", 網(wǎng)絡(luò)="電信"},

* Object { 容量="64G", 顏色="pink", 網(wǎng)絡(luò)="聯(lián)通"},

* Object { 容量="64G", 顏色="pink", 網(wǎng)絡(luò)="移動"},

* Object { 容量="64G", 顏色="pink", 網(wǎng)絡(luò)="電信"},

* Object { 容量="128G", 顏色="土豪金", 網(wǎng)絡(luò)="聯(lián)通"},

* Object { 容量="128G", 顏色="土豪金", 網(wǎng)絡(luò)="移動"},

* Object { 容量="128G", 顏色="土豪金", 網(wǎng)絡(luò)="電信"},

* Object { 容量="128G", 顏色="銀色", 網(wǎng)絡(luò)="聯(lián)通"},

* Object { 容量="128G", 顏色="銀色", 網(wǎng)絡(luò)="移動"},

* Object { 容量="128G", 顏色="銀色", 網(wǎng)絡(luò)="電信"},

* Object { 容量="128G", 顏色="黑色", 網(wǎng)絡(luò)="聯(lián)通"},

* Object { 容量="128G", 顏色="黑色", 網(wǎng)絡(luò)="移動"},

* Object { 容量="128G", 顏色="黑色", 網(wǎng)絡(luò)="電信"},

* Object { 容量="128G", 顏色="pink", 網(wǎng)絡(luò)="聯(lián)通"},

* Object { 容量="128G", 顏色="pink", 網(wǎng)絡(luò)="移動"},

* Object { 容量="128G", 顏色="pink", 網(wǎng)絡(luò)="電信"}]

*/

</script>

以上所述是小編給大家介紹的基于JS實現(xiàn)的笛卡爾乘積之商品發(fā)布的想內(nèi)容，希望對大家有所幫助