Angular：笛卡儿积组合生成商品sku列表

三个商品属性组，每个属性组中有若干属性值，在下拉控件中选中属性组后，在右侧复选控件中选择一个或多个属性值，再根据笛卡儿积组合生成商品sku列表（如下图）：

服务（provider）中：

/*** 如果传入的参数只有一个数组，求笛卡尔积结果* @param arr1 一维数组* @returns {Array}*/descartes1(arr1) {// 返回结果，是一个二维数组const result = [];let i = 0;for (i = 0; i < arr1.length; i++) {const item1 = arr1[i];result.push([item1]);}return result;}/*** 如果传入的参数只有两个数组，求笛卡尔积结果* @param arr1 一维数组* @param arr2 一维数组* @returns {Array}*/descartes2(arr1, arr2) {// 返回结果，是一个二维数组const result = [];let i = 0,j = 0;for (i = 0; i < arr1.length; i++) {const item1 = arr1[i];for (j = 0; j < arr2.length; j++) {const item2 = arr2[j];result.push([item1, item2]);}}return result;}/**** @param arr2D 二维数组* @param arr1D 一维数组* @returns {Array}*/descartes2DAnd1D(arr2D, arr1D) {let i = 0,j = 0;// 返回结果，是一个二维数组const result = [];for (i = 0; i < arr2D.length; i++) {const arrOf2D = arr2D[i];for (j = 0; j < arr1D.length; j++) {const item1D = arr1D[j];result.push(arrOf2D.concat(item1D));}}return result;}descartes3(list) {const listLength = list.length;let i = 0;// 返回结果，是一个二维数组const result = [];// 为了便于观察，采用这种顺序let arr2D = this.descartes2(list[0], list[1]);for (i = 2; i < listLength; i++) {const arrOfList = list[i];arr2D = this.descartes2DAnd1D(arr2D, arrOfList);}return arr2D;}// 笛卡儿积组合descartes(list) {if (!list) {return [];}if (list.length <= 0) {return [];}if (list.length == 1) {return this.descartes1(list[0]);}if (list.length == 2) {return this.descartes2(list[0], list[1]);}if (list.length >= 3) {return this.descartes3(list);}}

组件（component）中：

generateDataSet() {               // 判断每种属性组合必须选择一个规格，同时取出每种属性已选择的规格const selectedPropertyAllList = [];for (let i = 0; i < this.propertyGroupList.length; i++) {         // 遍历属性组const item = this.propertyGroupList[i];let checkFlag = false;const selectedPropertyList = [];for (let j = 0; j < item.propertyList.length; j++) {          // 遍历属性值const property = item.propertyList[j];if (property.checked) {                   // 取出选中的属性值checkFlag = true;selectedPropertyList.push(property);}}if (!checkFlag) {                           // 某个属性组中未选中属性值this.notice.warning(`请至少选择一个【${item.groupName}】的规格信息`);return;} else {selectedPropertyAllList.push(selectedPropertyList);}}// 生成属性组合，放入dataSetconst descartesResult = this.commodityInfoProvider.descartes(selectedPropertyAllList);this.dataSet = [];descartesResult.forEach(itemArr => {let skuName = '';let propertyId = '';itemArr.forEach(item => {skuName = skuName + item.label + ',';propertyId = propertyId + item.value + ',';});this.dataSet.push({skuName: skuName.substr(0, skuName.length - 1),propertyId: `[${propertyId.substr(0, propertyId.length - 1)}]`});});this.dataSet.forEach((item, index) => {this.editCache[index] = {edit: true,data: item};});}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！