js 商品多规格组合匹配

需求

动态添加商品规格，并给规格设置若干属性

最后根据添加的规格属性，匹配出商品的所有规格属性

规格及其对应的规格属性数据

var data = [
	{
		name: '颜色',
		specs: ['白色', '黑色']
	},
	{
		name: '尺寸',
		specs: ['L', 'M', 'S']
	},
	{
		name: '口味',
		specs: ['咸', '甜']
	}
]

最终数据格式

 

代码

1、使用for循环

// 两个数组相乘，把两个数组中的每一项和另一个数组的每一项相匹配
function arrayMultiply(arr1, arr2) {
	var arr = []
	for (var i = 0; i < arr1.length; i++) {
		for (var j = 0; j < arr2.length; j++) {
			if (Array.isArray(arr2[j])) {
				arr.push([arr1[i], ...arr2[j]])
			} else {
				arr.push([arr1[i], arr2[j]])
			}
		}
	}
	return arr;
}

// 组合数据，把规格属性互相匹配
function combinationData(data) {
	var arrData = []
	for (var i = data.length - 1; i > 0; i--) {
		// 循环调用arrayMultiply方法
		if (i === data.length - 1) {
			arrData = arrayMultiply(data[i - 1].specs, data[i].specs)
		} else {
			arrData = arrayMultiply(data[i - 1].specs, arrData)
		}
	}
	return arrData;
}

var resultList = arrangeData(data);
// 如果需要是对象的话，转一下对象
var objArr = []
for (var i = 0; i < resultList.length; i++) {
	objArr.push({
		...resultList[i]
	})
}
console.log(objArr);

2、笛卡尔积

function getCombination(array) {
	let resultArry = []
	array.forEach((arrItem) => {
		if (resultArry.length === 0) {
			resultArry = arrItem.specs;
		} else {
			const emptyArray = [];
			resultArry.forEach((item) => {
				arrItem.specs.forEach((value) => {
					if (Array.isArray(item)) {
						emptyArray.push([...item, value])
					} else {
						emptyArray.push([item, value])
					}
				})
			})
			resultArry = emptyArray
		}
	})
	return resultArry
}

var resultList = getCombination(data)
console.log(resultList)

3、使用map函数生成笛卡尔积

function combine(arr){
	let result = [
		[]
	]
	
	arr.map(x => {
		var res = []
		result.map(y => {
			x.specs.map(z => {
				res.push([...y, z])
			})
		})
		result = res
	})
	return result;
}
var resultList = combination(data);
console.log(resultList)

4、递归

function combination(arr) {
	var r = [];
	(function f(t, a, n) {
		if (n == 0) return r.push(t);
		for (var i = 0; i < a[n - 1].specs.length; i++) {
			f(t.concat(a[n - 1].specs[i]), a, n - 1);
		}
	})([], arr, arr.length);
	return r;
}

var resultList = combination(data);
console.log(resultList)