记一次前端笔试

1、写出元素垂直居中的方法

方法一：在不知道自己高度和父元素高度的情况下，利用绝对定位

父元素position:relative;

子元素position:absolute;top:50%;transform:translateY(-50%);

方法二：知道子元素高度的情况下，利用绝对定位

父元素position:relative;

子元素position:absolute;top:50%;left:50%;margin-left和margin-top分别为宽高的负一半。

方法三：设置height和line-height为相同的值，但是这只应用于单行文本

2、margin越界的解决方法

方法一：父元素设置border

方法二：父元素设置padding-top

方法三：父元素设置overflow:hidden

方法四：父元素设置伪类：before{

                                                content:'';

                                                display:table;

                                          }

3、简述box-sizing的属性

在说box-sizing之前先说下盒模型，盒模型分两种，IE盒模型和W3C盒模型。

IE盒模型：content内容包括了padding和border

W3C盒模型：content内容不包含其他两部分

box-sizing:content-box|border-box|padding-box

content-box（默认值）：宽度不包含padding和border

border-box：宽度包含padding和border

padding-box：宽度包含padding

4、简述对闭包的理解

闭包就是函数中的函数，里面的函数可以访问外面函数的变量。

闭包的作用：1）、使用闭包可以访问函数外的变量

                     2）、可以使变量长期保存在内存中，生命周期比较长。

闭包要注意的地方：1）、闭包不能滥用，否则会导致内存泄漏，影响网页的性能

                                2）、闭包使用完之后，要立即释放资源

5、简述几种本地存储，并写出其区别

cookie、sessionStroge、localStroge

共同点：都是保存在浏览器中，且都是同源的

区别：

1）、cookie在浏览器和服务器间来回传递

         sessionStroge和localStrige不会自动把数据发送给服务器，仅用于本地保存。

         cookie还有路径（path）的概念，可以限制cookie只属于某个路径下。

2）、存储大小限制不同

         cookie数据不能超过4k

         sessionStroge和localStrige虽然也有限制，但可以达到5M以上

3）、数据有效期不同

         cookie只在设置的cookie过期之前有效，即使窗口或浏览器关闭

         sessionStroge只在当前浏览器关闭之前有效

         localStroge不管浏览器关闭与否，数据永久保存

4）、作用域不同

         cookie数据在所有同源窗口中都是共享的

        sessionStroge在不同浏览器窗口不共享，即使是同一个页面

6、数组去重

        function test(arr){
            var temp=[];
            for(var i=0;i<arr.length;i++){
                if(temp.indexOf(arr[i])==-1){
                    temp.push(arr[i]);
                }
            }
            return temp;
        }

7、一个ul包含10个li，实现点击对应的li，输出其内容。

方法一：利用this

        var myul = document.getElementsByTagName("ul")[0];  
        var li = myul.getElementsByTagName("li");  
        function foo(){
            for(var i=0;i<li.length;i++){
                li[i].onclick=function(){
                    alert(this.innerHTML)
                }
            }
        }
        foo();

方法二：事件委托

var myul = document.querySelector('ul');  
var list = document.querySelectorAll('ul li');  
  
myul.addEventListener('click', function(ev){  
    var ev = ev || window.event;  
    var target = ev.target || ev.srcElemnt;  
  
    for(var i = 0, len = list.length; i < len; i++){  
        if(list[i] == target){  
            alert(target.innerHTML);  
        }  
    }  
}); 

8、JS实现深拷贝

 JS中数据类型分为基本数据类型（null、undefined、number、string、boolean）和引用类型（object、array、function）。

基本类型存放在栈内存中，引用类型存放在堆内存中。

栈内存存放基本类型的变量，堆内存存放new出来的变量。

浅拷贝就是将直接复制，复制前后前后的两个对象指向同一个内存地址，对其中一个进行操作，另一个也会发生同样的变化。他们只是不同的指针指向了同一块内存。

深拷贝则是开辟了一个新的内存地址，把其内容完完全全复制到新的内存中，之后对这个新对象的任何操作都不会影响到原先对象（既两边的操作都不会影响彼此），他们两个成了完全独立的对象

对于基本类型的变量可以进行浅拷贝，但对于引用类型的变量就得用深拷贝。

可以通过遍历+递归实现深拷贝

function deepClone ( obj ) {
    if( typeof obj != "object" ){
        return obj ;
    }  

    var newObj = obj.constructor === Array ? [] : {};  //开辟一块新的内存空间

    for( var i  in  obj ) {
        newObj [ i ] = deepClone ( obj [ i ] );                 //通过递归实现深层的复制 
    }

　　return newObj;
}

此外，还可以通过使用一些框架或库里的方法来完成深拷贝

比如jquery里的extend()方法：extend(deep,object)     //第一个参数为可选参数，默认为false，如果传入true，则实现的就是深拷贝