商品规格可选怎么设计_分分钟学会前端sku算法（商品多规格选择）

相信大家看到这张图片就知道我们这篇文章要讲什么了，没错就是-商品多规格选择的解法。

近来在掘金上面看见大家都在研究“商品多规格选择”的问题，例如晨曦大佬的前端电商 sku 的全排列算法很难吗？学会这个套路，彻底掌握排列组合。 在这篇文章里面，大佬写明了如何实现sku的全排列，思路非常的棒，但是并没有紧贴业务场景。真正的业务场景是，我们要根据用户每一次选择的规格，找出剩下可选的规格和不可选的规格，表现在前端页面上：就是将不可选的规格置回，也就是如下效果(可以点击这里查看最终效果)：

那么今天我们就来讲讲这个问题的一个解决方法，要讲明白很难，但是我相信你看了这篇文章之后，sku就再也难不倒你了。

什么是 sku

在介绍具体解法之前，我们先来介绍一下什么是sku? sku是会计学中的一个名词，被称作库存单元。说人话？简单来讲就是，我们上图 中每一个单规格选项，例如深空灰色、64G,都是一个规格(sku)。商品和sku属于一对多的关系，也就是我们可以选择多个sku来确定到某个具体的商品:

业务场景

可以这么说，只要是做电商类相关的产品，比如购物 APP、购物网站等等，都会遇到这么一个场景，每个商品对应着多个规格，用户可以根据不同的规格组合，选择出自己想要的产品。我们自己在生活中也会经常用到这个功能，然而就是这样一个简单的功能，却难倒了很多小伙伴。

笔者也是一样，刚开始遇到这个场景，笔者觉得应该一个下午就能搞定，完美收工，奈何还是太过于年轻，搞了差不多两天，在网上查阅了很多相关的文章和资料，但是不得其解，最后没有办法，只能硬着头皮采用暴力求解(也就是不断循环)的方法来解决的，时间复杂度贼高，达到了O(m*n)也就是O(n²),这种实现方法其实也不是不行(能跑就行)，对吧。但是后来笔者发现，当一个商品的规格非常非常多、并且用户的设备性能不是那么好的情况下，那么这种实现方式就会导致运行时间过长，表现在页面上就是：当用户点击了一个规格，会有明显的卡顿，那怎么行，客户都流失了，老板还怎么买法拉利 ️？所以笔者又开始了研究。

图

一个偶然的机会，笔者在逛知乎的时候，看到了有人在讨论图，这个数据结构，突然灵光一现，貌似咱们的多规格选择也可以用图来作求解方法，后来一尝试，还真的可行。而且时间复杂度只有O(n)，简直完美。所以我们下面来介绍一下图，什么是图？相信大学学过数据结构与算法的同学都应该知道，不过应该已经忘得一干二净了。

什么是图

图其实是数学的一个分支。它以图为研究对象。图论中的图是由若干给定的点及连接两点的线所构成的图形，这种图形通常用来描述某些事物之间的某种特定关系，用点代表事物，用连接两点的线表示相应两个事物间具有这种关系：

图通常有如下分类:

• 分为有向图和无向图
• 分为有权图和无权图

好了知道这两个概念就差不多了,当然如果想了解更多更多概念，请看这里

那么我们需要用到的是无向图，什么是无向图呢，就像这样：

两个顶点之间如果有连线，则表示这两个顶点是互通的。小伙伴们看到这里可能会懵逼了