2022前端最常见的面试题(卷起来吧小伙子们)

1. 什么是mvvm 、 mvc 模型？

     MVC: MVC即model-view-controller（模型-视图-控制器）是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处是：保证了模块的智能单一性，方便程序的开发、维护、耦合度低。

     mvvm: MVVM：MVVM即 Model-View-ViewModel，(模型-视图-控制器)它是一种双向数据绑定的模式，用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图，视图改变会影响数据

2.async await 是什么？它有哪些作用？

     async await 是es7里面的新语法、它的作用就是 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。它可以很好的替代promise 中的then

  async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

3.什么是深拷贝、什么是浅拷贝？

     浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

     深拷贝会拷贝所有的属性，并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。

4.什么vuex ,谈谈你对它的理解？

1. 首先vuex的出现是为了解决web组件化开发的过程中，各组件之间传值的复杂和混乱的问题

2. 将我们在多个组件中需要共享的数据放到store中，

3. 要获取或格式化数据需要使用getters，

4. 改变store中的数据，使用mutation，但是只能包含同步的操作，在具体组件里面调用的方式this.$store.commit('xxxx')

5. Action也是改变store中的数据，不过是提交的mutation，并且可以包含异步操作，在组件中的调用方式this.$store.dispatch('xxx')； 在actions里面使用的commit('调用mutation')

5. 箭头函数有哪些特征，请简单描述一下它？

   箭头函数没有自己的this，this指向定义箭头函数时所处的外部执行环境的this

   即时调用call/apply/bind也无法改变箭头函数的this

   箭头函数本身没有名字

   箭头函数不能new，会报错

   箭头函数没有arguments，在箭头函数内访问这个变量访问的是外部执行环境的arguments

   箭头函数没有prototype

6.BFC是什么？

     BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题。

     BFC是值浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

7.CSRF 和 XSS 的区别?

区别一：

• CSRF：需要用户先登录网站A，获取 cookie

• XSS：不需要登录。

区别二：（原理的区别）

• CSRF：是利用网站A本身的漏洞，去请求网站A的api。

• XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。

8.知道lodash吗？它有哪些常见的API ？

   Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。

  _.cloneDeep 深度拷贝

  _.reject 根据条件去除某个元素。

  _.drop(array, [n=1] ) 作用：将 array 中的前 n 个元素去掉，然后返回剩余的部分.

9.http状态码分别代表什么意思？

1xx 表示HTTP请求已经接受，继续处理请求

2xx 表示HTTP请求已经处理完成(200)

3xx 表示把请求访问的URL重定向到其他目录(304资源没有发生变化，会重定向到本地资源)  

4xx 表示客户端出现错误(403禁止访问、404资源不存在) 5xx 表示服务端出现错误

10.cookie和session 的区别?

• 1、cookie数据存放在客户的浏览器上，session数据放在服务器上。

• 2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗

  • 考虑到安全应当使用session。

• 3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能

  • 考虑到减轻服务器性能方面，应当使用COOKIE。

• 4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

• 5、所以个人建议：

  • 将登陆信息等重要信息存放为SESSION

  • 其他信息如果需要保留，可以放在COOKIE中