JS代码

1. 防抖
2. 节流
3. 去重
4. 浅拷贝
5. 深拷贝
6. 构造函数继承、原型继承、组合继承
7. promise封装ajax
8. promise函调函数
9. 闭包
10. 三秒后打印所有li（利用闭包）
11. 单列模式
12. 闭包隔一秒打印
13. instanceoof

1.防抖：一段时间内只执行一次，如果有再次触发，重新计算时间（技能读条）

    <script>
      var timer = false;
      document.getElementById('lkq').onclick = function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
          console.log('防抖');          
        },300)
      }

2.节流：一段时间执行一次。

    <script>
     var t = true;
     document.getElementById('lkq').onclick(function(){
       if(!t){
         return;
       }
       t = false;
       setTimeout(function(){
         console.log('节流');
         t = true;
       },300)
     })
    </script>

3.去重

      var s = [1,2,3,4,5,5,6,6];
      for(var i = 0;i<s.length;i++){
           if(ans.indexOf(s[i])===-1){
             ans.push(s[i]);
           }
      }

4.浅拷贝

    var old = {
        x:1,
    };
    var xin ={};
    for(var k in old){
       //k是key,如x
       xin[k]=old[k];
    }

5.深拷贝

   var old = {
      b:1,
      array:['a','b'],
      h:{
        age:18
      }
   };
   var xin=[];
   function fn(xin,old){
      for(var k in old){
        var t = old[k];
        if(t instanceof Array){
          xin[k] = [];
          fn(xin,t);
        }else if(t instanceof Object){
          xin[k]={};
          fn(xin,t);
        }else{
          xin[k]=t;
        }
      }
   }
   fn(xin,old);

6.构造函数继承
1.无法函数复用
2.只能继承构造函数，不能继承函数原型

    function f(name,age){
        this.name = name;
        this.age = age;
    }
    function s(){
      f.call(this,'erzi','1');   
    }
    var father = new f('lkq',5);
    var son = new s();
    console.log(son.name);
    console.log(son.age);    

6.2原型链继承
1.无法传参
2.父子属性一起改变，需要用son的prototype的construor指回son
3.son.prototype.constructor=son;

    function father(name,age){
       this.name=name;
       this.age=age;
    }
    father.prototype.sex='nan';
    function son(){

    }
    son.prototype = new father();
    var S = new son();
    console.log(S.sex);

6.3.组合继承可以传参和复用。

    function father(name){
       this.name=name;
    }
    father.prototype.sex='nan';
    function son(name,age){
        father.call(this,name);
    }
    var f = new father('lkq');
    son.prototype = new father();
    var S = new son('gar');//只是继承了属性
    console.log(S.name);//gar
    console.log(S.sex);//nan

7.promise封装ajax

    var p = new Promise(function(reslove,reject){
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){
        if(xhr.readyState !== 4 ) return;
        if(xhr.readyState==4&&xhr.status === 200){
          reslove(xhr.response);
        }else{
          reject('f服务器错误');
        }
      };
      xhr.open('get',url);
      xhr.send(null);  
    })

8.promise回调函数

    var p = new Promise(function(reslove,reject){
       setTimeout(function(){
          var flag = true;
          if(flag){
            console.log('hello');            
          }else{
            reject('出错了');
          }
       },100)
    })
    p.then(function(data){},function(){})

9.闭包

     for (var i = 0; i < lis.length; i++) {
        (function(i){})(i);
        setTimeout(function(){},3000)
}

10.三秒后打印所有li（利用闭包）

     for (var i = 0; i < lis.length; i++) {
         (function(){
           setTimeout(function(){
               consoloe.log(lis[i].innerHTML);
           },3000)
         })(i);

11.单例模式

     class Single{

     }
     function fn(){
       var obj;
       return function(){
         if(!obj){
            instance = new Single();
         \
         
       }
     }

12.隔一秒打印

    for(let i = 0;i<4;i++){
       setTimeout(function(){
         console.log(i);
       },i*1000)
    }
===============
    for(var i=0;i<4;i++) {
      (function(i){
        setTimeout(function(){
          console.log(i);
        },1000*i)
      })(i)
    }

13.instanceof
判断构造函数原型对象是否在实例对象原型链上。

  <script>
   function fn(Father,Son){
     var prototype = Father.pro;
     var proto = Object.getPrototypeOf(Son);
     while(true) { 
         if(!proto) return false;
         if(proto === prototype){
            return true;
         }
         proto = Object.getPrototypeOf(proto);
     }
   }
</script>

14原生ajax

  <script>
    function ajax(options) {
        var defaults = {
            type = 'get',
            url = '',
            data = {},
            header = {
                'Content-Type':'application/x-www-form'
            }
        };
        // 用户传了就是用户的，没传就用defaults的
        // 覆盖
        Object.assign(defaults,options);
        // 1.创建ajax对象
        var xhr = new XMLHttpRequest();
        xhr.open(defaults.type,defaults.url);
        var str = '';
        for (var k in defaults.data) {
            str+=k + '=' +defaults.data[k]+'&';
        }
        // 将最后一个&截取
        str.substr(0,str.length-1);
        // 判断请求方式
        if(defaults.type == 'get'){
            defaultss.url = options.url + '?' + str;
        }
        //2.发送请求
        if(defaults.type == 'post'){
            var contentType = defaults.header['Content-type']
            xhr.setRequestHeader('Content-Type','options.header');
            // 判断是否为json
            if(contentType == 'application/json'){
                xhr.send(JSON.stringfy(options.data));
            }else {
                xhr.send(str);
            }
        }else{
            xhr.send();
        }
        // 3.当xhr对象接收完响应数据后触发
        xhr.onload = function() {
            // 获取响应头的数据
            var contentTypr = xhr.getResponseHeader('content-Type');
            // 如果响应类型包含application/json
            if(contentType.includes('application/json')){
                // 将json字符串转化为json对象
                responseText = JSON.parse(responseText);
            }
            // 如果失败
            if(xhr.status == 200){
                defaults.success(xhr.responseText,xhr);    
            }else{
                defaults.error(xhr.responseText,xhr); 
            }  
        }
    }
    ajax({
        // 对象
        // 请求方式
        // type:'get',
        //请求地址
        url:'http://localhost:3000/first',
        // data: {
        //    name: 'zhangsan',
        //    age: '20'
        // },
        // header: {
        //     'Content-Type':'application/json'
        // },
        success: function(data){
            console.log('这里是success函数'+ data);                
        },
        // error: function(data){
        //     console.log('这里是error函数'+ data);
        //     console.log('xhr');
        // }
    });
</script>

15.闭包菲薄那些数列

15.`var fib = (function() {//立即执行函数里有return返回给fib，fib可以调用函数
    var arr = [0, 1, 1];// 也必须得是3个
    return function(n){
        var res = arr[n];
        if (res) {//res不等于undefined
            return res;
        } else {
            arr[n] = fib(n-1) + fib(n-2)
            return arr[n];
        }
    }
})()

console.log(fib(2))
console.log(fib(5))

`