递归

递归的定义

递归函数：一个函数自己调用自己

示例代码如下:

  //一个函数递归
        // function fn(){
        //     console.log('哈哈');
        //     fn();
            
        // };

        // fn();

        //两个函数递归
        // function fn1(){
        //     console.log('哈哈');
        //     fn2();
            
        // };

        // function fn2(){
        //     console.log('呵呵');
        //     fn1();
            
        // };
        // fn2();

死循环,不要轻易尝试哦~

递归的特点

递归特点

a. 能用递归实现的功能一定可以用循环，只是语法不同

b. 递归一定要有结束的条件，否则会导致死循环

示例代码如下:

  //需求：写一个函数，打印三次 我爱敲代码

        let i = 1;
        function fn(){
            console.log('我爱敲代码');
            i++;
            if(i <= 3){
                fn();
            };
            
            //循环实现
            // for(let i = 1;i<=3;i++){
            //     console.log('我爱敲代码');
                
            // };
        };

        fn();

最简单的递归案例应用

三级导航案例代码示例如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .menu p {
        width: 100px;
        border: 3px solid;
        margin: 5px;
      }

      .menu > div p {
        margin-left: 10px;
        border-color: red;
      }

      .menu > div > div p {
        margin-left: 20px;
        border-color: green;
      }

      .menu > div > div > div p {
        margin-left: 30px;
        border-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="menu">
      <!-- <div>
        <p>第一级菜单</p>
        <div>
          <p>第二级菜单</p>
          <div>
            <p>第三级菜单</p>
          </div>
        </div>
      </div> -->
    </div>
    <script>
      //服务器返回一个不确定的数据结构,涉及到多重数组嵌套
      let arr = [
        {
          type: '电子产品',
          data: [
            {
              type: '手机',
              data: ['iPhone手机', '小米手机', '华为手机']
            },
            {
              type: '平板',
              data: ['iPad', '平板小米', '平板华为']
            },
            {
              type: '智能手表',
              data: []
            }
          ]
        },
        {
          type: '生活家居',
          data: [
            {
              type: '沙发',
              data: ['真皮沙发', '布沙发']
            },
            {
              type: '椅子',
              data: ['餐椅', '电脑椅', '办公椅', '休闲椅']
            },
            {
              type: '桌子',
              data: ['办公桌']
            }
          ]
        },
        {
          type: '零食',
          data: [
            {
              type: '水果',
              data: []
            },
            {
              type: '咖啡',
              data: ['雀巢咖啡']
            }
          ]
        }
      ]

      /* 使用递归遍历数组 */
      //封装一个遍历DOM树的函数
      function addElement (arr, father) {
        //遍历数组
        for (let i = 0; i < arr.length; i++) {
          //(1)创建空标签
          let div = document.createElement('div')
          //(2)设置内容
          div.innerHTML = `<p>${arr[i].type || arr[i] }</p>`
          //(3)新增到页面
          father.appendChild(div)
         
          if( arr[i].data ){

            addElement(arr[i].data,div)
          }
        }
      }

      //调用递归函数
      addElement(arr,document.querySelector('.menu'))
    </script>
  </body>
</html>