总结一下之前遇到的120个面试题

没有归类的写，但是涉及到的还是蛮多的，坚持看完哦！

0、vue 和 react 的区别

共同点 ：

	都支持组件化 都是 javascript 的 ui 框架,数据驱动视图,
	都使用虚拟 Dom 实现的,
	都有自己的状态管理体系 react 有 redux    vue 有 vuex
	！！重点并且体现经验的点：
	只有框架的骨架,其他的功能比如路由,状态管理等是框架分离的组件

区别 ：

vue

react

vue 是 MVVM 模式的，数据是可变的，使用的是模板，支持双向数据绑定；内置了很多的东西，追求的是开发的简单，易学易会；同样是操作虚拟 dom，就性能而言存在很大优势，会跟踪每一个组件的依赖关系，不会去比较整颗组件树；去更加细粒度的去更新状态有变化的组件；在 vue 中，state 对象不是必须的，数据是由 data 属性在 vue 对象中进行管理，vue 提供了优化的重新渲染；最新的文档和简单的语法可以使用 vue，因为小，快，灵活，有丰富的 html 模板，易于开发。

react 针对的是 MVC 的 view，所有组件的渲染功能使用的都是 jsx , jsx 就是 xml 的语法编写的，数据是不可变的，单向数据流，追求的是方式是否正确，如果某个组件状态发生变化，react 会把这个组件还有这个组件的所有后代组件全部重新渲染，不过重新渲染并不是代表全部丢掉上一次的渲染结果，react 通过 diff 去比较两次虚拟 dom，比较之后再反映到真实 dom 上，如果说组件树比较大，diff 算法也是一笔开销，react 提供出解决方案，相比之下 react 功能没有 vue 模板系统的丰富，需要从组件中分离出 html 代码，在性能方面，当组件状态发生改变时，react 机制会触发整个组件树的重新呈现，state 对象在 react 中是不可以改变的，也就是不能被直接改变，需要 setState 方法进行更新状态，需要构建移动应用程序或者大型的应用程序可以使用 react，因为轻量级，易于版本的迁移；

1、hash 和 history 的区别 ：

原理：
	浏览器向服务器发送请求；服务器监听端口 如果有请求过来就解析 url 地址；
根据客户端的路由配置返回相应的数据；

	只可以添加短字符串；hash change
	history：怎么实现跳转的  实现原理
	push state
	pop   state

hash	history
不会重新加载页面，只有 hash 符号之前的内容会被包含在请求中，即使没有做到路由的全覆盖，也不会返回 404 错误；只可以添加短字符串	history 模式下，前端的 url 必须和实际向后端发起请求的 url 一致，如果后端缺少对 .com 后边的路由处理，将会返回 404 错误；一般需要后端将所有的页面都配置重定向到路由的首页的路由；
hash 模式可以支持低版本的浏览器和IE浏览器	~

2、箭头函数和普通函数的区别 ：

箭头函数	普通函数
箭头函数带箭头； 箭头函数的 this ，就是定义时所在的对象；永远指向其上下文的 this ，如上面代码没有为 subclassA 指定调用者，它就默认指向了 window ，而 subclassB 则指向其上下文 ；箭头函数不可以使用 arguments ，因为 arguments 在函数体内不存在；箭头函数不能用作 generator 函数，不能使用 yield ；箭头函数不能使用 new ；因为箭头函数没有自己的 this ，没有办法调用 call，apply，没有 prototype；	普通函数不带箭头；普通函数可以有匿名函数，也可以有具名函数；普通函数的 this 指向调用者；

3、img 里边有个 alt 和 title 他们的区别 ：

alt	title
alt 是图片加载失败时，显示在页面上的替代文字；	title 是鼠标移入显示文字，页面优化要在 alt 中文字说明，在 title 里进一步对图片说明；

4、dome0级 和 dome2级 实现的区别：

demo0级	demo2级
会覆盖；一种是 onclick = function ；一种是标签里的 onclick	可以绑定多个时间处理程序，一个是 addEventListener ；一种是 removeEventListener

5、函数柯里化 ：

	接收函数 A 作为参数，运行后能够返回一个新的函数，
	并且，
	这个新的函数能够处理函数 A 的剩余参数，也被称为部分求值；

6、常用的事件修饰符：

符号	名称
.stop	阻止冒泡
.prevent	阻止默认事件
.once	事件只触发一次
.capture	添加事件侦听器时使用事件捕获模式

7、服务器渲染 和 预渲染

服务器端渲染	预渲染
就是用户请求后的服务器渲染，利于优化内容，返回时间快	就是用户请求前的服务器渲染

8、react 的生命周期：

挂载期	更新期	销毁期	新增的两个
constructor, componentDidmount, render	shouldcomponentupdate, componentwillupdate, componentdidupdate	componentWillunmount	getDerivedStateFromProps ( nextProps，prevState ）,getSnapshotBeforeUpdate（prevProps，prevState）

api	~
store	数据池
state	一个 state 对应一个 view
action	监听 state 的变化
dispatch	view 发出 action 的唯一方法
reducer	改变 state 处理层，接收 action 和 state，通过处理 action 返回新的 state
subscribe	监听 state，state 变化 view 随之改变

9、优雅降级和渐进增强的区别：

是在 css3 出现以后火起来的

渐进增强	优雅降级
就是先确保基本的内容能够在所有的浏览器中使用，然后再根据浏览器的情况，为那些更加强大的李兰器提供更好的用户体验；	就是和渐进增强正好相反，先默认所有的浏览器都支持某些高级技术，最后根据浏览器的情况，如果某些技术有些浏览器不支持，那么就不在这个浏览器中使用这个高级技术；

10、px 和 em 和 rem 的区别：

px	em	rem
px 是固定的像素，用于元素的边框或者定位；	相对 px 更具灵活性，更适用于响应式布局，相对于父元素	相对 px 更具灵活性，更适用于响应式布局，相对于根元素

11、js 运行机制

	浏览器缓存是前端开发中不可避免的问题；
	首先就是为什么要缓存，缓存可以减少用户等待事件，提高用体验，减少一些网络宽带的消耗
	常见的缓存机制包括：强缓存和协商缓存；

12、react 中 children 传一个 和 多个 的区别：

一个	多个
不可循环 map	可循环
就是当组件没有子节点就是 undefined，如果有一个节点数据类型就是 object 如果有多个子节点 数据就是 array；

13、vue中的自定义指令：

有五个钩子函数：bind，unbind，inserted，update，componentUpdated；

全局自定义指令	局部自定义指令
使用 Vue.directive( )	组件或构造函数中接收一个 directives 的选项

14、state 和 props 的区别：

state	props
state 是组件内部的状态，不能直接修改，必须通过 setState 来改变值得状态	props 是指组件间传递的一种方式，props 也可以传递 state，this.props 属性是只读的不可修改

15、原型链：

	就是当一个对象的属性时，首先就是查找这个对象有没有该属性，
	如果没有就查找他的原型，也就是 __proto__ 指向的 prototype 原型对象；
	如果还是没有就查找 object 的原型对象；直到找到 object 为止;

16、js 中的异步操作：setTimeout setInterval ajax promise

17、js 继承几种方式：

原型链继承	构造函数继承	实例继承	es5 继承	es6 继承
父类的实例作为子类的原型；易于实现；父类新增实例和子类都能访问；但是如果要新增加原型属性和方法需要在 new 父类构造函数的后面，并且不能实现多继承	复制父类的实例属性给子类；可以实现多继承；不能够复用，不能继承原型属性上的属性和方法；	不限制调用方式，简单易实现，但是不能多次继承	在子类中创建自己的 this 指向，最后将方法添加到 this 中	使用关键字先创建父类的实例对象 this，最后在子类 class 中修改 this

18、深浅拷贝：

简单来说就是 自食其力 和 拿人手短 的区别

浅拷贝	深拷贝
浅拷贝就是不管多么复杂的数据，浅拷贝只拷贝一层，拷贝出来的数据想要改变，原来的数据也会跟着改变；也就是浅拷贝只会拷贝对象的指针，不赋值对象本身，新旧对象还是共用同一个内存，修改时原对象也会修改；	深拷贝是完全拷贝相关变量的所有数据，但是不能拷贝函数 for 循环，定时器，原型链上的属性和方法也不能拷贝

19、es6新语法 ：

这个建议大家去官网看一下 我这里简单说明几个常问到的

	let 声明的变量只能在代码块内有效，不存在变量提升，
		值为 undefined ，有暂时性死区，
		不允许在相同作用域内重复声明同一个变量；

	const 只读变量，值不能改变，只声明不赋值就会报错；当前作用域内有效；

 	对象新增方法：
 			Object.assign() 对象合并  浅拷贝
		    Object.keys()   返回键    对象返回属性名；数组和字符串返回索引下标；
		    Object.values() 返回值    返回一个数组

 		... 展开，或者解构赋值啥的

Symbol 	原始数据类型，
		它对象的属性有两种类型，
		一种是原来就有的字符串 
		一种是新增的 symbol 类型，是独一无二的；
		不会发生冲突；不能使用 new 命令，不然会报错，symbol 不是对象所以不能加属性；

	Set： 
		本身就是一个构造函数，用的时候要 new 一下；
		可以接受一个数组作为参数用来数组的去重；

	Map：
		类似于对象，他的键值对可以是任意类型的；
		提供了 size，has，get 等方法；

20、跨域怎么解决的？

原生用 JSONP 方式：
	创建 script 标签，向服务器请求数据，服务器收到请求后，
	将数据放在一个指定名字的回调函数的参数里边传给前端；
在 vue 中：
	vue.config.js 里使用 proxy  target 进行配置 
在 react 中：
	有两种解决方案：
	一个是在 package.json 中加上 proxy 代理配置，页面中要只用 fetch 请求
	一个是使用 http-proxy-middleware 解决
后端用一个插件叫什么来着  Emm...什么 cors？

21、jsonp的原理

	用户在客户端注册一个 callback，
	然后把 callback 的名字传给服务器，
	这个时候，服务器生成 json 数据，生成函数，
	然后再将 json 数据直接以入参的方式放到 function 当中，
	这样就生成了 js 文档返回给客户端，
	然后客户端浏览器在解析传入到客户端之前注册那个 callback 函数里，
	简单来说就是利用 script 标签没有跨域限制的漏洞达到与第三方通信的 Udine；

22、vue 的生命周期：

创建前	创建后	数据初始化	挂载	更新前	更新后	销毁前	销毁后
beforeCreate	created	beforeMount	mounted	beforeUpdate	updated	beforeDestroy	destroyed

23、vue 中 如何检测数组的变化？

	vue 的 observer 对数组做了单独的处理，对数组的方法进行编译，
	并赋值给 __proto__ 属性上，因为原型链机制，
	找到对应的方法就不会向上找，
	编译的时候也会添加一些索引的方法 push，unshift，splice 等，
	然后进行手动配置 observe，就这样

24、vue 中 v-html 会导致什么问题？

	在网站上动态渲染任意 html，很容易导致 XSS 攻击，
	所以只能在可信内容上使用 v-html，并且永远不能用于用户提交的内容上
	XSS 攻击 是什么？：
			网页开发时候的漏洞，通过恶意指令使用户加载并执行攻击者恶意制造的网页程序；

25、vue双向绑定的原理：

实现双向数据绑定，首先要对数据进行监听，需要一个 observer 监听所有属性；

vue2.0	vue3.0
vue2.0采用的是 Object.defineProperty + 观察者模式，通过 getter 和 setter 劫持各个属性的变化；	vue3.0 刚好解决了这个问题，通过 proxy 对数据进行监听，Proxy 可以对数组和对象进行拦截和监听，使用类似于 debounce 的操作，对其进行优化，使其值响应一次；判断 key 是否是 target 的自身属性，以及value是否和 target [ key ] 相等，可以避免多余的 set / get 操作；
但是优缺点 就是给 data 数组新增属性时，要使用 $set 才能保证新增的属性也是响应式的，不能监听数组的变化，采用的是对数组的方法进行重写（ push, pop,shift,unshift 等等），效率差，	Proxy 只能代理一层，无法深度监听；使用深度递归，对每一层进行监听。巧妙的使用的 Reflect.get ( ) 会返回对象内层结构的特性（下一层），判断下一层是否还是对象，并且使用深度递归操作；之后，使用 weakMap，使用两个 weakMap 来保存原始数据和可响应数据。
这主要是因为对多层数据进行一次性的递归操作，如果数据很多或者是很深层次，这样性能非常的差，因为局限性，无法对新加删除的数据进行监听	访问数据时会从保存的数据中查找，如果没有再对其进行 Proxy 操作；他的优势就是更快，体积更小，更轻松，更易于维护，但是兼容性还不是很完善 ，会出发多次 set / get 响应

26、vue-router 路由守卫有几个钩子函数