Javascript 表示所有可用产品组合的数据结构？

用户可以从多达三个维度的产品数据中进行选择，以选择他们想要的产品。例如，对于我可能知道的一条裤子：

colors = ["red", "blue", "soylent green"]
waists = ["28W", "30W", "omg random description", "32W"] // The values are not always numeric
lengths = ["26L", "27L", "28L", "29L"]

在DOM中表示为：

<ul class="colors">
  <li><button name="red" value="red"/></li>
  <li><button name="blue" value="blue/></li>
  …
</ul>
<ul class="waists">
  <li><button name="28W" value="28W"/></li>
  <li><button name="30W" value="30W"/></li>
  …
</ul>
<!-- you get the picture -->

这是最简洁的，但会导致代码速度慢，无法阅读。当客户将鼠标悬停在腰围尺寸按钮上时，我必须在腰围数组中找到该值的索引，并消除腰围的所有其他尺寸，然后获取

null

值的索引并将其标记为不可用。这里有很多

for

循环

我尝试的另一种方法是使用嵌套对象。不可用的组合只是未定义：

{
  "red": {
    "28W": {
      "28L": "sku-123",
      "30L": "sku-456"
…
}}}

但是如果用户悬停在上面，比如说，

“28L”

，我必须遍历所有外部对象，以找到那些不具有

28L

属性的对象

---

如果我只需要知道哪些配置不可用，我可以列出这些配置的列表，但是由于我还需要

sku

，所以变得很复杂。什么样的数据结构在大小和速度（以及可读代码，如果可能的话）之间做了最好的权衡，记住它将在客户端运行？

你真的确定速度是个问题吗？你们的目录很大吗（数万件）

为什么不使用平面结构

{
"sku-123" : ["purple", "28W", "32L"],
"sku-998" : ["orange", "44W", "10L"]
}

还是用钥匙

{
"sku-123" : {color: "purple", w: "28W", l: "32L"},
"sku-998" : {color: "orange", w: "44W", l: "10L"}
}

当然这不是最快的，你必须遍历所有的产品来过滤掉它们。但这将使代码更具可读性（您可以使用谓词），并且更容易适应其他情况（例如添加新字段）

---

除非你已经证实了速度是一个问题，否则我不会忽略这个简单的方法

这里有两个问题。1.将信息有效传播到浏览器2。高效地搜索这些信息。我建议尽可能高效地将这些信息发送到浏览器中，同时将其保存在JSON中，这样至少可以对数据进行本机解析，然后对其中的垃圾进行索引，从而生成高效执行搜索所需的任何词典。我可以从三个字典开始，每个字典用于选择的类别，然后对于值，使用与键匹配的sku（带有sku的其他两个属性）的数组。如果用户做出了多项选择，那么应该使用哪一个词典，这取决于您，但是使用每个键的值最少的词典作为默认值，并且当用户只做出一个选择时，只使用其他两个词典可能是有意义的

---

你有很多选择，我只给你几个。此外，请记住，这些都是优化，您做得越多，就越难为新的行为进行更改。

我估计最大的产品集可能不超过5000种配置。也许你是对的，我想得太多了，但我想看看其他人有什么要说的。

{
"sku-123" : {color: "purple", w: "28W", l: "32L"},
"sku-998" : {color: "orange", w: "44W", l: "10L"}
}