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

Question

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

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 -->

我们也知道，你不能得到所有的颜色，腰部和长度的组合。当选择了部分配置时，我们会标记HTML以指示在这种选择下可用的配置。提供给我可用组合的数据必须以JSON的形式传递，它必须提供产品配置的sku (string)，但它可以采取任何有意义的形式。它应该采取什么形式？

我试验了一个三维数组，其中定义的值是skus，而null或未定义的值是不可用的配置：

[ // Arrays of colors
  [ // Arrays of waists
    [ // Array of lengths
      "sku-1", "sku-2", "sku-3", null, "sku-4"
    ], [
      "sku-abc", null, "sku-def"
    ]
  ], [
    [ … ], …
  ] …
]

这是最紧凑的，但导致缓慢，不可读的代码。当客户悬停在腰围大小按钮上时，我必须在腰围数组中找到该值的索引，并消除腰围的所有其他维度，然后获取null值的索引并将其标记为不可用。这里有很多for循环。

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

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

但是，如果用户在"28L"上徘徊，我必须遍历所有外部对象，以找到那些没有28L属性的对象。

如果我只需要知道哪些配置不可用，我可以列出这些配置，但是由于我也需要sku，所以变得很复杂。什么样的数据结构在大小和速度(以及可读的代码，如果可能的话)之间做出最好的权衡，记住它将在客户端运行？

Answer 1

你真的确定速度是个问题吗？贵公司的目录是否很大(数万件)？

为什么不用平结构呢？

{
"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"}
}

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

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

Answer 2

这里有两个问题。1.向浏览器有效传播信息2.有效搜索该信息。我建议尽可能高效地将这些信息保存在JSON中，因此至少数据应该进行本地解析，然后将垃圾编入索引，使任何字典都能有效地执行搜索。我可能从三个字典开始，每个字典用于选择的类别，然后对于值使用一个数组来匹配键(与sku的另外两个属性)匹配的sku。如果用户做了多项选择，那么使用哪一种字典，这取决于您，但是使用每个键的值最少的字典作为默认值可能是有意义的，并且只有在用户只做了一个选择时才使用其他两个字典。

你有很多选择，我只给你几个。而且，请记住，这些都是优化，你做的越多，就越难改变新的行为。