如何组合多个数组中的值以创建新的组合数组

How to combine values from multiple arrays to create a new combined array

本文关键字：组合 数组 创建 何组合      更新时间：2023-09-26

我正在一个购物网站上工作，希望让我的用户能够根据他们指定的变体动态创建多个产品。我允许这些用户创建任意数量的"类型"，定义大小、颜色或容量等内容。但是用户可以指定这个的名称和他们想要的类型的数量。

在每个类型中，我还允许用户配置多个选项。例如，"大小"类型可能有"小"、"中"answers"大"选项。同样，用户可以定义这些字段的名称，并且他们可以创建的字段数量不应有任何限制。

在用户定义完他们的产品后，我有一个类型数组，在每个类型中，都有一个选择数组。

作为示例，手机产品可能具有以下类型和选择结构：

[
  {
  'id': 1,
  'type': 'Colour',
  'options': ['Black', 'White', 'Gold']
  },
  { 
  'id': 2,
  'type': 'Size',
  'options': ['Standard', 'Large"']
  },
  { 
  'id': 3,
  'type': 'Capacity',
  'options': ['32GB', '64GB', '128GB']
  }
]

根据这些数据，我想创建18（3*2*3）种可能的产品变体，用户可以为其指定特定的价格、重量或SKU选项。最终出现以下变体：

Black - Standard - 32GB
Black - Standard - 64GB
Black - Standard - 128GB
Black - Large - 32GB
Black - Large - 64GB
Black - Large - 128GB
White - Standard - 32GB
White - Standard - 64GB
White - Standard - 128GB
White - Large - 32GB
White - Large - 64GB
White - Large - 128GB
Gold - Standard - 32GB
Gold - Standard - 64GB
Gold - Standard - 128GB
Gold - Large - 32GB
Gold - Large - 64GB
Gold - Large - 128GB

我可以想象在这样的阵列中：

[
  {
    'variant_id': 1,
    'options':
      [{ 'type': 'Colour', 'choice': 'Black' },
      { 'type': 'Size', 'choice' 'Standard' },
      { 'type': 'Capacity', 'choice' '32G' }]
  },
  {
    'variant_id': 2,
    'options':
      [{ 'type': 'Colour', 'choice': 'Black' },
      { 'type': 'Size', 'choice' 'Standard' },
      { 'type': 'Capacity', 'choice' '64GB' }]
  },
  {
    'variant_id': 3,
    'options':
      [{ 'type': 'Colour', 'choice': 'Black' },
      { 'type': 'Size', 'choice' 'Standard' },
      { 'type': 'Capacity', 'choice' '128GB' }]
  }
<snip>

我的问题是，我如何创建一个循环，使我能够迭代各种类型和选择，以创建我的最终变体列表？我很难想象如何实现这一功能。

尝试以下代码。它在纯javascript中完全可以实现您想要的功能。对于第一个元素的选项，在循环中调用generateOutput函数，然后递归调用generateOutput函数，生成所需的结果。很难用书面形式解释其中的逻辑。只需添加调试器并了解流程即可。祝你好运。

var data = [{
  'id': 1,
  'type': 'Colour',
  'options': ['Black', 'White', 'Gold']
}, {
  'id': 2,
  'type': 'Size',
  'options': ['Standard', 'Large"']
}, {
  'id': 3,
  'type': 'Capacity',
  'options': ['32GB', '64GB', '128GB']
}];
function generateOutput(dataIndex, optionIndex) {
  var option, result, i, subResult;
  option = {
    type: data[dataIndex].type,
    choice: data[dataIndex].options[optionIndex]
  };
  if (dataIndex == data.length - 1) {
    result = {
      isLast: true,
      options: [option]
    }
    return result;
  }
  result = [];
  for (i = 0; i < data[dataIndex + 1].options.length; i++) {
    subResult = generateOutput(dataIndex + 1, i);
    if (subResult.isLast) {
      subResult.options.unshift(option);
      result.push(subResult.options);
    } else {
      result = result.concat(subResult);
    }
  }
  if (!subResult.isLast) {
    for (var j = 0; j < result.length; j++) {
      result[j].unshift(option);
    }
  }
  return result;
}
function getOutput() {
  var result = [],
    option, i;
  for (i = 0; i < data[0].options.length; i++) {
    option = {
      type: data[0].type,
      choice: data[0].options[i]
    };
    var subResult = generateOutput(0, i);
    if (subResult.isLast) {
      result.push(subResult.options);
    } else {
      result = result.concat(subResult);
    }
  }
  
  var output = [];
  for (i = 0; i < result.length; i++) {
    output.push({
      variant_id: (i+1),
      options: result[i]
    })
  }
  return output;
}
console.log(getOutput());

这里有一些使用各种jquery数组方法的jquery代码

var list = [{
    'id': 1,
        'type': 'Colour',
        'options': ['Black', 'White', 'Gold']
}, {
    'id': 2,
        'type': 'Size',
        'options': ['Standard', 'Large']
}, {
    'id': 3,
        'type': 'Capacity',
        'options': ['32GB', '64GB', '128GB']
}];
var return_list = [];
var prev_options = list[0].options;
$.each(list, function (index, value) {
    if (index == 0) return;
    $.each(value.options, function (index, value) {
        var temp_list = [];
        temp_list = $.map(prev_options, function (v, i) {
            return v + ' ' + value;
        });
        return_list = $.merge(return_list, temp_list);
    });
    return_list = $.grep(return_list, function (i) {
        return $.inArray(i, prev_options) == -1;
    });
    prev_options = return_list.slice(0);
});

你可以在这里测试

相关文章：