SKU动态数据组合JS

基于固定的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;
}