前端笔试题（二）

1.常见的盒子水平垂直居中的方法有哪些

• 使用定位

• 使用margin：auto;

• display:flex; justify-content:center; align-items:center;

• 使用transform: translate(-50%,-50%);

2.简述下深浅拷贝的原理和常用的方法

浅拷贝

对于基本类型数据来说，拷贝的是值；对于引用数据来说，拷贝了地址，因此拷贝后的对象和原对象会共用一个内存地址，因此，属性值会同步变化

浅拷贝常用的方法

①　Object.assign：可以直接拷贝对象进行数据的处理（还有就是可以实现对象的拷贝合并）

②　数组的slice和concat方法（第一个可以截取数组的值、第二个可以用来连接数组。实际上他俩还可以用来进行数组的浅拷贝复制）（是浅拷贝数组的一个常用方法）

③　Es6展开运算符...（是浅拷贝最简单的方式，而且还很强大，数组和对象都可以用它来进行浅拷贝）

深拷贝

对于引用数据类型来说，就是拷贝原始对象的所有属性与方法，在内存中重新开辟一块内存空间进行存储

深拷贝常用的方法

①　Json.stringify(Json.parse( ))（是深拷贝里面最容易的一种方法）

②　递归深拷贝（属于递归版的深拷贝实现方法，这个是简易版的实现方法）

3.vue中computed和watch的区别

相同：

都是观察页面的数据变化的；都与data同级

不同：

computed会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行计算

Watch不支持缓存，数据变化的时候直接进行相应的操作

监听每次都要执行函数

数据变化时执行异步，使用watch

Watch支持异步，可以监听数据的变化

watch监听单个，computed可以同时计算多个

4.什么是同源策略

协议、域名、端口三者都相同

5.考察局部作用域

请写出三个log代码的输出值

可以看到下方代码中，函数体中也有一个b、函数名也是b，这里输出的b其实是整个函数体也就是函数b，和外面的b其实是没多大关系的

可以说，全局的那三行代码其实是都没有什么关系的，可以忽略

这里其实也考察了++在前和在后的区别

• ++在后，先输出再自增

• ++在前，先自增再输出

var a=1;
a++;
var b=10;
(function b(){
    var a=1;
    console.log(a++);//1
    console.log(++a);//3
    console.log(b);//null
})()

6.考察let和var的区别

这里考察的是let和var区别中的是否可以重新进行赋值

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);//5 5 5 5 5
    })
};
//每?次for循环的时候，setTimeout都执??次，但是??的函数没有被执?，?是被放到了任务队列??，等待执?，for循环了5次，就放了5次，当主线程执行完成后，才进入任务队列里面执行

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);//0 1 2 3 4
    })
};
//因为for循环头部的let不仅将 i 绑定到for循环中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值。setTimeout 里面的 function( ) 属于一个新的域，通过 var 定义的变量会不断覆盖之前的值，通过 let 定义的变量会产生块级作用域，后面赋值的变量不会改变前面的值，因为它们处于不同的块级作用域