Before I introduce the main text, I will add some knowledge to you:
js Cartesian product algorithm
Generate Cartesian product from the given object or array
//Cartesian product combination function descartes(list){//parent previous index;count pointer count var point = {};var result = [];var pIndex = null;var tempCount = 0;var temp = [];//Generate pointer objects based on parameter columns for(var index in list){if(typeof list[index] == 'object'){point[index] = {'parent':pIndex,'count':0}pIndex = index;}}//Single-dimensional data structure directly returns if(pIndex == null){return list;}//Dynamic generation of Cartesian product while(true){for(var index in list){tempCount = point[index]['count'];temp.push(list[index][tempCount]);}//Press into the result array result.push(temp);temp = [];//Check the maximum pointer value problem while(true){if(point[index]['count']+1 >= list[index].length){point[index]['count'] = 0;pIndex = point[index]['parent'];if(pIndex == null){return result;}// Assign parent to check again index = pIndex;}else{point[index]['count']++;break;}}}}}}Okay, the JS Cartesian Generation Algorithm is just to lay the groundwork for the following text. I won’t say much, so I will get back to the point.
1. Requirements description
The product release function of e-commerce websites, similar to the product details page of JD.com, as shown in the figure below, how is such a selectable function generated in the background? In fact, the iPhone 6 you see is not just a product when it is released, but many, because the price of each selected iPhone 6 is different, so when publishing the product, these optional items are selected from a bunch of attributes and attribute values. The problem is that the number of attributes selected during publication is different, and the attribute values are also different. Then the number of generated products is combined based on attributes and attribute values.
2. Directly upload the code
<script>/*** Product attribute type* The number of attributes is uncertain*/var Spec = function(specName,specItems){this.specName = specName; //Attribute name this.specItems = specItems;//Numerical value is an array, the number of arrays is uncertain}var result = [];//Combined into product set/*** Publish an attribute selected for a product, which is a specification array, and the number of arrays is uncertain* Combined into different products based on this selected attribute*/var selectSpec = [{specName:'capacity',specItems:['16G','64G','128G']},{specName:'Color',specItems:['Top Gold','Silver','Black','pink']},{specName:'Network',specItems:['United Kingdom','Mobile','Telecom']}];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);/**Combined into product set* [Object { Capacity="16G", Color="Tulujin", Network="Universal"}, * Object { Capacity="16G", color="大天天天", * Object { Capacity="16G", color="大天天天天天天", * Object { Capacity="16G", color="大天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天� Object { Capacity="16G", Color="black", Network="Telecom"}, * Object { Capacity="16G", Color="pink", Network="Unicom"}, * Object { Capacity="16G", Color="pink", Network="Mobile"}, * Object { Capacity="16G", Color="pink", Network="Telecom"}, * Object { Capacity="64G", Color="Telecom"}, * Object { Capacity="64G", Color="Telecom"}, * Object { Capacity="64G", Color="Treasury Gold", Network="Telecom"},* Object { Capacity="64G", Color="Silver", Network="Unicom"}, * Object { Capacity="64G", Color="Silver", Network="Mobile"},* Object { Capacity="64G", Color="Silver", Network="Telecom"}, * Object { Capacity="64G", Color="Black", Network="Unicom"}, * Object { Capacity="64G", Color="Black", Network="Mobile"}, * Object { Capacity="64G", Color="Black", Network="Telecom"}, * Object { Capacity="64G", Color="Black", Network="Telecom"}, * Object { Capacity="64G", color="pink", network="Unicom"}, * Object { Capacity="64G", color="pink", network="Mobile"}, * Object { Capacity="64G", color="pink", network="Telecom"}, * Object { Capacity="128G", color="Telecom"}, * Object { Capacity="128G", color="Telecom"}, * Object { Capacity="128G", color="Telecom"}, * Object { Capacity="128G", color="Telecom"}, * Object { Capacity="128G", Color="silver", network="Unicom"}, * Object { Capacity="128G", color="Silver", network="Mobile"}, * Object { Capacity="128G", color="Silver", network="Telecom"}, * Object { Capacity="128G", color="Black", network="Unicom"}, * Object { Capacity="128G", color="Black", network="Mobile"}, * Object { Capacity="128G", color="Black", network="Telecom"}, * Object { Capacity="128G", color="pink", network="Unicom"}, * Object { Capacity="128G", Color="pink", Network="Mobile"}, * Object { Capacity="128G", Color="pink", Network="Telecommunications"}]*/</script>The above is the content of the product released by the Cartesian product based on JS implementation introduced to you. I hope it will be helpful to you. At the same time, I am very grateful to you for your support for the Wulin Network website. I believe we will do better!