前端面试题总结（二）

1.localstorage和sessionstorage的区别

localstorage是本地存储，只要浏览器没有被卸载，这个数据库都是存在的。
sessionstorage是会话存储，只要浏览器tab页没有关闭，sessionstorage就一直存在。

2.for…in 和 for…of的区别

for…in:只能获得对象的键名，不能获得键值；
for…of:允许遍历获得键值。
例如：var arr = [‘red’,‘green’,‘yellow’]
for…in拿到的是[0,1,2]，for…of拿到的是[‘red’,‘green’,‘yellow’]

3.深拷贝和浅拷贝的区别 以及深拷贝的方法

浅拷贝：只是增加了一个指针指向已经存在的内存地址，A变，B也变；
深拷贝：增加了一个指针并且申请了一个新的内存用来存放拷贝的值，A变，B不变。

深拷贝的几种方式：

1. JSON实现：先用JSON.Stringify() 将对象转换为JSON字符串形式，再用JSON.parse()将JSON字符串转换为原生JS对象。这种方法有一个缺点，会把undefined值和function()过滤掉,即原对象中有function()和undefined时，拷贝后这两种类型的数据会丢失。
2. object.assign({},obj1)：当对象只有一级属性的时候可以用object.assign，当对象有二级属性时就会变成浅拷贝了。
3. 用递归来拷贝
4. lodash中有一个方法 _.cloneDeep()也可以实现深拷贝。
5. ES6中的扩展运算也可以实现深拷贝，let someone = {…p1}

4.同步和异步的区别

同步：所有操作都做完，才返回给客户，用户体验不好，容易卡死。
异步：将请求放入消息队列，并反馈给用户，然后再慢慢写入数据库。

5.堆和栈的区别

栈：先进后出，系统自动分配和释放内存。
堆：队列优先，先进先出，动态分配空间，一般由程序员分配释放（实际上保存的是一个指针）。
当我们需要引用类型的值时，首先从栈中获得对象的地址指针，再从堆内存中获取所需数据。

6.基本数据类型有哪些

null，undefined，string，number，boolean，ES6还多了一种symbol

7.对于this的理解

1. 全局作用域中的this指向window；
2. 普通函数中this指向全局对象；
3. 构造函数中this指向new这个对象；
4. 箭头函数中this指向上一级作用域；
5. 对象函数中this指向这个对象；
6. apply，call调用时指向第一个参数，没有则默认window。

如何改变this指向：bind，call，apply，new一个this

8.前端性能优化

1. 减少http请求；
2. 减少对DOM的操作，减少页面的重绘；
3. 异步加载，如滚动页面滚动到下面再加载后面的内容（Ajax）；
4. 使用缓存，localstorage，sessionstorage；
5. 无效字符及注释的删除，代码语义的缩减与优化，降低代码的可读性；
6. JavaScript与css文件剥离与压缩，剥离后能够有针对性的对其进行单独处理。

9.watch和computed的区别

computed：是计算属性，只有当依赖的数据变化时才会计算，当数据不变时，它只会读取缓存数据。适用于一些重复使用的数据或复杂费时的计算，放入computed中计算，然后会在computed中缓存起来，下次可以直接获取。computed不支持异步。
watch：用来监听数据，当data发生变化时执行回调。deep:默认为false，当deep为true时，监听器会一层层往下遍历，给对象的所有属性加上这个监听器，此时性能开销会非常大。watch不仅可以监听数据变化，还可以监听路由变化。

10.Vue双向绑定原理

Vue双向绑定原理是通过数据劫持+发布订阅模式相结合的方式来实现的，就是数据层发生变化时，可同步更新视图层，当视图层发生变化时，同步更新数据层。其实就是MVVM框架，当用户操作view，viewModel感知到变化，然后通知Model发生相应改变；反之当Model发生改变，ViewModel也能感知到变化，使View作出相应的更新。

11.谈谈闭包

一个嵌套函数中引用了封闭函数定义的变量，并且该函数可以在其定义环境外即封闭函数外被执行。

function f1(){    // 封闭函数
   var n=1;       // 自由变量
   var inner = function(){     // 嵌套函数
       n++;
   }
   return inner;
}

优点：可以缓存数据；起到隔离作用域的作用，防止变量污染。
缺点：

• 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以滥用闭包会造成网页性能问题，在IE9之前可能会导致内存泄露。
  解决办法：在退出函数前，将不适应的局部变量删除（如手动赋null）。

• 由于闭包涉及跨域访问，所以会导致性能损失。
  解决办法：可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响。

12.css有哪些计算属性

css计算属性：width，height，margin，padding，border，font-size，line-height，top，left，right，bottom，transform，transition，calc()
vw,vh：这两个单位用于定义元素的宽度和高度，分别表示视口宽度和高度的百分比。
两个特殊的css属性：
inherit：强制（手动）继承，将父元素的值应用到该元素。
initial：初始值，将该元素的属性变为默认值。

13.js如何计算宽高

1. offsetWidth 和 offsetHeight：元素在页面中占据宽高总和（包括滚动条）
2. clientWidth 和 clientHeight：获取元素可视部分的宽高
3. scrollWidth 和 scrollHeight：滚动宽度和高度
4. innerWidth 和innerHeight：获取窗口的宽度和高度（包括滚动条）