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

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

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

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

作为示例，移动电话产品可能具有以下类型和选择结构：

[
  {
  '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>

[
{
“变量id”：1，
“选项”：
[{'type'：'color'，'choice'：'Black'}，
{'type'：'Size'，'choice''Standard'}，
{'type'：'Capacity'，'choice''32G'}]
},
{
“变量id”：2，
“选项”：
[{'type'：'color'，'choice'：'Black'}，
{'type'：'Size'，'choice''Standard'}，
{'type'：'Capacity'，'choice''64GB'}]
},
{
“变体id”：3，
“选项”：
[{'type'：'color'，'choice'：'Black'}，
{'type'：'Size'，'choice''Standard'}，
{'type'：'Capacity'，'choice''128GB'}]
}

---

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

下面是一些使用各种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);
});

---

您可以测试试试下面的代码。它在纯javascript中实现了您想要的功能。 在循环中调用

generateOutput

函数以获取第一个元素的选项，然后递归调用

generateOutput

函数以生成所需的结果。很难用书面形式解释逻辑。只需添加调试器并理解流程即可。祝您好运

var数据=[{
“id”：1，
“类型”：“颜色”，
“选项”：[“黑色”、“白色”、“金色”]
}, {
“id”：2，
“类型”：“大小”，
“选项”：[“标准”、“大型”]
}, {
"id":3,，
“类型”：“容量”，
“选项”：['32GB'，'64GB'，'128GB']
}];
函数生成输出（数据索引、选项索引）{
var期权，结果，i，子结果；
选项={
类型：数据[dataIndex]。类型，
选项：数据[dataIndex]。选项[optionIndex]
};
if（dataIndex==data.length-1）{
结果={
伊斯拉斯特：是的，
选项：[选项]
}
返回结果；
}
结果=[]；
对于（i=0；iconsole.log（getOutput（））

@SherinMathew据我所知，这可以是无限的。老实说，如果你在网上商店查看产品，大多数时候用户不会从一个长长的下拉选择中选择一个选项，而是会为每种类型选择一个不同的选择框。对于t恤，首先选择尺寸。然后选择哪一个选项您想要授权的lor对于该尺寸，它仍在库存中。下一步选择“自定义图形”等。