js面试

防抖

避免短时间内重复调用一个函数
设置一个定时器
最小时间间隔
在这个事件间隔内，连续触发该事件
只执行一次
比如：定时器200mm一次；触发一次等待两百毫秒才会触发，如果在两百毫秒内再次触发，就清除这个定时器，重新开启一个定时器

节流

发送ajax请求，只要第一次响应没回来，就不执行第二次
解决：设置一个开关，默认为true
执行时变为false
请求回来了，打开开关

浏览器同源策略(CORS)

浏览器禁止ajax使用其他服务器来源的数据
浏览器会检查ajax请求从服务器端获取的数据的响应头
如果响应头中的来源地址和当前网页所在的地址域名不一致，就报错
只有响应头中的来源地址和当前网页所在的地址相同，才允许使用该数据

数据类型

判断难点:null undefine NaN 数组,对象
undefine底层会变为null,
NaN是不等于NaN的
数组,对象 typeof都是[Object,Object]

解决: null undefine用===
NaN:用isNaN
数组 isArray() es5
原生: Object.prototype.toString.call(a)
或: {}..toString.call(a)

字符串次数

var arr="455540545dfs4asfsdlfkhanwougityeadgfbiaeswttdrwVBDSGYUAWESFSADRFSSDF";
 var obj={};
 var max=0;
 for(var item in arr){
     //console.log(arr[item]);
  if(obj[arr[item]]==undefined){
   obj[arr[item]]=1;
  }else{
      console.log(obj[arr[item]]);
    obj[arr[item]]++;
  }
  if(obj[arr[item]]>max){
    max=obj[arr[item]];
  }
 }
 console.log(obj,max)

数组去重

//方法一根据过滤器当下标和值的indexof(下标)相同就过滤出来
  var arr=[11,22,5654,11,22,3,145,2,145,2,3,"i","p","o","o","p","i","p"];
  console.log(
  arr.filter((item, index)=> {
        return arr.indexOf(item) === index
    })
  )
  //方法二双重for循环,第一个与第一个之后的比较,相等就splice出去,但会改变数组长度,需要内层循环减一,数组长度减一
var arr1=[11,22,5654,11,22,3,145,2,145,2,3,"i","p","o","o","p","i","p"];
    for(var i=0; i

数组回文

var a=prompt("请输入一串数字加字母");
    a=a.split("");
    console.log(a)
    var sum=0;
    var len=Math.floor(a.length/2);
    console.log(len)
      for(var i=0;i

将Url转对象

function parseUrl(url){
  var reg=/(\w+):\/\/([\w\.-]+)((\/\w+)+)\?([^#]+)#(\w+)/;
  //之所以上边正则，每一部分都用()分隔开，是因为想用match的获取子字符串的功能。match在匹配时，不但会匹配完整的字符串，而且正则中每个()的子内容也会分别匹配出来。
  var arr=url.match(reg);
  var obj={};
  obj.protocol=arr[1];
  obj.host=arr[2];
  obj.pathname=arr[3];
  obj.hash=arr[arr.length-1];
  var search=arr[arr.length-2];
  //参数部分先按&切割
  arr2=search.split("&");
  //先给结果对象添加专门保存参数值的params属性，值也是一个空格对象
  obj.params={}
  //遍历用&切割后的每段子字符串
  for(var str of arr2){
    //每遍历一段子字符串，就用=切割
    var arr=str.split("=");
    //切割后的第一部分作为属性名，第二部分作为属性值
    var key=arr[0], value=arr[1];
    //如果obj.params内已经有了当前属性，则将当前属性值和新属性值拼接为一个数组，用concat
    if(obj.params[key]!==undefined){
      obj.params[key]=[].concat(obj.params[key],value);
    }else{//否则如果没有改属性名才强行添加到obj的params对象属性内
      obj.params[key]=value;
    }
  }
  return obj;
}

判断是否是数组

1. 找爹   obj.__ptoty__==array.Prtotype
       Object.getPrototypeOf(obj)==array.Prtotype
       array.prototype.isprototypeOf(obj)
2. 找妈  obj.constructor==array
 obj instanceof array
3.class基因
Object.prototype.toString.call(obj);
4. es5判断
Array.isArray(obj);

数组降维

二维数组降维
arr=[].concat(...arr)
多维数组降维

function fun(arr){
    //先降一次维
    arr=[].concat(...arr);
    //再检查降维后的数组中是否还包含子数组
    var hasArray=arr.some(function(elem){
        return Array.isArray(elem);
    })
    if(hasArray){ //如果包含子数组
       arr=fun(arr);//就只能再降维一次，直到检查不再包含子数组为止
    }
    return arr
}

两个变量,交换值

• 只能交换数字值
  a+=b, b=a-b, a-=b
  a^=b, b^=a, a^=b
• 任意
  a=[b,b=a][0]
  [a,b]=[b,a]

实现浏览器多个标签页之间的通讯

1. cookie+setinterval

发送方
document.cookie="msg="+d1.value;
接收方
setinterval(()=>{
d1.innerHTML="document.cookie"
},500)

问题:cookie有大小限制,发送服务器会带一些不需要的东西,定时器不好
优点是无兼容性问题

2. localStorage

发送方
localStorage.setItem("msg", d1.value.trim());
接收方
window.addEventListener("storage", () => {
            msg.innerHTML = localStorage.getItem("msg");
        })

localStorage内容一旦改变,无论那个页面,都会触发storage事件
问题:h5的内容,有兼容性问题

3. webStroket

看h5去
缺点:需要后端配合

4. sharedWorker
   worker.js

let data="";//在所有shareworker共享的worker.js中,保存一个data变量,存储多个worker共享数据
onconnect=function(e){//必须提供一个名为onconnect事件处理函数
    //每当一个页面new shareworker("worker.js")时
    //就会为新建的worker绑定onconnect事件处理函数
  var port=e.ports[0]; //获得当前连接上了的客户端对象
  port.onmessage=function(e){//当当前对象收到消息时
     
   if(e.data===""){//如果消息为空,说明向获得消息
     port.postMessage(data);
   }else{//消息不为空,说明想将消息放在data中让别人取
     data=e.data;
   }
  }
}

发送

var worker=new SharedWorker("worker.js");
    worker.port.start();
    send.onclick=function(){
      if(msg.value.trim()!==""){
        worker.port.postMessage(msg.value.trim())
      }
    }

接收

 var worker = new SharedWorker("worker.js");
        //2.当worker.js中给客户端返回了data会自动触发当前客户端的message事件,data值会自动保存进事件对象e的data属性中
        worker.port.addEventListener("message", function(e) {
            rec.innerHTML = e.data;
        }, false)
        worker.port.start();
        //1.接收端反复想共享的worker.js对象发送消息,意味想获取data的值
        setInterval(function() {
            worker.port.postMessage("");
            //只要发送消息,就触发worker.js中的onmessage
        })

the-Node-js-event-loop.png