2018前端必考面试题总结7

• JS的数组方法pop()，push()，unshift(),shift()

  pop()删除数组的最后一个元素
  push()数组的末尾添加新的元素
  unshift()在数组的开头添加新元素
  shift()删除数组的第一个元素

• IE和标准下有哪些兼容性的写法？
  （1）关于使用firstChild,lastChild等，获取第一个/最后一个元素节点时产生的问题
  IE6-8下：
  firstChild,nextSibling,previousSibling,获取第一个元素节点（高版本浏览器IE9+,FF,Chrome不兼容，其获取的是空白文本节点）
  高版本浏览器下：
  firstElementChild,lastElementChild,nextElementSibling,previousElementSibling(低版本浏览器IE6-8不兼容)
  兼容写法：找到ul的第一个元素节点，并将其背景色变成红色。

        var oUl=document.getElementById("ul");
        if(oUl.firstElementChild){
            //高版本浏览器
            oUl.firstElementChild.style.background="red";
        }else{
            //IE6-8
            oUl.firstChild.style.background="red";
        }

（2）关于使用event对象，出现的兼容性问题
获取event对象兼容性写法：var oEvent=ev||event;

        document.onclick=function(e){
            var oEvent=e||event;
            if(oEvent){
                alert(oEvent.clientX);
            }
        }

(3）关于滚动条距离而出现的问题
当我们获取滚动条滚动距离时：
IE，Chrome:document.body.scrollTop
FF:document.documentElement.scrollTop
兼容处理：
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
（4）关于event事件中的target

//关于event事件中的target
        document.onmouseover=function(e){
            var e=e||window.event;
            var Target=e.target||e.srcElement;//获取target的兼容写法，后面的为IE
            var from=e.relatedTarget||e.formElement;//鼠标来的地方，后面的为IE
            var to=e.relatedTarget||e.toElement;//鼠标去的地方
        }

（5）设置监听事件

            function addEventHandler(object,eventType,fnHandler){
                if(object.addEventListener){//DOM
                    object.addEventListener(eventType,fnHandler,false);
                }else if(object.attachEvent){//IE
                    object.attachEvent("on"+eventType,fnHandler);
                }else{//others
                    object["on"+eventType]=fnHandler;
                }
            };

            function removeEventHandler(object,eventType,fnHandler){
                if(object.removeEventListener){//DOM
                    object.removeEventListener(eventType,fnHandler,false);
                }else if(object.detachEvent){//IE
                    object.detachEvent("on"+eventType,fnHandler);
                }else{//others
                    object["on"+eventType]=null;
                }
            };

• ajax请求的时候get和post方式的区别

  get和post都是向服务器发送的一种请求，只是发送机制不同。
  （1）get请求会将参数在url后进行传递，而post请求则是作为http消息的实体内容发送给web服务器。当然在ajax请求中，这种区别对用户是不可见的。
  （2）get请求提交的数据量比较小
  （3）get请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，get方式会带来严重的安全问题。而post方式相对来说就可以避免这些问题。
  （4）服务器端的获取方式不同

• JS中call()和apply()的区别

  call()和apply()都是在特定作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。一般来说this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。
  apply()和call()的不同点是：接收参数的方式不同。
  apply()方法接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。
  call()方法第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来。

        function add(c,d){
            return this.a+this.b+c+d;
        }
        var s={a:1,b:2};
        console.log(add.apply(s,[5,6]));//1+2+5+6=14
        console.log(add.call(s,3,4));//1+2+3+4=10

• ajax请求时，如何解释json数据？
  

ajax中解析json有两种方法：
eval();//此方法不推荐
JSON.parse();//推荐方法
原因：eval()方法解析的时候不回去判断字符串是否合法，而且json对象中的js方法也会被执行，这是非常危险的。