前端算法入门系列 --- （一）迎娶递归了解递归是什么，递归有什么特点，如何写递归，以及如何练习常见递归问题分析和解答。

一文章说明

看完能学到什么

了解递归是什么，递归有什么特点，如何写递归，以及如何练习常见递归问题分析和解答。

文章结构

本文采用是什么、为什么、怎么办的思路，从实例抽象出理论，再从理论讲解实例，最后动手实践，加深理解和认知。

二遇见递归 ~ 从害羞到牵手

进入主题

1 初遇递归 -- 基础概念

根据MDN的解释，递归是：一种函数调用自身的操作。用来处理包含有更小一类子问题的问题。

通俗解释：举个栗子：

举例一:

从前有座山，山上有座庙，庙里有一个老和尚和一个小和尚，老和尚在给小和尚讲故事，讲的是：从前有座山，山上有座庙，庙里有一个老和尚和一个小和尚，老和尚在给小和尚讲故事，讲的是：从前有座山，山上有座庙，庙里有一个老和尚和一个小和尚，老和尚在给小和尚讲故事，讲的是：……

                <p>
                    不够具体？再来一个栗子
                </p>
                <p>
                    举例二：
                </p>
                <p>
                    <br/>
                </p>
                <p>
                    <img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50f9b3522fe0450383cecc173afbc1e9~tplv-k3u1fbpfcp-zoom-1.image" data-ratio="1" alt="递归.jpg" data-w="1" style="width:auto;"/>
                </p>
                <p>
                    
                </p>
            </section>
        </section>
        <section class="box-edit">
            <section style="text-align: left;margin-top:10px;">
                <section style="display: inline-block; background-color: #ff8124; padding: 4px 10px; background-image: linear-gradient(116deg, #89f7fe, #66a6ff); color: #ffffff;"><h4 style="display:flex;justify-content: center;">
                        <section class="autonum" style="width:25px;height:25px;background-color: #fff;color:#333;text-align: center;line-height:24px;font-size:20px;border-radius:100%;" data-original-title="" title="">
                            2
                        </section>
                        <section class="135brush" data-brushtype="text" style="text-align: center;line-height:24px;font-size:16px;letter-spacing: 1.5px;margin-left:6px;">
                            整体印象 -- 递归特点<br/>
                        </section>
                    </h4>
                </section>
            </section>
            <section data-autoskip="1" class="135brush" style="font-size:14px;letter-spacing: 1.5px;text-align:justify;line-height:1.75em;padding:1em 0em;color: #333;">
                <p>
                    1）大问题可以转化为比较小的相似问题，并且解决大问题的方法和解决小问题的方法是同样的；
                </p>
         
                <p>
                    2）大问题中总能找到最小的重复单元，在每一个重复单元内，运行环境是独立的，不受其他单元影响。
                </p>
            </section>
        </section>
    </section>
</section>

3
深入了解 -- 如何写递归

递归的写法是有固定模板的，可以分为四大模块来说：第一块，递归结束条件；第二块，当前层的逻辑处理；第三块，子模块如何处理；第四块，当前层需要清理的逻辑。但通常，我们到第三层就return 了。

                </p>
                <p>
                    先举个简单的例子：数组的快速排序
                </p>
                <p>
                    <img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6008f71f2425469c815a716761c976c0~tplv-k3u1fbpfcp-zoom-1.image" data-ratio="1" alt="快速排序.JPG" data-w="1" style="width:auto;"/>
                </p>
                <p>
                    执行结果：
                </p>
                <p>
                    <img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/caad5d8ee69e4f389b31e11851e25ed3~tplv-k3u1fbpfcp-zoom-1.image" data-ratio="1" alt="捕获.JPG" data-w="1" style="width:auto;"/>
                </p>
                <p>
                    小结：
                </p>
                <p>
                    凡是递归，均可以按照上述模板思路编写代码，尤为强调的是，一定要先想好递归的退出条件，否则极有可能写出“死递归”。<br/>
                </p>
            </section>
        </section>
        <section class="box-edit">
            <section style="text-align: left;margin-top:10px;">
                <section style="display: inline-block; background-color: #d9f2f0; padding: 4px 10px; background-image: linear-gradient(116deg, #89f7fe, #66a6ff); color: #ffffff;">
                    <h4 style="display:flex;justify-content: center;">
                        <section class="autonum" style="width:25px;height:25px;background-color: #fff;color:#333;text-align: center;line-height:24px;font-size:20px;border-radius:100%;" data-original-title="" title="">
                            4
                        </section>
                        <section class="135brush" data-brushtype="text" style="text-align: center;line-height:24px;font-size:16px;letter-spacing: 1.5px;margin-left:6px;">
                            大胆尝试 -- 常见递归问题<br/>
                        </section>
                    </h4>
                </section>
            </section>
            <section data-autoskip="1" class="135brush _135editor" style="font-size:14px;letter-spacing: 1.5px;text-align:justify;line-height:1.75em;padding:1em 0em;color: #333;" data-role="list" data-color="rgb(137,">
                <section class="_135editor" data-role="list" data-color="rgb(137,">
                    <section class="_135editor" data-role="list" data-color="rgb(137,">
                        <ol style="list-style-type: decimal;" class="list-paddingleft-2">
                            <li>
                                <p>
                                    斐波那契数列
                                </p>
                            </li>
                            <section class="_135editor" data-role="list" data-color="rgb(137,">
                                <ol style="list-style-type: lower-alpha;" class="list-paddingleft-2">
                                    <li>
                                        <p>
                                            题目地址：<a href="https://leetcode-cn.com/problems/fibonacci-number/">https://leetcode-cn.com/problems/fibonacci-number/</a>
                                        </p>
                                    </li>
                                    <li>
                                        <p>
                                            代码截图
                                        </p>
                                        <p>
                                            <img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d1ccd16e459451ba126f7cb546574a6~tplv-k3u1fbpfcp-zoom-1.image" data-ratio="1" alt="捕获.JPG" data-w="1" style="width:auto;"/><br/>
                                        </p>
                                    </li>
                                </ol>
                            </section>
                            <li>
                                <p>
                                    爬楼梯
                                </p>
                            </li>
                            <section class="_135editor" data-role="list" data-color="rgb(137,">
                                <ol style="list-style-type: lower-alpha;" class="list-paddingleft-2">
                                    <li>
                                        <p>
                                            题目地址：<a href="https://leetcode-cn.com/problems/climbing-stairs/">https://leetcode-cn.com/problems/climbing-stairs/</a>
                                        </p>
                                    </li>
                                    <li>
                                        <p>
                                            <a href="https://leetcode-cn.com/problems/climbing-stairs/">代码截图</a>
                                        </p>
                                        <p>
                                            <a href="https://leetcode-cn.com/problems/climbing-stairs/"><img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5436ccf8e6f4935b9245629cffbf553~tplv-k3u1fbpfcp-zoom-1.image" data-ratio="1" alt="捕获.JPG" data-w="1" style="width:auto;"/></a>
                                        </p>
                                        <p>
                                            <a href="https://leetcode-cn.com/problems/climbing-stairs/"></a>
                                        </p>
                                    </li>
                                </ol>
                            </section>
                        </ol>
                    </section>
                </section>
            </section>
            <section class="_135editor" data-tools="135编辑器" data-id="99083" data-color="rgb(137,">
                <section style="background-color: #e9f7f8; border-top-left-radius: 15px; border-top-right-radius: 15px; color: #ffffff; margin: 10px auto; background-image: linear-gradient(116deg, #89f7fe, #66a6ff);">
                    <section style="padding:1em;background-image:url(https://bdn.135editor.com/files/images/editor_styles/8aea68d6e4cf5be337db4b8c2b2661e0.jpg);background-repeat: no-repeat;background-size:100%;background-position: bottom;">
                        <section data-autoskip="1" class="135brush" style="text-align: justify;letter-spacing: 1.5px;font-size:14px;line-height:1.75em;padding-bottom:1em;">
                            <p>
                                从上面的题目可以看出，一个复杂的题目实现起来却只用了很少的代码，关键在于如何分析题目，找到最小重复单元，抽象出每一个模块的处理逻辑，最终实现整体的功能。<br/>
                            </p>
                            <p>
                                <br/>
                            </p>
                            <p>
                                类似的问题很多，这里，推荐大家在leetCode官网针对性的连续，不要贪图数量，先针对递归专题练习，再刷其他的题目。链接在这里：<a href="https://leetcode-cn.com/problemset/algorithms/">https://leetcode-cn.com/problemset/algorithms/</a>
                            </p>
                        </section>
                    </section>
                </section>
            </section>
            <section class="_135editor" data-tools="135编辑器" data-id="99269" data-color="rgb(137,">
                <section style="margin: 10px auto;text-align: center;">
                    <section style="display: inline-block;">
                        <section class="assistant" style="display: flex;justify-content: flex-end;align-items: flex-end;">
                            <section class="assistant" style="width: 28%; height: 2px; background: #ff9d4f linear-gradient(116deg, #89f7fe, #66a6ff) repeat scroll 0% 0%; align-self: flex-end; margin-bottom: 5px; color: #ffffff;" data-width="28%"></section>
                        </section>
                        <section style="display: flex;justify-content: center;align-items: center;">
                            <section class="assistant" style="width:32px;margin-right: -25px;margin-top: -5px;flex-shrink: 0;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);">
                                <img class="assistant" style="width:100%;display:block;" src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27451380f7104c0a998181b0ab5c9bb2~tplv-k3u1fbpfcp-zoom-1.image" data-ratio="1.3448275862068966" data-w="29" data-width="100%"/>
                            </section>
                            <h3 class="135brush" data-brushtype="text" style="font-size: 16px; letter-spacing: 1.5px; padding: 6px 25px 6px 45px; background: #fff1e1 linear-gradient(116deg, #89f7fe, #66a6ff) repeat scroll 0% 0%; color: #ffffff; font-weight: bold;">
                                <span style="font-size: 24px;">三&nbsp; 写在文末</span><br/>
                            </h3>
                        </section>
                        <section class="assistant" style="display: flex;justify-content: flex-start;align-items: flex-start;">
                            <section class="assistant" style="width: 70%; height: 2px; background: #ff9d4f linear-gradient(116deg, #89f7fe, #66a6ff) repeat scroll 0% 0%; align-self: flex-end; margin-top: 5px; color: #ffffff;" data-width="70%"></section>
                        </section>
                    </section>
                </section>
            </section>
            <section class="_135editor" data-tools="135编辑器" data-id="94202">
                <section style="width: 96%;margin: 0px auto;" data-width="96%">
                    <section style="border: 2px solid #363838;border-radius:6px ;background: #d7fdfc;">
                        <section style="text-align: right;margin-top: -5px;margin-right: 10px;">
                            <section style="display: inline-block;width: 3em;">
                                <img class="assistant" style="width: 100%;display: block;" src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e429bb18cd2a4b40ad605002ded2c20c~tplv-k3u1fbpfcp-zoom-1.image" data-ratio="0.2916666666666667" data-width="100%" data-w="72"/>
                            </section>
                        </section>
                        <section style="padding:6px;">
                            <section style="border: 2px solid #363838;border-radius:6px ;background:#fefefe;">
                                <section class="135brush" data-brushtype="text" style="text-align: center;font-size:40px;padding:1em;letter-spacing:2px;">
                                    <p style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;">
                                        <span class="content">只写看得懂、有价值的技术文章</span>
                                    </p>
                                </section>
                            </section>
                        </section>
                    </section>
                </section>
            </section>
            <section data-role="paragraph" class="_135editor">
                <p>
                    <br/>
                </p>
            </section>
        </section>
    </section>
</section>