利用常规算法带你一步一步解决前端实际业务

Hello，小伙伴们，爱分享的知了小姐姐又来啦！

一提到算法，一些小伙伴们听着“打脑壳”，一些小伙伴会觉得天天搞什么排序，二叉树迭代...有啥意思，工作中用不到。哈哈，“老子”说的好，不是用不到，而是你还没到那个level。

今天主要是聊聊学习简单的算法在实际工作中的利用，没有什么太高深的东西（白嫖怪请走开），只是跟大家分享这个思考过程，从最low的代码一步一步思考，最后到基本还看的过去代码。(文章较长！小妹儿，先上鸳鸯锅吃起！)

业务场景

添加商品这个常见场景我相信很多小伙伴们都遇到过，大家都知道（SPU）加上一些属性才组成（SKU），比如最常见的“门”，门是SPU，门包含了颜色、材质、开口方向等一堆属性，直接上代码！

彩蛋--其实我是卖门的小二，会有些小伙伴没有这个生活经验，哈哈！正好给大家普及一下，毕竟将来都是要买房子装修的人，如果小伙伴正好遇到选门这方面的问题留言咨询哈！

1. 嵌套循环

这种方式是最容易想到了，就是第一个属性数组迭代，里面再放入第二个属性数组，再放第三个...

我的天啦！O(N^3)的复杂度。哈哈，机智的你是不是早就看出了！难道我的属性只有3个？不可能啊，比如你选了钛合金门，还有70料，83料，85料，90料等等，不同的料价格不同也就是不同的SKU啊。所以这个操作肯定是不行的。

2. 两两组合

上面的操作当额外增加属性的时候就不行了，那么我们先解决这个问题。我们采用属性两两组合，也就是先让directions和colors组合成二维数组返回，再和materials组合。上代码！

结果如下：

再遍历一次分开就搞定。这种操作从时间复杂度可以看成O(N^2)，似乎解决了未知属性集合数量的拼装，但是始终不够优雅。我们继续往下思考！

3. 排列组合（递归回溯）

本来我打算自己贴代码，但是前几天看到一篇博文写的很好，这里大家可以看一下 @晨曦时梦见兮 老师的一篇博文，他写的已经非常仔细了。https://juejin.im/post/6844904191379374087。 如果晨曦的代码看着晕可以看下面每一行加注释的代码。

这里我把思路再整理一下：最终我们需要拼装成二维数组[["左锁内开","象牙白","实木"]、["右边内开","胡桃木","实木"]...]，那么我们的递归体就是去完成二维数组里面的每一项的拼装。 为了方便大家读我把每一行代码加了注释。大家在看代码的时候，不要硬看，要学会使用debug，同时也要有良好的js基础，高阶函数、闭包、递归等等。

总结

大家都是从小白慢慢的学习到能独挡一面的，只有非常厉害的人才能一下想到 递归回溯，借用 晨曦老师的话：我们可以先记住一些固定的模式，再从实际工作中去慢慢领会，同时夯实JS基础，多去尝试，萌新终究会变成别人眼中的大佬！再次感谢 @晨曦时梦见兮 老师的博文，帮我省了很多篇幅。

ps：文章来源于知了堂蛋糕哥。