基于固定的SKU數(shù)據(jù)結(jié)構(gòu)的組合，輸出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;
    }

那如果需要通過組合后的數(shù)據(jù)來反轉(zhuǎn)原始數(shù)據(jù)呢？

我們來看下：

1、首先，觀察生成的組合列表，找到其中的共同點(diǎn)和區(qū)別。從代碼中可以看出，生成的每個組合都包含以下幾個屬性：

id_${item.id}：表示某個輸入項(xiàng)的選中值；
spDataList：表示整個組合的所有輸入項(xiàng)及其選中值；
spData：表示 spDataList 序列化后的字符串；
enable：表示該組合是否可用；
pic：表示組合對應(yīng)的圖片路徑。

可以看到，每個組合都包含一個輸入項(xiàng)的選中值，而輸入項(xiàng)有多個，每個輸入項(xiàng)有多個選項(xiàng)，因此需要確定原始數(shù)據(jù)結(jié)構(gòu)中輸入項(xiàng)和其選項(xiàng)的屬性。

2、其次，確定原始數(shù)據(jù)結(jié)構(gòu)中輸入項(xiàng)和其選項(xiàng)的屬性。從代碼中可以看出，原始數(shù)據(jù)結(jié)構(gòu)應(yīng)該包含一個數(shù)組，每個數(shù)組元素代表一個輸入項(xiàng)，其中每個輸入項(xiàng)應(yīng)該包含以下屬性：

id：表示該輸入項(xiàng)的唯一標(biāo)識符；
name：表示該輸入項(xiàng)的名稱；
inputSelectArr：表示該輸入項(xiàng)的選項(xiàng)，是一個數(shù)組，每個數(shù)組元素代表一個選項(xiàng)，其中每個選項(xiàng)應(yīng)該包含以下屬性：
value：表示該選項(xiàng)的值；
pic：表示該選項(xiàng)對應(yīng)的圖片路徑。

3、最后，根據(jù)生成的組合列表和確定的原始數(shù)據(jù)結(jié)構(gòu)，反推原始數(shù)據(jù)結(jié)構(gòu)。根據(jù)組合列表中的 spDataList 屬性，可以確定原始數(shù)據(jù)結(jié)構(gòu)中的每個輸入項(xiàng)的名稱和對應(yīng)的選項(xiàng)值；根據(jù)組合列表中的 enable 屬性，可以確定原始數(shù)據(jù)結(jié)構(gòu)中每個組合是否可用；根據(jù)組合列表中的 pic 屬性，可以確定原始數(shù)據(jù)結(jié)構(gòu)中每個組合對應(yīng)的圖片路徑。

代碼如下：

function reverseGenerateCombinations(combinations) {
  // 從第一個組合中獲取輸入項(xiàng)的名稱
  const inputNames = combinations[0].spDataList.map(data => data.key);

  // 根據(jù)輸入項(xiàng)名稱創(chuàng)建空的輸入項(xiàng)列表
  const inputs = inputNames.map(name => ({ id: name, name, inputSelectArr: [] }));

  // 遍歷每個組合，獲取每個輸入項(xiàng)的選項(xiàng)值和對應(yīng)的圖片路徑
  combinations.forEach(({ spDataList, enable, pic }) => {
    spDataList.forEach(({ key, value }) => {
      // 找到對應(yīng)的輸入項(xiàng)
      const input = inputs.find(input => input.id === key);
      // 如果該選項(xiàng)還不存在，則添加該選項(xiàng)
      if (!input.inputSelectArr.some(option => option.value === value)) {
        input.inputSelectArr.push({ value, pic });
      }
    });
  });

  return inputs;
}