• 3、字符串重复、字符串方法、正则方法、正则实例、数组方法、数组4种去重方法、数组3种排序方法,虚拟DOM中的递归、深克隆中的递归、快速排序中的递归、react框架中的递归


    一、字符串重复
    1、对象法:以下面的例子为例,把一个字母作为对象的属性名,字母出现的次数作为属性值;进而比较属性值的大小。
    1:第一个括号对应的内容。
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    <body>
    <script>
      var str = 'SSSadsdccCCCAdkdkkkkDccdddaaaccCCsSSSSSs';
      function maxstr(str) {
        var obj = {};
        var maxNum = 0;
        var maxVal = "";
        for (var i = 0; i < str.length; i++) {
          var strNum = str.charAt(i).toLowerCase();
          if (obj[strNum]) {
            obj[strNum]++;
          } else {
            obj[strNum] = 1;
          }
        }
        for (var attr in obj) {
          if (obj[attr] > maxNum) {
            maxNum = obj[attr];
            maxVal = attr;
          } else if (obj[attr] == maxNum) {
            maxVal += attr
          }
        }
        return "出现次数最多的字母是:" + maxVal + ";次数是:" + maxNum
      }
      var valNum = maxstr(str);
      document.write(valNum);
    </script>
    </body>
    </html>
    2、排序法:以下面的例子为例,先对它们进行排序,再取出小分组和小分组被匹配的次数。
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    <body>
    <script>
    var str = 'SSSadsdccCCCAdkdkkkkDccdddaaaccCCsSSSSSs';
    function maxstr(str) {
      var maxNum = 0;
      var maxVal = "";
      str = str.split('').sort(function (a, b) {
          return a.localeCompare(b)
      }).join('');
      /*str = str.split('');
        str = str.sort(function (a, b) {return a.localeCompare(b)});
        str = str.join('');*/
      str.replace(/(w)1+/gi, function (totalRegexp,firstGroup) {//前面正则的意思是:"(w)"字符、"1"第1个括号、"+"1次到多次
        if (totalRegexp.length > maxNum) {
          maxNum = totalRegexp.length;
          maxVal = firstGroup;
        } else if (totalRegexp.length == maxNum) {
          maxVal += firstGroup;
        }
      });
      return "出现次数最多的字母是:" + maxVal + ",次数" + maxNum;
    }
    var valNum = maxstr(str);
    document.write(valNum);
    </script>
    </body>
    </html>
    
    二、字符串方法:
    1、charAt:通过索引获取字符,不存在时,返回空字符串
    2、subString:截取字符串(1)没有参数时,返回整个字符串(2)一个参数时,返回返回参数到末尾的字符串(3)两个参数时(m,n),返回索引m到索引n,不包括n;原字符串不变
    3、subStr:截取字符串(1)没有参数时,返回整个字符串(2)一个参数时,返回返回参数到末尾的字符串(3)两个参数时(m,n),返回从索引m开始的n个字符;原字符串不变
    4、slice:复制字符串(1)没有参数时或参数是0时,返回整个字符串(2)一个参数时,返回返回参数到末尾的字符串(3)两个参数时(m,n),返回从索引m到索引n,不包括n
    5、indexOf:返回字符在字符串中首次出现的位置索引,没出现返回-1
    6、split:把字符串按照指定的分隔符拆分成数组
    7、match:
    (1)加g,情形如下
    var reg=/(d)A(d)/g;
    var replaceBefore="000002223A45556A7888";
    var replaceAfter=replaceBefore.match(reg);
    console.log(replaceAfter);//结果为数组,每项分别为:大正则第1、2、3...次匹配到的内容;2)不加g,情形如下
    var reg=/(d)A(d)/;
    var replaceBefore="000002223A45556A7888";
    var replaceAfter=replaceBefore.match(reg);
    console.log(replaceAfter);//结果为数组,每项分别为:大正则第1次匹配到的内容、第1、2、3...个小分组匹配到的内容、索引、整个字符串;
    8、replace:
    两个字符串做参数时,旧字符串(第一个参数)被新字符串(第二个参数)取代;
    var replaceBefore='AAACCCAAAA';
    var replaceAfter=replaceBefore.replace("AA","E");
    console.log(replaceAfter);
    正则和回调函数作参数时,
    (1)加g,情形如下
    var reg=/(d)(d)(d)(d)(d)(d)(d)(d)/g;
    var replaceBefore='AAA_12345678_BBB_87654321_CCC';
    var i=0;
    var replaceAfter=replaceBefore.replace(reg,function(totalRegexp,A1,A2,A3,A4,A5,A6,A7,A8,firstIndex,totalString){
        i=i+1;
        console.log('"'+totalRegexp+'"是被大正则第'+i+'次匹配到的内容');
        console.log('"'+A1+'"是被第1个小正则匹配上的内容');
        console.log('"'+A2+'"是被第2个小正则匹配上的内容');
        console.log('"'+A3+'"是被第3个小正则匹配上的内容');
        console.log('"'+A4+'"是被第4个小正则匹配上的内容');
        console.log('"'+A5+'"是被第5个小正则匹配上的内容');
        console.log('"'+A6+'"是被第6个小正则匹配上的内容');
        console.log('"'+A7+'"是被第7个小正则匹配上的内容');
        console.log('"'+A8+'"是被第8个小正则匹配上的内容,以此类推');
        console.log('"'+firstIndex+'"是被大正则匹配到的内容的第1个字符在整个字符串中的索引');
        console.log('"'+totalString+'"是整个字符串,本轮匹配结束');
        console.log("==========");
        return '(我将取代第'+i+'次被大正则匹配到的内容)'
    });
    console.log(replaceAfter);
    //////////////////////////////////////////////////////////////////
    var reg=/(d)(d)(d)(d)(d)(d)(d)(d)/g;
    var replaceBefore='AAA_12345678_BBB_87654321_CCC';
    var i=0;
    var replaceAfter=replaceBefore.replace(reg,'$1');//大正则每次匹配到的内容,用该次第一个小分组的内容替换掉。
    console.log(replaceAfter);
    (2)不加g,情形如下
    var reg=/(d)(d)(d)(d)(d)(d)(d)(d)/;
    var replaceBefore='AAA_12345678_BBB_87654321_CCC';
    var i=0;
    var replaceAfter=replaceBefore.replace(reg,function(totalRegexp,A1,A2,A3,A4,A5,A6,A7,A8,firstIndex,totalString){
        i=i+1;
        console.log('"'+totalRegexp+'"是被大正则第1次匹配到的内容');
        console.log('"'+A1+'"是被第1个小正则匹配上的内容');
        console.log('"'+A2+'"是被第2个小正则匹配上的内容');
        console.log('"'+A3+'"是被第3个小正则匹配上的内容');
        console.log('"'+A4+'"是被第4个小正则匹配上的内容');
        console.log('"'+A5+'"是被第5个小正则匹配上的内容');
        console.log('"'+A6+'"是被第6个小正则匹配上的内容');
        console.log('"'+A7+'"是被第7个小正则匹配上的内容');
        console.log('"'+A8+'"是被第8个小正则匹配上的内容,以此类推');
        console.log('"'+firstIndex+'"是被大正则匹配到的内容的第1个字符在整个字符串中的索引');
        console.log('"'+totalString+'"是整个字符串,本轮匹配结束');
        console.log("==========");
        return '(我将取代被大正则第1次匹配到的内容)'
    });
    console.log(replaceAfter);
    (3)罕见用法
    var reg=/(d)(d)(d)(d)(d)(d)(d)(d)/;
    var replaceBefore='AAA_12345678_BBB_87654321_CCC';
    var replaceAfter=replaceBefore.replace(reg,'$1');//大正则第一次匹配到的内容,用第一个小分组的内容替换掉。
    console.log(replaceAfter);
    
    三、正则方法:
    1、test
    var replaceBefore='程序员:123';
    var reg=/d/;
    var replaceAfter=reg.test(replaceBefore);
    console.log(replaceAfter);
    2、exec:
    (1)加g,情形如下
    var reg=/(d)A(d)/g;
    var replaceBefore="000002223A45556A7888";
    var replaceAfter=reg.exec(replaceBefore);
    console.log(replaceAfter);//结果为数组,每项分别为:大正则第1次匹配到的内容、小分组第1、2、3...次匹配到的内容、索引、整个字符串;2)不加g,情形如下
    var reg=/(d)A(d)/;
    var replaceBefore="000002223A45556A7888";
    var replaceAfter=reg.exec(replaceBefore);
    console.log(replaceAfter);//结果为数组,每项分别为:大正则第1次匹配到的内容、小分组第1、2、3...次匹配到的内容、索引、整个字符串;;
    
    四、正则实例
    1、正则元字符
    (1)w:匹配数字、字母、下划线
    (2)W:匹配非数字、字母、下划线
    (3)
    :匹配换行符
    (4) .:匹配非换行符
    (5)s:匹配空白
    (6)S:匹配非空白
    (7) ^:匹配输入字符串的开始位置;在方括号中使用时,表示排除方括号中的所有字符
    (8) $:匹配输入字符串的结尾位置
    (9) *:匹配前面的子表达式0-n次 
    (10) +:匹配前面的子表达式1-n次
    (11) ?:匹配前面的子表达式0或1次
    (12)
    :匹配回车  
    (13)正则元字符的使用:MAC 
    var MACMatch=/^[A-Fa-f0-9]{2}(:[A-Fa-f0-9]{2}){5}$|^[A-Fa-f0-9]{2}(-[A-Fa-f0-9]{2}){5}$/,
    2、用正则封装解析方法(解析URL中的问号参数值以及HASH值) 
    function queryURLParameter(url) {
      var obj = {};
      var reg = /([^?=&#]+)=([^?=&#]+)/g;
      url.replace(reg, function () {
        obj[arguments[1]] = arguments[2];
      });
      reg = /#([^?=&#]+)/;
      if (reg.test(url)) {
        obj['HASH'] = reg.exec(url)[1];
      }
      return obj;
    }
    var str1="https://www.baidu.com/newspage/data/landingsuper?AAA=1111&BBB=222&CCC=333#1234";
    var abc1=queryURLParameter(str1);
    console.log("第1次输出:",abc1);
    3、用正则封装解析方法(HASH值) 
    function hashA(url){
      var reg=/#([^#&=?]+)/;
      if(reg.test(url)){
        return reg.exec(url)[1];
      }
    }
    var str2="https://www.baidu.com/newspage/data/landingsuper?AAA=1111&BBB=222&CCC=333#1234"
    var abc2=hashA(str2);
    console.log("第2次输出:"+abc2);
    4、用正则封装解析方法
    var ary=["","","","","","","","","",""];
    var str3="今年是2017年";
    var abc3=str3.replace(/d/g,function () {
    return ary[arguments[0]]
    });
    var abc4=str3.replace(/d/g,function (first) {
    return ary[first]
    });
    5、用正则封装解析方法
    /*正则匹配输出 我是[你的朋友]钱成*/
    var str4 = '我是<img src="haha.png" alt="你的朋友"/>钱成';
    var reg=/(.+)<(.+)t="(.+)"/>(.+)/;
    var AAA=reg.exec(str4);
    var abc4=AAA[1]+"["+AAA[3]+"]"+AAA[4];
    console.log("第4次输出:"+abc4);
    6、someNumber为数字,当它的小数位数少于number时,则保留原数字,否则四舍五入保留至小数number位
    function formatTime(someNumber, number) { 
      var lastNum = null;
      if (typeof someNumber == "number") {
        var strNum = someNumber.toString().match(/.d*/);
        if (strNum == null || strNum[0].length <= number + 1) {
          lastNum = someNumber;
        } else {
          lastNum = someNumber.toFixed(number);
        }
      }
      return lastNum;
    }
    console.log(formatTime(3.1283456, 2));
    console.log(formatTime(3.55, 3));
    console.log(formatTime(3, 3));
    6、择出汉字
    var str5 = '我是<img src="haha.png" alt="你的朋友"/>钱成';
    var reg5=/alt="(.+)"/;
    var lastStr5=reg5.exec(str5)[1];
    console.log("alt内部内容输出:"+lastStr5);
    
    五、数组的方法:
    var startResult=[1,3,5,7,9,0,2,4,6,8].sort(function(before,behind){
      return before-behind; 
    })
    console.log(startResult);
    var lastResult=[9,7,5,3,1,8,6,4,2,0].sort(function(before,behind){
      return (before-behind)*(-1); 
    })
    console.log(lastResult);
    1、push
    (1)作用:向数组末尾追加一项
    (2)参数:要添加的数组项(多项用逗号隔开)
    (3)返回值:新数组的长度
    (4)是否改变原数组:改变
    2、pop
    (1)作用:删除项数组末尾项
    (2)参数:没有参数
    (3)返回值:被删除的项
    (4)是否改变原数组:改变
    3、unshift
    (1)作用:向数组开头添加一项
    (2)参数:要添加的数组项(多项用逗号隔开)
    (3)返回值:新数组的长度
    (4)是否改变原数组:改变
    4、shift
    (1)作用:删除数组开头项
    (2)参数:没有参数
    (3)返回值:被删除的项
    (4)是否改变原数组:改变
    5、splice
    (1)作用:参数不同,作用不同,主要用来删除数组项
    (2)(3)参数与返回值:
    A、没有参数:原数组不变,返回空数组
    B、一个参数:从索引位置删除到末尾,返回被删除项构成的数组
    C、两个参数(n,m):从索引n删除m个,返回被删除项构成的数组
    D、三个参数(n,m,X): 从索引n删除m个,被删除项用X填补,返回被删除项构成的数组,
    (4)是否改变原数组:改变
    6、slice
    (1)作用:复制数组项
    (2)(3)参数与返回值:
    A、没有参数:原数组不变,返回整个数组
    B、一个参数:返回从索引位置到末尾,
    C、两个参数(n,m):返回索引n到m,不包含m
    (4)是否改变原数组:没有改变
    7、concat
    (1)作用:把多个数组拼接在一起
    (2)参数:要拼接的数组或字符串。如果是数组,就把数组里的每一项放到原数组的后面;如果是字符串,把字符串作为一项,放在原数组后面;克隆数组:ary.concat();ary.concat([]);
    (3)返回值:拼接好的数组
    (4)是否改变原数组:没有改变
    8、join
    (1)作用:把数组的每一项按照指定的分隔符拼接成字符串
    (2)参数:指定的分隔符,如果是空引号“”,就把每一项不加分割地放在一起
    (3)返回值:拼接好的字符串
    (4)是否改变原数组:没有改变
    另外:eval(),把字符串的引号去掉,并当作js代码运行,比如eval(“alert(1)”)
    9、reverse
    (1)作用:倒序数组
    (2)参数:不需要参数
    (3)返回值:倒序后的数组
    (4)是否改变原数组:改变
    10、sort
    (1)作用:按照指定规则排序
    (2)参数:A、一个参数,只能给一位数排序;B、回调函数为参数,如ary.sort(function(a,b){return a-b})为升序,即a>b且返回值>0或a<b且返回值<0时为升序
    (3)返回值:排好序的数组
    (4)是否改变原数组:改变
    11、indexOf
    (1)作用:获取数组项第一次在数组中出现的位置索引
    (2)参数:要判断的数组项
    (3)返回值:数组项的索引,没有该项返回-14)是否改变原数组:不变
    12、forEach
    (1)作用:循环遍历每一项,循环次数为数组相数
    (2)参数:匿名函数,匿名函数可以有三个参数
    (3)返回值:undefined
    (4)是否改变原数组:不变
    13、map
    (1)作用:循环遍历每一项,循环次数为数组相数
    (2)参数:匿名函数,匿名函数可以有三个参数
    (3)返回值:返回一个新数组,新数组的每一项是匿名函数每次执行后的返回值
    (4)是否改变原数组:不变
    14、find
    (1)作用:找出最先满足条件的那一项
    (2)参数:匿名函数,匿名函数可以有三个参数
    (3)返回值:最先满足条件的那一项
    (4)是否改变原数组:不变
    15、filter
    (1)作用:找出所有满足条件的项
    (2)参数:匿名函数,匿名函数可以有三个参数
    (3)返回值:所有满足条件的项组成的数组
    (4)是否改变原数组:不变
    16、every:方法用于检测数组的所有元素是否都满足指定条件,返回值为boolean。
    17、some:方法用于检测数组中是否有元素满足指定条件,返回值为boolean。 
    18、reduce:累加,将最后一次计算结果暴露出去;可以作为高阶函数,用于函数的compose。接受四个参数:初始值(或回调函数上1次的返回值),当前元素值,当前索引,调用 reduce 的数组
    (1)示例一
    var ary=[1,3,2,4,3,2];
    var aryTotal=ary.reduce(function (total,num) {
        return total+num;
    });
    console.log(aryTotal);
    (2)示例二
    var todos = [{
        score: 12,
        completed: true
    }, {
        score: 21,
        completed: false
    }, {
        score: 35,
        completed: true
    }, {
        score: 47,
        completed: true
    }, {
        score: 95,
        completed: false
    }];
    const totalScore = todos.reduce(function(total, item){
        return item.completed ? total + item.score : total
    },10000);
    console.log(totalScore);
    19、filter:过滤
    (1)示例一
    var aryOld = [1, 2, 3, 4, 5];
    var aryNew=aryOld.filter(function(item){
        return item > 3;
    });
    console.log(aryNew);
    (2)示例二
    var todos = [{
        score: 10,
        completed: true
    }, {
        score: 2,
        completed: false
    }, {
        score: 30,
        completed: true
    }, {
        score: 40,
        completed: true
    }, {
        score: 5,
        compelted: false
    }];
    var trueScore = todos.filter(function(item){
        return item.completed;
    });
    console.log(trueScore);
    20、find:查找
    (1)示例一
    var ary=[1, 5, 10, 15]
    ary.find(function(value) {  
    return value > 9;  
    }) // 10  2)示例二
    var studentAll = [
      {
        name: '张三',
        gender: '',
        age: 20
      },
      {
        name: '王小毛',
        gender: '',
        age: 20
      },
      {
        name: '李四',
        gender: '',
        age: 20
      }
    ];
    var studentOne=studentAll.find(function (ele) {
        return ele.age == 20
    });
    console.log(studentOne);
    21、ES6数组实例方法(在百度上搜"Array find",菜鸟教程的相关页面有该方法属于ES的第几个版本)
    (1)copyWithin()
    (2)find() 
    (3)findIndex() 
    (4)fill()
    (5)entries()
    (6)keys() 
    (7)values()
    (8)includes()
    (9)flat()
    (10)flatMap()
    22、数组是否有某项
    (1var ary=[1,2,3] if(2 in ary)
    (2var ary=[1,2,3] if(ary.indexOf(2)!=-1)
    
    六、数组4种去重方法
    1、新数组去重:重新构建一个新数组,遍历原数组的每一项,如果该项在新数组的索引为-1,则把该项添加到新数组中。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>新数组去重</title>
    </head>
    <body>
    <script>
        var ary = [21, 32, 32, 4, 5, 61, 61, 21, 4, 5, 61];
        var newAry=[];
        for(var i=0; i<ary.length; i++){
            if(newAry.indexOf(ary[i])===-1){
                newAry[newAry.length]=ary[i];
            }
        }
        document.write(newAry);
    </script>
    </body>
    </html>
    2、对象法数组去重:如果对象中没有这一项,给对象添加属性名和属性值,如果对象中已经有了,说明是重复的,直接在数组中删除这一项;
    <!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>对象法数组去重</title>
        </head>
        <body>
        <script>
    var ary = [21, 32, 32, 4, 5, 61, 61, 21, 4, 5, 61,61];
    var obj={};
    for(var i=0; i<ary.length; i++){
        var cur=ary[i];
        if(obj[cur]===cur){//说明重复了
            ary.splice(i,1);
            i--;
        }else{
            obj[cur]=cur;
        }
    }
    document.write(ary);
    </script>
    </body>
    </html>
    3、sort排序法去重:先用sort方法对数组进行排序,然后拿前一项与后一项进行比较,如果相等,则删除前一项,同时为了防止数组塌陷,下一次仍从该项开始比较。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>sort排序</title>
    </head>
    <body>
    <script>
        var ary = [21, 32, 32, 4, 5, 61, 61, 21, 4, 5, 61];
        ary.sort(function (a, b) {
            return a - b;
        });
        for (var i = 0; i < ary.length; i++) {
            if (ary[i] === ary[i + 1]) {
                ary.splice(i, 1);
                i--;
            }
        }
        document.write(ary);
    </script>
    </body>
    </html>
    4、双循环去重:第一个循环,依次取出数组的每一项A;第二个循环,从数组的A项开始,依次与A项进行比较,如果相等则删除,同时为了防止数组塌陷,下一次仍从该项开始比较。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>双循环去重</title>
    </head>
    <body>
    <script>
        var ary = [21, 32, 32, 4, 5, 61, 61, 21, 4, 5, 61];
        for (var i = 0; i < ary.length; i++) {
            var cur = ary[i];
            for (var j = i + 1; j < ary.length; j++) {
                if (cur === ary[j]) {
                    ary.splice(j, 1);
                    j--;
                }
            }
        }
        document.write(ary);
    </script>
    </body>
    </html>
    
    七、数组3种排序方法
    //1、冒泡排序(目标:实现升序排列)
    var ary1 = [5, 4, 3, 2, 1];
    function bubbleSort(ary1) {
      for (var i = 0; i < ary1.length - 1; i++) {
        //正在进行第几次循环
        for (var j = 0; j < ary1.length - i - 1; j++) {
          //本次循环需要执行几次
          if (ary1[j] > ary1[j + 1]) {
            var tmp = ary1[j];
            ary1[j] = ary1[j + 1];
            ary1[j + 1] = tmp;
          }
        }
        console.log(ary1);
      }
      return ary1;
    }
    bubbleSort(ary1);
    //2、插入排序(目标:实现升序排列)
    var ary2 = [50, 40, 30, 20, 10];
    function insertSort(ary2) {
      var left = ary2.splice(0, 1);
      for (var i = 0; i < ary2.length; i++) {
        //正在进行第几次循环
        var ary2Ary = ary2[i];
        for (var j = left.length - 1; j >= 0; ) {
          //本次循环需要执行几次
          var leftAry = left[j];
          if (ary2Ary < leftAry) {
            j--;
            if (j === -1) {
              left.unshift(ary2Ary);
            }
          } else {
            left.splice(j + 1, 0, ary2Ary);
            break;
          }
        }
      }
      return left;
    }
    console.log(insertSort(ary2));
    //3、快速排序(目标:实现升序排列)
    var ary3 = [500, 400, 300, 200, 100];
    function quickSort(ary3) {
      if (ary3.length <= 1) {
        return ary3;
      }
      var num = Math.floor(ary3.length / 2);
      var numValue = ary3.splice(num, 1)[0];
      var left = [];
      var right = [];
      for (var i = 0; i < ary3.length; i++) {
        var cur = ary3[i];
        if (cur < numValue) {
          left.push(cur);
        } else {
          right.push(cur);
        }
      }
      return quickSort(left).concat([numValue], quickSort(right));
    }
    console.log(quickSort(ary3));
    
    //递归前,从外向里执行一部分。递归后,从里向外执行另一部分。
    //一个完整的递归包含多次完整的执行,只需研究第1和第2次执行。
    //其中第2次执行逻辑用最后1次执行逻辑代替,以方便理解。
    //实际上,第2次执行结果与第1次执行结果更相似。
    
    八、虚拟DOM中的递归
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>创建一个虚拟DOM实例</title>
      <style>
        .list {
          color: green;
          font-size: 30px;
        }
      </style>
    </head>
    <body>
      <div>
        <div>创建一个虚拟DOM实例</div>
      </div>
      <script>
        function Element(obj) {
          this.tagName = obj.tagName;
          this.props = obj.props || {};
          this.children = obj.children || [];
        }
        Element.prototype.render = function () {
          var el = document.createElement(this.tagName);
          var props = this.props;
          for (propName in props) {
            propValue = props[propName];
            el.setAttribute(propName, propValue);
          }
          this.children.forEach(function (child) {
            var elemChild = null;
            if (child instanceof Element) {
              elemChild = child.render();//从外向里逐个折回。看最后一次递归执行时,发生了什么。
            } else {
              elemChild = document.createTextNode(child);//最后一次递归执行时,要经过这里。
            }
            el.appendChild(elemChild);//从里向外逐个添加。
          });
          return el;
        };
        var elem = new Element({
          tagName: 'ul',
          props: { 'class': 'list' },
          children: [
            new Element({
              tagName: 'li',
              children: [
                new Element({ tagName: 'span', children: ['我是span1','我是span1','我是span1--'] }),
                new Element({ tagName: 'span', children: ['我是span2','我是span2','我是span2'] })
              ]
            }),
            new Element({ tagName: 'li', children: ['我是span3','我是span3','我是span3',] })
          ]
        });
        var elemSelf = elem.render();
        document.querySelector('body').appendChild(elemSelf);
      </script>
    </body>
    </html>
    
    九、深克隆中的递归
    //{ }.toString.call也可以用Object.prototype.toString.call代替
    function isArray(value) { return {}.toString.call(value) === "[object Array]"; }
    function isObject(value) { return {}.toString.call(value) === "[object Object]"; }
    function deepClone(arrayOrObject) {
      var target = null;
      if (isArray(arrayOrObject)) target = [];
      if (isObject(arrayOrObject)) target = {};
      for (var key in arrayOrObject) {
        var value = arrayOrObject[key];
        if (isArray(value) || isObject(value)) {
          target[key] = deepClone(value);
        } else {
          target[key] = value;
        }
      }
      return target;
    }
    var cloneBefore = { a: 1, b: { c: 3 }, d: { e: [1, 2] } };
    var cloneAfter = deepClone(cloneBefore);
    console.log(cloneAfter);
    
    十、快速排序中的递归
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>快速排序</title>
    </head>
    <body>
    <script>
        var ary=[21,8,4,32,5];
        function quickSort(ary){
            if(ary.length<=1){
                return ary;
            }
            var num=Math.floor(ary.length/2);
            var numValue=ary.splice(num,1)[0];
            var left=[];
            var right=[];
            for(var i=0; i<ary.length; i++){
                var cur=ary[i];
                if(cur<numValue){
                    left.push(cur);
                }else{
                    right.push(cur);
                }
            }
            return quickSort(left).concat([numValue],quickSort(right));
        }
        document.write(quickSort(ary));
    </script>
    </body>
    </html>
    
    十一、react框架中的递归
    var define, module, exports;
      return (function outerFn(first, second, third) {
        function recursion(number) {
          if (!second[number]) {
            if (!first[number]) {
              var error = new Error("Cannot find module '" + number + "'");
              throw error.code = "MODULE_NOT_FOUND", error
            }
            var module = second[number] = {
              exports: {}
            };
            first[number][0].call(module.exports, function (key) {
              var value = first[number][1][key];
              return recursion(value ? value : key)
            }, module, module.exports, outerFn, first, second, third)
          }
          return second[number].exports
        }
        for (var number = 0; number < third.length; number++) recursion(third[number]);
        return recursion
        //以上两行可以合并为下面一行
        //return recursion(third[0]); 
        //同时下面的"(48)" 应当删掉 
      })({ 2: [function (_dereq_, module, exports) { console.log(_dereq_) }, { "25": 25, "30": 30 }], }, {}, [16])(16)
     
  • 相关阅读:
    C#与数据库访问技术总结(十四)之DataAdapter对象
    《运维三十六计》:运维生存宝典
    企业运维几百个重点面试题汇总(老男孩)
    5、KVM虚拟化典型案例:生产环境问题案例与分析
    Linux运维必会的实战编程笔试题(19题)
    面试中常见的 MySQL 考察难点和热点
    Linux系统运维常见面试简答题(36题)
    一键备份脚本 backup.sh
    Linux常用的200个命令总结分类
    2、KVM虚拟化CPU、内存、网络、磁盘技术及性能调优方法
  • 原文地址:https://www.cnblogs.com/gushixianqiancheng/p/10966978.html
Copyright © 2020-2023  润新知