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>

 

转载于:https://www.cnblogs.com/xumanbu/p/4552290.html