面试刷题总结

时间 2019-11-09

原文原文链接

写一个事件侦听器函数？

（至关于封装一个util兼容主流浏览器和IE）css

var EventUtil = {
    //根据状况分别使用dom2 || IE || dom0方式 来添加事件
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        } else if(element.attachEvent) {
            element.attachEvent("on" + type,handler);
        } else {
            element["on" + type] = handler;
        }
    },

    //根据状况分别获取DOM或者IE中的事件对象，事件目标，阻止事件的默认行为
    getEvent: function(event) {
        return event ? event: window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event) {
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }

    //根据状况分别使用dom2 || IE || dom0方式 来删除事件
    removeHandler: function(element,type,handler){
        if(element.removeHandler) {
            element.removeEventListener(type,handler,false);
        } else if(element.detachEvent) {
            element.detachEvent("on" + type,handler);
        } else {
            element["on" + type] = null;
        }
    }

    //根据状况分别取消DOM或者IE中事件冒泡
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}

var btn = document.getElementById("myBtn"),
    handler = function () {
        alert("Clicked");
    };

EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);

如何书写高性能代码

http://developer.51cto.com/ar...前端

怎样用js实现千位分隔符

function format (num) {  
    var reg=/\d{1,3}(?=(\d{3})+$)/g;   
    return (num + '').replace(reg, '$&,');  
}
``

    function format(num){  
     num=num+'';//数字转字符串  
      var str="";//字符串累加  
      for(var i=num.length- 1,j=1;i>=0;i--,j++){  
          if(j%3==0 && i!=0){//每隔三位加逗号，过滤正好在第一个数字的状况  
              str+=num[i]+",";//加千分位逗号  
              continue;  
          }  
          str+=num[i];//倒着累加数字  
      }  
      return str.split('').reverse().join("");//字符串=>数组=>反转=>字符串  
    }  
发现一个更好的方法补充一下

let arr = [];
function three(num){
  if(num<1){
    return num
  }
  arr.unshift(parseInt(num%1000))
  three(num/1000);
}
three(1234567)
console.log(arr.join(','))

编写一个方法求一个字符串的字节长度

function getByte(str){
    var len = str.length,
        bytes = len,
        i = 0;
    for(; i<len; i++){
        if (str.charCodeAt(i) > 255) bytes++;
    }
    return bytes;
}

JavaScript中如何对一个对象进行深度clone

function clone(obj) {
            if (!obj && typeof obj !== 'object') {
                return;
            }
            var copy = (obj instanceof Array)?[]:{};
            for(var o in obj) {
                if (typeof obj[o] === 'object') {
                    copy[o] = clone(obj[o]);
                } else {
                    copy[o] = obj[o];
                }
            }
            return copy;
        }
        var obj = {
            name: 'zhangsan',
            age: 33,
            child:{
                name:'zhangxiao',
                age:9,
                eat:[1,{el:2}]
            },
            hobby:undefined,
            eat:[1,2,3,4]
        }
        var a=clone(obj)
        obj.child.name = 'lis';
        console.log(a);

如下代码运行结果

function say() {
        var num = 888;
        var sayAlert = function() { alert(num); }
        num++;
        return sayAlert;
    }
    var sayAlert = say();
    sayAlert();//889

刚调用say()函数的时候sayAlert不会执行，由于没有啊sayAlert()这样调用ios

如何实现Array.prototype.forEach？

if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(fn){
        for ( var i = 0; i < this.length; i++ ) {
            fn( this[i], i, this );
        }
    };
}

js怎么获取非行内样式

function getStyle(obj, attr){
      if(obj.currentStyle) {
        obj.currentStyle[attr]
      } else {
        getComputedStyle(obj, null)[attr];
      }
}

求数组中出现次数最多的元素和次数

<script>
        var arr = [1,1,1,4,5,4];
        var obj = {};
        for(var ar in arr){
            if(obj[arr[ar]]){
                obj[arr[ar]]++;
            } else {
                obj[arr[ar]] = 1;
            }
        }
        console.log(obj);
        1.//获取出现最多的元素 次数
        var res = [];
        for(var o in obj) {
            res.push({el: o,val:obj[o]});
        }
        res.sort(function(a,b){
                return  -(a.val-b.val);
        })
        console.log(res[0])
        2.
        let maxone = 0;
        for(var o in obj){
          if(obj[o]>maxone){
            maxone = obj[o]
          }
        }
        console.log(maxone)
    </script>

apply call bind

/*axios

apply call bind
  this 变幻无穷
  都是改变this的智享
  前二者：至关于返回是当即执行函数 fn.call(obj) 至关于obj的prototype上面有一个        fn()函数  obj就能顺着原型链网上找 this指向obj
  bind:返回的是一个函数不会当即执行
*/
var a = 1;
var obj = {
  a:2,
  fn:function(){
    console.log(this.a)
  }
}
obj.fn.call(obj)  //2
var fn2=obj.fn.bind(obj)
var fn3 = obj.fn.bind()
console.log(fn2)  //fn(){console.log(this.a)}
fn2()            //2
fn3()            //1

用js建立10个标签，点击的时候弹出来对应的序号

let aa = document.getElementById('aa')
for(var i=0;i<5;i++){
  (function(i){
    let el_a = document.createElement('a');
    el_a.innerHTML = i+'<br/>'
    el_a.addEventListener('click',function(e){
      e.preventDefault()
      console.log(i)
    },)
    aa.appendChild(el_a)
  })(i)
}

也能够把for的var改为letapi

闭包

// 闭包  1.能调用其余函数内部变量（给变量添加了缓存 但要注意在适当的时候清除缓存）  2.匿名执行函数（防止全局变量污染）
function f1(){
      var a = 1;
      return function(){
        console.log(a)
      }
    }
    let a = f1();
    function f2(f){
      var a =2;
      f()
    }
    f2(a)

回调函数在工做中的应用

/写回调函数：一般axios请求的函数是封装起来的（便于维护）发起请求的页面是分开的/数组

let params = {
  a:1,
  b:1,
  callback:function({datas}){
    console.log('hhhh')
    console.log(datas)
  }
}
apiAxios(params)

// 封装到一个js里面
function apiAxios(params){
  // axios.get('url').then((resp)=>{
    let datas = [1,2,3,4]
    params.callback({datas:datas})
  // })
}

网页是如何渲染出来的

用户输入url到页面显示这个过程当中发生了什么呢？
一、输入url发送请求
二、浏览器拿到服务器返回的HTML
三、浏览器开始解析HTML生产DOM树、css生产css树，两个树合在一块儿生成渲染数
四、浏览器根据渲染树来绘制页面
注意：重绘和重排两个关键字
1）重绘：dom节点不发生位置的变化，例如改变background，不影响周边的节点
2）重排：dom发生节点变化，涉及到的周边节点也会发生重排，所以消耗性能较大，例如操做节点，修改样式的宽高，伪类的操做等
3）js的执行会影响dom树和css树的渲染
4）<img/>浏览器遇到这个标签不会停下来，而是继续下来，等图片请求下来再返回去重排
总结：一些动画类的操做节点尽可能使用absolute或者fixed，避免影响周边节点浏览器

前端性能优化（除了css，js顺序、减小请求、雪碧图等）

最近刷博客看到的，window.perforance.timing这个方法下面有不少的属性能够获取缓存

DNS查询耗时 = domainLookupEnd - domainLookupStart
TCP连接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
白屏时间 = domloadng - fetchStart
domready时间 = domContentLoadedEventEnd - fetchStart
onload时间 = loadEventEnd - fetchStart