--递归--recursive

最新推荐文章于 2024-01-25 20:05:11 发布

喵帕斯_喵太

最新推荐文章于 2024-01-25 20:05:11 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116429919

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

01-递归`recursive`

<body>
    <!-- 
        递归：recursive，是一种解决问题的方式
            问题特点：大问题里面有小问题，大问题与小问题的性质是一样的，但是规模较大
            解决方式
                1. 先找到最小的问题（不能再分解：文件夹里面没有文件夹）
                2. 先解决最小问题：文件夹里面的内容全部输出
                3. 回退上一级：用同样的方式解决当前层的问题（回到文件夹的上一层）

        
        代码中不适用：程序里面的递归，函数 内部 自己 调用 自己
            1. 写一个函数：解决最外层的问题（最大问题：20210411资料 文件夹）
            2，开始发觉问题：跟自己一样，但是规模较小的：调用自己去解决（较小问题：20210411资料\JS基础）
                * 递归点：发现性质一样，规模较小：调用自己去解决（参数代表的数据变小了）
                * 递归出口：函数什么时候不要再自己调用（当一个文件夹中没有文件夹了：结束）

        递归产生的特点（用空间换时间）
            1. 内存消耗多
            2. 时间可以减少
    -->

    <script>
        function fn() {
            //  递归：自己调用自己
            // 没有任何条件的递归：死递归，导致函数不断开辟内存，内存会爆（内存不够）：软件会卡死
            // fn()
        }

        fn()

        // 面试题
        // 有一只兔子，第一个月不能生兔子，第二个月也不能生兔子，第三个月开始每个月生一只兔子，请问到第10月到时候，总共有多少兔子
        // 1  1  2  3  5  8  13  21  34  55     斐波那契数列
        // 如果是100个月？电脑会卡死

        function fbnq(n) {
            // n代表第几个数（第几个月）
            // 递归出口：n == 1 || n == 2
            if (n == 1 || n == 2) return 1

            // 执行到这：n大于2
            return fbnq(n - 2) + fbnq(n - 1)
        }

        console.log(fbnq(10))
    </script>
</body>

02-递归-城市列表

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 城市信息
        const cities = [
            {
                "name": "广东",
                "children": [
                    {
                        "name": "广州",
                        "children": [
                            {
                                "name": "番禺"
                            },
                            {
                                "name": "广场",
                                "children": [
                                    {
                                        "name": "大同村",
                                        "children": [
                                            {
                                                "name": "菜市场"
                                            }

                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "name": "深圳",
                        "children": [
                            {
                                "name": "南山"
                            }
                        ]
                    }
                ]
            }
        ]

        // 1. 拿到body元素 
        // 2. 遍历cities
        // 3. 判定对象是否存在children
        // 4. 遍历数组中对象里面的children


        let body = document.body

        cities.forEach((item) => {
            console.log(item)
            // item是个对象：对象.name就是要的目标数据
            body.innerHTML += ` <div>${item.name}</div>`

            if (item.children) {
                item.children.forEach((item) => {
                    // console.log(item)
                    body.innerHTML += ` <div>${item.name}</div>`

                    if (item.children) {
                        item.children.forEach((item) => {
                            // console.log(item)
                            body.innerHTML += ` <div>${item.name}</div>`
                            if (item.children) {
                                item.children.forEach((item) => {
                                    // console.log(item)
                                    body.innerHTML += ` <div>${item.name}</div>`

                                    if (item.children) {
                                        item.children.forEach((item) => {
                                            // console.log(item)
                                            body.innerHTML += ` <div>${item.name}</div>`
                                        })
                                    }

                                })
                            }

                        })
                    }

                })
            }

        })
    </script>

</body>

</html>

03-递归-递归实现城市列表

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 城市信息
        const cities = [
            {
                "name": "广东",
                "children": [
                    {
                        "name": "广州",
                        "children": [
                            {
                                "name": "越秀"
                            },
                            {
                                "name": "番禺",
                                "children": [
                                    {
                                        "name": "广场",
                                        "children": [
                                            {
                                                "name": "地铁",
                                                "children": [
                                                    {
                                                        "name": "大前端"
                                                    }
                                                ]
                                            }

                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "name": "深圳",
                        "children": [
                            {
                                "name": "南山",
                                "children": [
                                    {
                                        "name": "南山必胜客"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]

        // 递归实现

        // 1. 写一个函数：接收一个参数（最大的数据）
        // 2. 不考虑层级：把最外层的内容解决掉（是数组：一定是为了遍历）

        // 函数可以遍历数组：将数组里面的第一层对象的name输出出来
        // 3. 对象有可能有children属性：children与cities一模一样：只是规模变小了
        // 递归点：children就是递归点，自己调用自己解决（传入的参数规模变小）

        function getCities(cities) {
            // cities是一个局部变量：跟外部暂时没有半点关系
            // console.log(cities)

            // 遍历数组
            for (let i = 0; i < cities.length; i++) {
                let city = cities[i]
                // console.log(city)

                // 对象有name属性
                document.body.innerHTML += `
                    <div>${city.name}</div>
                `

                // console.log(city.children)
                // 递归点
                if (city.children) {
                    // 有孩子：调用自己
                    getCities(city.children)
                }
            }

            // 隐式出口：数组遍历结束，里面的对象都没有children：遍历完就不会开启新的函数：递归出口
        }

        getCities(cities)

        // 递归
        // 递归好东西：可以省略代码，不限层级（数据可以动态修改：格式不能遍历）
        // 递归好归好：不是一听就懂，需要很多次的重复使用
        //          实际开发中：代码能写出来，但是不能理解（不影响开发）
    </script>
</body>

</html>

注意：
// 递归实现
// 1. 写一个函数：接收一个参数（最大的数据）
/ 2. 不考虑层级：把最外层的内容解决掉（是数组：一定是为了遍历）
// 函数可以遍历数组：将数组里面的第一层对象的name输出出来
// 3. 对象有可能有children属性：children与cities一模一样：只是规模变小了
// 递归点：children就是递归点，自己调用自己解决（传入的参数规模变小）

喵帕斯_喵太

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
--递归--recursive

01-递归recursive<body> <!-- 递归：recursive，是一种解决问题的方式问题特点：大问题里面有小问题，大问题与小问题的性质是一样的，但是规模较大解决方式 1. 先找到最小的问题（不能再分解：文件夹里面没有文件夹） 2. 先解决最小问题：文件夹里面的内容全部输出 3. 回退上一级：用同样的方式
复制链接

扫一扫