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>