在Javascript中将数据从一个形状转换为另一个形状

我将如何使用Javascript转换下面的数据形状（es6很好）

发件人：

致：

第二个形状是第一个形状选项的所有可能组合

我正在尝试构建一个产品表单，该表单可以处理具有变体的产品，例如颜色、尺寸、材质等。每个变体都可以有多个选项。e、 g.对于颜色，它们可以是红色、蓝色、橙色等。要使其发挥作用，我想我需要得到一个列表，生成所有可能的组合，以便我可以为每个组合附加一个价格

在我遇到困难时，非常感谢您的帮助：(

下面是我试过的，但形状不对

let变量=[{
名称：“颜色”，
选项：[{
价值：“黄金”
}, {
值：“空间灰色”
}]
},
{
名称：“尺寸”，
选项：[{
值：“32”
}, {
值：“64”
}]
},
{
名称：“宽度”，
选项：[{
值：“100”
}, {
值：“200”
}]
}
]
常量[primaryOption，…otherOptions]=变量
让选项=[]
primaryOption.options.map（x=>{
otherOptions.map（y=>{
y、 options.map（z=>{
选项=[
…选项，
{
特性：{
[primaryOption.name]：x.value，
[y.name]：z.value
}
}
]
})
})
})
console.log（选项）

只需使用嵌套循环遍历所有值，并用它们构建一个新数组。

let变量=[{
名称：“颜色”，
选项：[{
价值：“黄金”
}, {
值：“空间灰色”
}]
},
{
名称：“尺寸”，
选项：[{
数值：32
}, {
数值：64
}]
},
{
名称：“宽度”，
选项：[{
数值：100
}, {
价值：200
}]
}
];
让endIndex=variants[0].options.length；
让结果=[]；
for（设i=0；i{
结果[i]=结果[i]|{属性：{}；
结果[i]。属性[x.name]=x.options[i]。值；
});
}
console.log（result）；

您可以通过迭代外部数组获取笛卡尔乘积，并获取内部数组作为附加对象的值

函数getCartesian（数组）{ 返回数组.reduce（（r，{name，options}）=>{ var-temp=[]； r、 forEach（（{property}）=> options.forEach（（{value}）=>temp.push（{property:Object.assign（{}，property，{[name]：value}}）） ); 返回温度； }, [{}]); } 变量数据=[{name:“Color”，选项：[{value:“Gold”}，{value:“Space grey”}，{name:“Size”，选项：[{value:32}，{value:64}]}，{name:“Width”，选项：[{value:100}，{value:200}]； console.log（getCartesian（数据））；

---

.as控制台包装{最大高度：100%！重要；顶部：0；}

我认为这个问题根本不适合新手。@Archer，我尝试过各种形式的reduce和map。但没有一种能达到目的。三个嵌套循环可以让你达到目的。@Archer，很公平。我已经添加了我的尝试。我认为这不值得一提，因为它似乎离解决方案很远。我将尝试使用Robby Cornelissen那样的循环建议。不，这表明你至少已经研究了这个问题，并尝试了一些大多数人都想看到的东西。这是一个质量更好的问题，通常会得到更好的答案，这就是堆栈溢出的原因。感谢更新：）这非常有效，谢谢。我真的很感激。@note非常乐意帮忙：）

[
  {
    name: "Color",
    options: [{ value: "Gold" }, { value: "Space grey" }]
  },
  {
   name: "Size",
     options: [{ value: 32 }, { value: 64 }]
  },
  {
    name: "Width",
    options: [{ value: 100 }, { value: 200 }]
  }
]

[
  {
    properties: {
      Color: "Gold",
      Size: 32,
      Width: 100
    }
  },
  {
    properties: {
      Color: "Gold",
      Size: 32,
      Width: 200
    }
  },
  {
    properties: {
      Color: "Gold",
      Size: 64,
      Width: 100
    }
  },
  {
    properties: {
      Color: "Gold",
      Size: 64,
      Width: 200
    }
  },
  {
    properties: {
      Color: "Space grey",
      Size: 32,
      Width: 100
    }
  },
  {
    properties: {
      Color: "Space grey",
      Size: 32,
      Width: 200
    }
  },
  {
    properties: {
      Color: "Space grey",
      Size: 64,
      Width: 100
    }
  },
  {
    properties: {
      Color: "Space grey",
      Size: 64,
      Width: 200
    }
  }
]

 let result = [{}];

 for(const {name, options} of input) {
   const previous = result;
   result = [];
   for(const {value} of options) {
      for(const prev of previous)
         result.push({ ...prev, [name]: value });
   }
}