基于固定的SKU数据结构的组合,输出A、B、C等系列的多类组合。
function generateCombinations(source) {
const combinations = [];
function generateHelper(index, current, spDataList) {
if (index === source.length) {
combinations.push({...current, spDataList, spData: JSON.stringify(spDataList)});
return;
}
const item = source[index];
for (let i = 0; i < item.inputSelectArr.length; i++) {
const newCurrent = {...current};
newCurrent[`id_${item.id}`] = item.inputSelectArr[i].value;
newCurrent.enable = 1
if (index == 0)
newCurrent.pic = item.inputSelectArr[i].pic;
const newSpData = [...spDataList, {key: item.name, value: item.inputSelectArr[i].value}];
generateHelper(index + 1, newCurrent, newSpData);
}
}
generateHelper(0, {}, []);
return combinations;
}
那如果需要通过组合后的数据来反转原始数据呢?
我们来看下:
1、首先,观察生成的组合列表,找到其中的共同点和区别。从代码中可以看出,生成的每个组合都包含以下几个属性:
id_${item.id}:表示某个输入项的选中值;
spDataList:表示整个组合的所有输入项及其选中值;
spData:表示 spDataList 序列化后的字符串;
enable:表示该组合是否可用;
pic:表示组合对应的图片路径。
可以看到,每个组合都包含一个输入项的选中值,而输入项有多个,每个输入项有多个选项,因此需要确定原始数据结构中输入项和其选项的属性。
2、其次,确定原始数据结构中输入项和其选项的属性。从代码中可以看出,原始数据结构应该包含一个数组,每个数组元素代表一个输入项,其中每个输入项应该包含以下属性:
id:表示该输入项的唯一标识符;
name:表示该输入项的名称;
inputSelectArr:表示该输入项的选项,是一个数组,每个数组元素代表一个选项,其中每个选项应该包含以下属性:
value:表示该选项的值;
pic:表示该选项对应的图片路径。
3、最后,根据生成的组合列表和确定的原始数据结构,反推原始数据结构。根据组合列表中的 spDataList 属性,可以确定原始数据结构中的每个输入项的名称和对应的选项值;根据组合列表中的 enable 属性,可以确定原始数据结构中每个组合是否可用;根据组合列表中的 pic 属性,可以确定原始数据结构中每个组合对应的图片路径。
代码如下:
function reverseGenerateCombinations(combinations) {
// 从第一个组合中获取输入项的名称
const inputNames = combinations[0].spDataList.map(data => data.key);
// 根据输入项名称创建空的输入项列表
const inputs = inputNames.map(name => ({ id: name, name, inputSelectArr: [] }));
// 遍历每个组合,获取每个输入项的选项值和对应的图片路径
combinations.forEach(({ spDataList, enable, pic }) => {
spDataList.forEach(({ key, value }) => {
// 找到对应的输入项
const input = inputs.find(input => input.id === key);
// 如果该选项还不存在,则添加该选项
if (!input.inputSelectArr.some(option => option.value === value)) {
input.inputSelectArr.push({ value, pic });
}
});
});
return inputs;
}