[JavaScript知识库]无题（javascript）

//函数柯里化
var add=function(x1){
      var sum=x1;
      var fun=function(x2){
        sum+=x2;
        return fun;
      }
      fun.toString=function(){
        return sum;
      }
      return fun;
    }
    alert(add(1)(2)(3));//6

    var a=20;
    function fun(){
      this.a=50;
      return function(){
        return this.a
      }
    }
    var m=new fun(); // =function(){return this.a}
    console.log(m());//20
    var n=fun();
    console.log(n());//50

//深度克隆 
function deepClone(oldObj){
  if(oldObj==null){
    return null;
  }
  if(typeof oldObj!=="object"){
    return oldObj;
  }
  var newObj=Array.isArray(oldObj)?[]:{};
  for(var key in oldObj){
    newObj[key]=deepClone(oldObj[key]);
  }
  return newObj;
}

//请求a,b,c用时最短
var total=0;
  Promise.all([
    ajax({
      url:"http://localhost:5050",
      data:"type=a"
    }),
    ajax({
      url:"http://localhost:5050",
      data:"type=b"
    }),
    ajax({
      url:"http://localhost:5050",
      data:"type=c"
    }),
  ]).then(arr=>{
    /*arr:[
      {type:"a",count:30},
      {type:"b",count:20},
      {type:"c",count:40},
    ]*/
    for(var obj of arr){
      total+=obj.count;
    }
    console.log(total);
  })

/ajax代码//
function ajax({url,type="get",data}){
                    //  door    err
  return new Promise(function(resolve,reject){
    var xhr=new XMLHttpRequest();//不变！
    //如果发送get请求时，带参数
    if(type=="get"&&data!==undefined){
      //则需要将参数用?连接到url地址结尾
      url+="?"+data;
    }
    xhr.open(type,url,true);
    xhr.onreadystatechange=function(){
      if(xhr.readyState==4){
        var result=JSON.parse(xhr.responseText)
      //door(result);
        resolve(result);//开门，并将结果，反馈到外部！功能类似于普通函数的return
      }
    }
    if(type=="post"){//只有发送的是post请求时，才需要添加请求头
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    if(type=="post"){//只有post请求，才会将参数放在send()中发送
      xhr.send(data);
    }else{//而如果是get请求，send()中什么都没有
      xhr.send();
    }
  })
}

//判断一个对象obj是否数组类型,共有几种方法
Array.isArray(obj)  //返回bool值
Object.prototype.toString.call(obj)
obj.constructor==Array
obj instanceof Array
Object.getPrototypeOf(obj)==Array.prototype
Array.prototype.isPrototypeOf(obj)
obj.__proto__==Array.prototype

    function f1() {
      var sum = 0;
      function f2() {
        sum++;
        return f2;
      }
      f2.valueOf = function () { //隐式转数值
        return sum;
      };
      f2.toString = function () {
        return sum + '';
      };
      return f2;
    }

    console.log(+f1());//+ f2.valueOf() / + sum  =0
    console.log(+f1()())
    //+ f2() sum++ / sum=1 / + f2.valueOf() /+ 1 =1
    console.log(+f1()()())
    //+f2()sum++ / sum=1 / + f2() sum++ / sum=2 / +f2.valueOf()/+ 2=2

//旧js中,始终保持arguments中的元素值与形参变量接住的实参值同步在严格模式下,不再同步了

    function sid(arr){
      arr[0]=arr[2];
    }
    function bar(a,b,c){
      c=10;
      sid(arguments);
      return a+b+c;
    }
    console.log(bar(1,1,1));
    //非严格模式 21
    //严格模式下 12

    var name="window";
    var p={
      name:"Perter",
      getName:function(){
        var self=this;
        return function(){
          return self.name;
        }
      }
    }
    var getName=p.getName();
    var _name=getName();
    console.log(_name);//Perter

    this.b="2";
    function abc(){
      let b=1;++b
      setTimeout(()=>{
        test('fun test');//new function,最后执行
      },0);
      setTimeout(//这个定时器没什么用
        test('test fun')//调用函数语法,立马执行
        ,1000);
      console.log(b);
      function test(str){
        this.b++;//指向window
        console.log(str);
        console.log(this.b++);//指向window
      }
    }
    abc();
    //test fun
    //3
    //2
    //fun test
    //5

    //数组去重,有几种方法,哪种最好(数组很长)
    var arr=[];
    for(var i=0;i<100000;i++){
      arr.push(parseInt(Math.random()*10000));
    }
    //1:利用对象名不重复的特点
    function unique1(arr){
      var obj={};
      for(var n of arr){
        obj[n]=1;
      }
      var newArr=[];
      for(var key in obj){
        newArr.push(parseInt(key));
      }
      //字符串类型去重看下面
      // newArr=Object.keys(obj);
      return newArr;
    }
    //对比时间
    console.time("unique1");
    unique1(arr);
    console.timeEnd("unique1");
    //2:利用新es标准的新类型set
    //set类型的对象是指值不允许重复的集合
    //向set类型添加新值时,没有才加,有这个新值则不加
    function unique2(arr){
      var set=new Set(arr);
      var newArr=[...set];
      return newArr;
    }
    //对比时间
    console.log(unique2(arr))
    console.time("unique2");
    unique2(arr);
    console.timeEnd("unique2");

  <button>click me</button>
  <button>click me</button>
  <button>click me</button>
  <button>click me</button>
  <button>click me</button>
  <script>
    //页面上相同的按钮,点击按钮让它显示自己是第几个
    //解法1
    var btns=document.getElementsByTagName("button");
    for(var i=0;i<btns.length;i++){
      (function(i){//匿名函数自调形成闭包
        btns[i].onclick=function(){
        console.log(i);
      }
      })(i);
    }
    //解法2
    //ES6 用let也是匿名函数自调
    for(let i=0;i<btns.length;i++){
      btns[i].onclick=function(){
        console.log(i);
      }
    }
  </script>

    //去掉数组中非数字字符，并给给个数字+1
    var arr=[1,2,3,"a",4,"e"];
    for(var i=arr.length-1;i>=0;i--){
      if(typeof arr[i]==="number"){
        arr[i]++;
      }else{
        arr.splice(i,1);
      }
    }
    console.log(arr);

    //在2个排好序的数组中，高效率找出相同的元素，放入新数组
    var arr1=[1,3,7,9,12,37,45];
    var arr2=[2,4,9,13,45,88,92];
    for(var i=0,j=0,result=[];i<arr1.length&&j<arr2.length;){
      if(arr1[i]<arr2[j]){
        i++;
      }else if(arr1[i]>arr2[j]){
        j++;
      }else{//arr1[i]==arr2[j]
        result.push(arr1[i])//arr2[j]也行
        i++;
        j--;
      }
    }
    console.log(result)

    //找出一个排好序的数组中，两个元素相加的和为19的元素组合，考虑执行效率
    var arr3=[1,2,4,6,7,11,12,15,17];
    for(var i=0,j=arr3.length-1;i<j;){
      if(arr3[i]+arr3[j]>19){
        j--;
      }else if(arr3[i]+arr3[j]<19){
        i++;
      }else{//arr[i]+arr[j]==19
        console.log(`${arr3[i]}+${arr3[j]}`);
        i++;
        j--;
      }
    }

    //使用原生js，模拟forEach和map函数
    var arr=[1,2,3,4,5];
    Array.prototype.forEach=function(fun){
      for(var i=0;i<this.length;i++){
        if(this[i]!==undefined){
          fun(this[i],i,this)
        }
      }
    }
    arr.forEach(function(elem){
      console.log(`${elem}`)
    })
    Array.prototype.map=function(fun){
      var arr=[];
      for(var i=0;i<this.length;i++){
        if(this[i]!==undefined){
          arr[i]=fun(this[i],i,this);
        }
      }
      return arr;
    }
    var bb=arr.map(function(elem){
      return elem*2;
    })
    console.log(bb)

    //给定一个字符串，其中字母出现的次数
    var str="helloworld";
    var arr=str.split("");
    //prev：统计结果 elem：当前元素
    var result=arr.reduce(function(prev,elem){
      //如果当前元素在prev中不存在，强行添加
      if(prev[elem]===undefined){
        prev[elem]=1;
      }else{
      //如果已经存在，数量加 1
        prev[elem]+=1;
      }
      return prev;
    },{})
    console.log(result);

    //用原生call()模拟实现bind()
    //巨他妈难
    //第一种
    Function.prototype.bind=function(obj){
      var fun=this;
      var arr1=Array.prototype.slice.call(arguments,1);
      return function(){
        var arr=Array.prototype.slice.call(arguments);
        var arr2=arr1.concat(arguments);
        fun.apply(obj,arr2);
      }
    }
    //第二种
    // Does not work with `new (funcA.bind(thisArg, args))`
    //不支持使用new调用新创建的构造函数--来自MDN
    if (!Function.prototype.bind)(function () {
      var slice = Array.prototype.slice;
      Function.prototype.bind = function () {
        var thatFunc = this,
          thatArg = arguments[0];
        var args = slice.call(arguments, 1);
        if (typeof thatFunc !== 'function') {
          // closest thing possible to the ECMAScript 5
          // internal IsCallable function
          throw new TypeError('Function.prototype.bind - ' +
            'what is trying to be bound is not callable');
        }
        return function () {
          var funcArgs = args.concat(slice.call(arguments))
          return thatFunc.apply(thatArg, funcArgs);
        };
      };
    })();

  //有选择的将类数组对象中的部分元素转为数组
  //第一种写法
    Array.prototype.slice.call(arguments,starti)
  //第二种写法
    [].slice.call(arguments,starti)

    //定义一个新的类型people,继承animal的类型
    function animal(name,age){
      this.name=name;
      this.age=age;
    }
    animal.prototype.intr=function(){}

    function people(name,age){
      animal.call(this,name,age);
    }
    Object.setPrototypeOf(people.prototype,animal.prototype);
    //完成

    //玩的就是地址的题
    var a={n:1};//地址#old
    var b=a;//b指向a的地址#old
    //#old.x=a={n:2}-->地址#new
    //#old的对象强行赋值x:{n:2}-->地址#new
    a.x=a={n:2};//a指向地址#new
    console.log(a);//{n:2}
    console.log(b);//{n:1,x:{n:2}}
    a.n=3;
    console.log(b);//{n:1,x:{n:3}}
    console.log(a);//{n:3}

    var num=new Array();
    for(var i=0;i<4;i++){
      num[i]=f1(i);
    }
    //提升到最上面
    function f1(n){
      //n形成闭包
      function f2(){
        alert(n);
      }
      return f2;
    }
    num[2]();//2
    num[1]();//1
    num[0]();//0
    num[3]();//3

    //统计字符串每种字符出现的次数
    var str="helloworld";
    var arr=[];//统计字母的关联数组
    for(var i=0;i<str.length;i++){
      var char=str[i];//当前字母
      if(arr[char]===undefined){
        arr[char]=1;
      }else{
        arr[char]++;
      }
    }
    //maxChar出现次数最多的字母
    //count共出现了几次
    var maxChar,count=0;
    for(var key in arr){
      if(arr[key]>count){
        maxChar=key;
        count=arr[key];
      }
    }

    //切割字符串
    var search="?uname=dingding&upwd=123456&favs=swimming&favs=running&favs=basketball";
    function search20bj(str){
      var obj={};
      //去?
      str=str.slice(1);
      //去&,成数组
      var arr=str.split("&");
      for(var s of arr){
        var [key,value]=s.split("=");
        if(obj[key]===undefined){
          obj[key]=value;
        }else{
          obj[key]=[].concat(obj[key],value);
        }
      }
      return obj;
    }
    console.log(search20bj(search));

    function fun(n,o){
      console.log(o);
      return{
        fun:function(m){
          return fun(m,n);
        }
      }
    }
    var a=fun(0);//undefined
    a.fun(1);//0
    a.fun(2);//0
    a.fun(3);//0
    var b=fun(0)//undefined
    .fun(1)//0
    .fun(2)//1
    .fun(3);//2
    var c=fun(0)//undefined
    .fun(1);//0
    c.fun(2);//1
    c.fun(3);//1

    function setObj(p){
      p.name="red";
      p={};//局部变量p创建新对象
      p.name="blue";
    }
    var p={
      name:"pink"
    };
    setObj(p);
    console.log(p);//red

    var a=2;
    var obj={
      a:4,
      fn1:(function(){
        this.a*=2;//带.的都是对象,与变量a无关
        var a=3;//<--闭包变量
        return function(){
          this.a*=2;
          a*=3;
          console.log(a);
        }
      })()//匿名函数自调,立即执行
    }
    var fn1=obj.fn1;
    console.log(a);//4
    fn1();//9
    obj.fn1();//27
    console.log(a);//8
    console.log(obj.a);//8

    function fun(o){
      o.name="red";
      o={};
      o.name="blue";
    }
    var obj={name:"white",age:11};
    fun(obj);
    console.log(obj);
    //{name: "red", age: 11}

    function Foo(){
      getName=function(){
        console.log(1);
      };
      return this;
    }
    Foo.getName=function(){
      console.log(2);
    }
    Foo.prototype.getName=function(){
      console.log(3);
    }
    var getName=function(){
      console.log(4);
    }
    function getName(){
      console.log(5);
    }
    Foo.getName();//2
    getName();//4
    Foo().getName();//1
    getName();//1
    new Foo.getName();//2
    new Foo().getName();//3
    new new Foo().getName();//3

    //构造函数内部,如果return一个引用类型的对象,
    //则整个构造函数失效,而是返回这个引用类型的对象
    //说的就是function B
    function A(){ }
    function B(){
      return new A();
    }
    A.prototype=new A();
    B.prototype=new B();
    var a=new A();
    var b=new B();
    console.log(a.__proto__==b.__proto__);//true

//考闭包
    var x=0;
    var foo={
      x:1,
      bar:function(){
        console.log(this.x);
        var that=this;
        return function(){
          console.log(this.x);
          console.log(that.x);
        }
      }
    }
    foo.bar();//1
    foo.bar()();//1 0 1

    //函数也是对象
    function Foo(){
      Foo.a=function(){
        console.log(1);
      }
      this.a=function(){
        console.log(2);
      }
    }
    Foo.prototype.a=function(){
      console.log(3);
    }
    Foo.a=function(){
      console.log(4);
    }
    Foo.a();//4
    let obj=new Foo();
    obj.a();//2
    Foo.a();//1

    var a={};
    //b是对象,在这个题里,和里面的值没关系
    var b={
      key:"a"
    };
    var c={
      key:"c"
    };
    //a[b]会隐式把b转为下标,于是找toString()
    //b没有,找到了Object的toString()
    //因为new object()继承Object的原型对象
    //导致b转化为[object Object]
    //于是a[b]就是a{"[object Object]":123}
    a[b]="123";
    //再赋值变成a{"[object Object]":456}
    a[c]="456";
    console.log(a[b]);//456

    //解析地址为["http", "locahost", "5500", "/public/index.html", "uname=lena&upwd=123456", "#top"]
    //正则表达式2种做法
    var reg10k = /([a-z]+):\/\/([A-Za-z0-9.]+):(\d+)((\/[a-z.]+)+)\?(([a-z]+=[a-z0-9]+&?)+)#([a-z]+)/i;
    var reg18k =/[a-z]+(?=:\/\/)|(?<=:\/\/)[a-z0-9.]+(?=:)|(?<=:)\d+(?=\/)|\/[a-z/.]+(?=\?)|(?<=\?)[a-z0-9=&]+(?=#)|#[a-z0-9]+/ig;
    var url = "http://locahost:5500/public/index.html?uname=lena&upwd=123456#top"
    var arr10k = url.match(reg10k);
    var arr18k = url.match(reg18k);
    console.log(arr10k);
    console.log(arr18k);
    //数组做法
    //先按://切割，取第0部分——protocol
    var arr = url.split("://");
    var protocol = arr[0];
    //剩余部分保存在变量rest中继续执行后续操作
    var rest = arr[1];
    //再按#切割，取第1部分——hash
    var arr = rest.split("#");
    var hash = `#${arr[1]}`;
    rest = arr[0];
    //再按?切割，取第1部分——search
    var arr = rest.split("?");
    var search = arr[1];
    rest = arr[0];
    //再按/切割
    var arr = rest.split("/");
    //将数组第一个元素踢出数组——主机名+端口号
    var host = arr.shift();
    //将剩余部分按/拼接形成相对路径
    var pathname = "/" + arr.join("/");
    //将host再按:切割，分成主机名和端口号
    var arr = host.split(":")
    var hostname = arr[0];
    var port = arr[1];

    console.log(protocol); //http
    console.log(host); //localhost:5500
    console.log(hostname); //localhost
    console.log(port); //5500
    console.log(pathname); // /public/index.html
    console.log(search); //?lid=5
    console.log(hash); //#top

    //闭包题技巧:找2个东西
    //(1)外层函数与内层函数之间都有哪些受保护的变量
    //(2)外层函数共向外抛出了几个内层函数对象,3种方式,向外返回内层函数
    //a.return function(){ ... }
    //b.通过给全局变量赋值的方式,向外抛出一个函数
    //c.return 一个对象或数组,在对象和数组中包含多个函数定义
    //结论:一次外层函数调用时,抛出的多个内层函数对象,共用这次生成的一个变量,
    //  其中一个函数修改了变量,另一个函数受保护的变量也受影响
    function fun(){
      var n=999;
      nAdd=function(){n++};
      return function(){
        console.log(n);
      }
    }
    var getN=fun();
    getN();//999
    nAdd();
    getN();//1000

    function fun(){
      for(var i=0,arr=[];i<3;i++){
        arr[i]=function(){console.log(i)}
      }
      return arr;
    }
    var funs=fun();
    funs[0]();//3
    funs[1]();//3
    funs[2]();//3

    var a=10;
    (function(){
      console.log(a);//undefined
      a=5;
      console.log(window.a);//10
      var a=20;
      console.log(a);//20
    })()

    function fun(){console.log(1)};
    fun();//2
    function fun(){console.log(2)};
    fun();//2
    //下面的var没用,因为window对象中已经有fun了,
    //var fun就没什么效果,只是=100赋值留在原地
    var fun=100;
    fun();//报错