javascript-return、回调和递归

最新推荐文章于 2022-12-28 08:40:35 发布

Pluto,

最新推荐文章于 2022-12-28 08:40:35 发布

阅读量529

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_43796123/article/details/110699261

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

javascript-return、回调和递归

1.return

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div id="div1"></div>
    <script>
      /* 
            1、跳出函数，不再执行函数后面的语句
            2、返回数据，但是仅能返回一个数据
        
        
         */
      // function fn(){
      //     var a=10;
      //     if(a>10){
      //         return true;
      //     }else if(a===10){
      //         return 1;
      //     }else{
      //         return "aaa";
      //     }
      // }

      //    var a=fn();//默认返回undefined
      //    console.log(a);

      //      function fn1(f){
      //          return f();
      //      }

      //      function fn2(){
      //          return 5;
      //      }

      //    var s=fn1(fn2);
      //      console.log(s);

      // ~function fn(){
      //       console.log("aaa");
      //   }();

      // console.log(fn());

      // 返回一个数据
      // function fn(){
      //     return 1;
      // }

      // 工厂模式   纯函数
      // 纯函数 函数中仅使用外部给入参数，其他外部变量或者内容不使用
      // 并且不能引起其他外部内容的副作用
      // function fn(a,b){
      //     var obj={a:a,b:b};
      //     obj.c=a+b;
      //     return obj;
      // }

      // var o=fn(3,5);
      // var o1=fn(3,5);
      // console.log(o,o1);

      // 解耦  解除耦合

      // 单例  唯一的实例
      //   var o;
      //   /* function fn(){
      //                   if(o===undefined){
      //                       o={a:1};
      //                   }
      //                   return o;
      //               } */
      //   function fn() {
      //     o = o || { a: 1 };
      //     return o;
      //   }

      //   var o1 = fn();
      //   console.log(o1);
      //   var o2 = fn();
      //   console.log(o2);
      //   console.log(o1 === o2);

      //返回通过参数带入的对象
      //   function fn(o){
      //       o.b=2;
      //       return o;
      //   }
      //   var obj={a:1};
      // var o1=fn(obj);
      // console.log(o1);

      // 返回回调函数的结果
      //      function fn1(f){
      //          return f();
      //      }

      //      function fn2(){
      //          return 5;
      //      }

      //    var s=fn1(fn2);
      //      console.log(s);

      // 返回一个私有值
      // function fn(){
      //     var a=10;
      //     return a;
      // }

      // var a=fn();

      // 返回一个数组或者一个对象
      /*  function fn(a,b){
            return {
                s1:a+b,
                s2:a-b,
                s3:a*b,
                s4:a/b,
            }
        }

        function fn(a,b){
           return [a+b,a-b,a*b,a/b];
        }

        console.log(fn(10,20)) */
      function fn(a, b) {
        return { a: a + b, b: a - b, c: a * b, d: a / b };
      }
      console.log(fn(1, 2));
      /* function fn(){
            return function(){
                console.log("aaa");
            }
        } */

      // function fn(){
      //    function a(){

      //    }
      //    return a;
      // }

      // var f=fn();
      // f();

      // 跳出
      /* 
            var div1,x=0,bool=false;
            init();
            function init(){
                div1=document.getElementById("div1");
                div1.οnclick=clickhandler;
                setInterval(animation,16);
            }
            

            function clickhandler(){
                bool=!bool;
            }

            function animation(){
                if(!bool) return;
                x++;
                div1.style.left=x+"px";
            } */
      var x = 0;
      var bool = true;
      operate();
      function operate() {
        var div1 = document.getElementById("div1");
        div1.addEventListener("click", stop);
        setInterval(move, 16);
      }
      function stop() {
        bool = !bool;
      }
      function move() {
        if (!bool) return;
        div1.style.left = x++ + "px";
      }
      var arr = [
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十",
      ];
      function getNumberToCN(num) {
        if (num < 0 && num > 99) return "不符合条件";
        if (num < 11) return arr[num];
        if (num >= 11 && num < 20) return "十" + arr[num % 10];
        if (num % 10 === 0) return arr[num / 10] + "十";
        if (num > 20) return arr[parseInt(num / 10)] + "十" + arr[num % 10];
      }
      console.log(getNumberToCN(10));

      // function fn(state,a,b){
      //     state=parseInt(state);
      //     if(state<0 || state >5) return {};
      //     var obj={};
      //     obj.s1=a+b;
      //     if(state===1) return obj;
      //     obj.s2=a-b;
      //     if(state===2) return obj;
      //     obj.s3=a*b;
      //     if(state===3) return obj;
      //     obj.s4=a/b;
      //     if(state===4) return obj;
      //     obj.s5=a%b;
      //     return obj
      // }

      // console.log(fn(5,4,5));
    </script>
  </body>
</html>

2.回调

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="bn">按钮</button>
    <script>
      // 回调
      /* 
            回调：
            1、将一个函数做为另一个函数的参数传入
            2、在另一个函数中执行参数是函数的方法
           在回调函数中this将会发生改变，this---》window

           使用回调的原因
           1、当执行函数需要在一定事物处理之后或者一段时间之后，或者某种事情触发之后
           2、因为回调函数不关心具体执行的函数是谁，因此可以做为不同插槽完成不同调用需求
        
         */
      /*  function fn1(f){
            f();
        }

        function fn2(){
            console.log("aaa");
        }

        fn1(fn2) */

      /* var arr=[];
        function fn1(f,sum){
            for(var i=1;i<parseInt(sum/2);i++){
                    f(i,sum-i);
            }
            console.log(arr);
        }

        function fn2(a,b){
            arr.push(a*b);
        }
        function fn3(a,b){
            arr.push(a/b);
        }

        fn1(fn3,26); */

      //过段时间处理的回调函数
      // setInterval(fn1,1000);

      // function fn1(){
      //     console.log("aaa");
      // }

      /*   var bn=document.getElementById("bn");
        bn.addEventListener("click",clickHandler);

        function clickHandler(){
            console.log("aaa");
        } */

      /*   function fn(a,b,c){
            a();
            b();
            c();
        }

        function fn1(){
            console.log("红灯");
        }
        function fn2(){
            console.log("绿灯")
        }
        function fn3(){
            console.log("黄灯");
        }

        fn(fn1,fn3,fn2); */

      // 1000毫秒后调用回调函数
      // var id=setTimeout(function(){
      //     console.log("aaa");
      //     clearTimeout(id);//清除时间间隔造成内存泄漏
      // },1000);

      //   var timeout = setTimeout(function () {
      //     console.log("aaaaaaa");
      //     clearTimeout(timeout);
      //   }, 5000);
      //   /* var num=0;
      //     var id=setInterval(function(){
      //         num++;
      //         if(num>3){
      //             clearInterval(id);//清除时间间隔，不再触发函数的回调
      //             return;
      //         }
      //         console.log("aaa");
      //     },1000); */
      //   var num = 0;
      //   var id = setInterval(function () {
      //     num++;
      //     if (num > 3) {
      //       clearInterval(id);
      //       return;
      //     }
      //     console.log("aaaa");
      //   }, 3000);
      //   /*  function test(){
      //         for(var i=0;i<5;i++){
      //             setTimeout(function(i){
      //                 console.log(i);
      //             },1000*i,i);
      //         }
      //         console.log(i);
      //     }

      //     test(); */
      //   ~(function test() {
      //     for (var i = 0; i < 5; i++) {
      //       setTimeout(
      //         function (i) {
      //           console.log(i);
      //         },
      //         1000 * i,
      //         i
      //       );
      //     }
      //   })();
      //   var clear;
      //   function redLight(a, b, time) {
      //     console.log("红灯");
      //     clearTimeout(clear);
      //     clear = setTimeout(a, time, b, arguments.callee, time);
      //   }
      //   function greenLight(a, b, time) {
      //     console.log("绿灯");
      //     clearTimeout(clear);
      //     clear = setTimeout(a, time, b, arguments.callee, time);
      //   }
      //   function yellowLight(a, b, time) {
      //     console.log("黄灯");
      //     clearTimeout(clear);
      //     clear = setTimeout(a, time, b, arguments.callee, time);
      //   }
      //   function showLight(l1, l2, l3) {
      //     l1(l2, l3, 16);
      //   }
      //   showLight(redLight, greenLight, yellowLight);
      // 回调循环
      var num = 0;
      function fn1(f) {
        if (num < 10) f(fn1);
        console.log(num);
      }

      function fn2(f) {
        num++;
        f(fn2);
        // console.log("bbb");
      }

      fn1(fn2);
    </script>
  </body>
</html>

3.递归

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
            递归，函数自身在内部调用当前自身函数


         */
      // function fn(f){
      //     fn();//递归
      //     f();//回调
      //     fn2();//调用函数
      // }

      // function fn1(){

      // }
      // function fn2(){

      // }

      // fn(fn1);

      /* function fn(a){
            if(a===undefined) a=0;
            a++;                        //a=1
            if(a>3) return;
            fn1(a);                     //fn(1)
            console.log(a);
        }


        function fn1(a){                //fn(1)
            if(a===undefined) a=0;
            a++;                       //a=2
            if(a>3) return;
            fn2(a);                     //fn2(2)
            console.log(a);
        }

        function fn2(a){               // fn2(2)
            if(a===undefined) a=0;
            a++;                        //a=3
            if(a>3) return;
            fn3(a);                     //fn3(3)
            console.log(a);
        }
        function fn3(a){
            if(a===undefined) a=0;      //a=4
            a++;
            if(a>3) return;

        }
        fn(); */

      /* function fn(a) {
        if (a === undefined) a = 0;
        a++; //a=1
        if (a > 3) return a; //
        a = fn(a); //a=2 a=3 a=4
        console.log(a); //
        return a;
      }
      var a = fn(); */
      //   console.log(a);

      // 0,1,1,2,3,5,8,13,21

      // 斐波那切数列
      /*  function fn(max,n,m,s){
          if(s===undefined) s=0;
          if(n===undefined) n=0;
          if(m===undefined) m=1;
          s+=m;
          if(m+n<max) return fn(max,m,m+n,s);
          return s;
      }

      var sum=fn(100);
      console.log(sum); */
      /* function fn(max, m, n, s) {
        if (m === undefined) m = 0;
        console.log("m="+m)
        if (n === undefined) n = 1;
        console.log("n="+n)

        if (s === undefined) s = 0;
        console.log("s="+s)

        s += n;

        console.log("s+="+s)

        if (m + n < max) return fn(max, n, m + n, s);
        return s;
      }
      console.log(fn(100)); */

      //   var s=0;
      //   function fn(n,m){
      //       s+=m;
      //       if(m+n<100) fn(m,m+n);
      //   }
      //   fn(0,1);
      //   console.log(s);

      // 递归次数不能过多，否则会堆栈上限溢出
      // var s=0;
      // function fn(){
      //     s++;
      //     if(s<12000) fn();
      // }
      // fn();
      /* var obj = { a: 1, b: { c: 2, d: { e: 3, f: { g: 4, h: { i: null } } } } };
      console.log(obj);
      function fn(obj) {
        for (var prop in obj) {
          console.log(typeof obj);
          if (typeof obj[prop] === "object") {
            fn(obj[prop]);
          } else {
            console.log(obj[prop]);
          }
        }
      }
      fn(obj); */
      /*  va
      r obj={
            a:1,
            b:2,
            c:{
                a:3,
                b:4,
                c:{
                    a:5,
                    b:6,
                    c:{
                        a:7,
                        b:8,
                        c:{
                            a:9,
                            b:10,
                        }
                    }
                }
            }
        }


       function fn(o){
          for(var prop in o){
              if(typeof o[prop]==="object"){
                  fn(o[prop]);
              }else{
                  console.log(o[prop]);
              }
          }
       }

       fn(obj); */
      //遍历二叉树
      var tree = {
        value: 1,
        left: {
          value: 2,
          left: { value: 4, left: { value: null }, right: { value: null } },
          right: { value: 5, left: { value: null }, right: { value: null } },
        },
        right: {
          value: 3,
          left: { value: 6, left: { value: null }, right: { value: null } },
          right: { value: 7, left: { value: null }, right: { value: null } },
        },
      };
      function fn(obj) {
        /* for (var prop in obj) {
          // console.log(prop)
          // console.log(obj[prop])
          // console.log(typeof obj[prop])
          if (typeof obj[prop] === "object") {
            fn(obj[prop]);
          } else {
            console.log(obj[prop]);
          }
        } */
        // console.log(obj.left);
        if (obj.left) fn(obj.left);
        // console.log(obj.right);
        if (obj.right) fn(obj.right);
        console.log(obj.value);
      }
      fn(tree);
      /*
       var tree={
           value:1,
           left:{
              value:2,
              left:{
                 value:4
              },
              right:{
                  value:5
              }
           },
           right:{
              value:3,
              left:{
                 value:6
              },
              right:{
                 value:7
              }
           }
       }

       function fn(o){
         if(o.left) fn(o.left);
         if(o.right) fn(o.right);
         console.log(o.value);
       }
       fn(tree); */
    </script>
  </body>
</html>