一、个人情况？
01 .自我介绍？
二、js部分
01.对js闭包的理解？啥时候会用到？什么时候会造成内存泄漏？
答：闭包就是能够读取到其他函数内部的变量，就是定义在函数内部的函数，好处一个就是读取函数内部的变量，零另一个好处就是能使这个变量一直保存在内存中，缺点就是，内存消耗大，内存会泄露，解决方法是，退出函数的时候将不使用的局部变量全部删除，第二个缺点就是在函数外部能够改变函数内部的值。
内存泄漏：内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束
02.继承？es5的继承和es6的继承有什么区别？
1.原型链继承（让父类的方法和属性在子类的原型链上，子类的prototype指向父类prototype.constructor指向子类的构造函数
2.call或者apply继承（使用call或apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行）
3.寄生组合继承（利用call和空对象，使子类的prototype指向一个空对象，让空对象的prototype指向父类，父类的私有和共有指向子类的私有和共 有。）
4.es6中的extend继承（extend和super，class子类extend父类，可以不写constructor，一旦写了，就要写super，相当于把父类当作方法，让方法中的this指向子类的实例、）
区别：es5的继承实质是先创建子类的实例化对象，然后将父类的方法添加到this上，es6的实质是先创建父类的实例化对象this（所以必须要调用 父类的super方法）然后再用子类的构造函数修改
es6通过class类关键字定义类，里面有构造方法、类通过extend关键字实现继承，子类必须在congstroustr方法中调用super方法，否则新建实例报错，因为子类没有自己的this对象，而是继承父类的this对象，然后进行加工，如果不调用super方法将得不到this对象
ps：子类的super方法指代父类的实例即父类的this对象，在子类构造函数中，调用super后，才可使用this关键字，否则报错
03.原型链？
一切皆是对象，只要是对象就有proto属性，proto存储了存储的指针，当调取一个对象的属性的时候，会先在本身查找，如果没有就会往上查找，最后到达Object.prototype他的proto指向null返回undefind，由proto串起来的就是原型链
ps：对象分为普通对象和函数对象，prototype的本质是普通对象，函数对象的prototype比较特殊，是没有prototype的函数对象
深入：创建对象的方法 1. {} new Object（） 2.构造函数 new 函数名（） 3. Object.create() 此方法把新对象的proto指向create的入参对象
new一个对象发生了什么：四个过程，1.创建一个空对象 2.让构造函数的this指向新对象，并执行构造函数的函数体 3.设置新对象的proto指向构造函数的原型对象 4.判断构造函数的返回值类型，如果是值类型返回新对象，如果是引用类型，就返回引用类型的新对象
构造函数方法：function Person(name,age,family) {
this.name = name;
this.age = age;
this.family = family;
this.say = function(){
alert(this.name);
}
} var person1 = new Person("lisi",21,["lida","lier","wangwu"]);
04.es6新特性？
声明变量的方法 let const 箭头函数 处理异步 promise async 、await ，解构，扩展运算符， for of循环 模块化， proxy预处理
proxy：Proxy的存在就可以让我们给函数加上钩子函数，你也可以理解为在执行方法前预处理一些代码
05.如何做移动端的适配？
第一步：设置当前的head标签，让当前视图的宽度等于设备的宽度并且不让用户缩放
方案一：使用rem为单位，并且利用弹性布局，设置动态rem，1rem 等于窗口的宽度，rem是根元素的字体大小
方案二：利用媒体查询的方式，根据浏览器的宽度设置不同的css样式media（浏览器的宽度）{样式}
单位转换 ： em相对于父元素字体的大小
vw 窗口视图宽度的百分之一
vh 窗口视图高度的百分之一
06.防抖和节流？
防抖：就是在函数触发n秒后再执行，如果函数在n秒内连续被触发，则重新计时只执行最后一次触发，实现方式就是利用延时器和清除器，先清除上一次的触发，再延时函数此次的触发 一般在重复请求的时候
节流：在规定时间内指触发一次函数，如果在规定时间内触发多次函数，也只生效一次，实现方法就是利用时间戳，利用现在的时间戳减去上一次触发事件的时间是否在规定时间内，在规定时间内则不执行，不在规定时间内则执行 一般在上拉加载下拉刷新的时候
07.浏览器的兼容？
css中 1.不同浏览器默认的padding和margin不一样
2.设置最小高度min—height的方式不一样
3.设置不同浏览器的滚动条也不一样
js中：获取事件对象的兼容性写法 e||window.event
08.夜间模式怎么做？
使用css变量实现主题切换 ，先用根伪类选择器 ：root定义变量的属性值 然后利用媒体查询监控浏览器的模式然后切换css变量值,或者利用js调整
09.异步的处理方式？
1.用回调函数，缺点是会造成地狱回调
2.promise.then
3.async awat
10.如何实时更新页面的数据？
1.使用定时器隔一段时间请求一次
2.使用websocket进行双向通信
11.ngnix的配置？
ngnix重庆就是ngnix--reload
bgnix配置都在nginx.conf文件里面
12.cookie、localstorage、sessionstorage的区别、
生命周期：cookie可设置失效时间，没有设置的话关闭浏览器失效
localstorage：除非被手动清除，否则永久有效
seeionstorage：仅在当前页面有效，关闭页面或浏览器就会删除
存放数据大小： cookie只有4kb
loaclstorage和sessionstorage都有5Mb
请求： cookie每次请求都会携带在请求头中
localstorage和sessionstorage指挥存在浏览器中，不参与服务器通讯
13.权限控制怎么做
权限控制最好后端来做，根据用户的id不同给不同的权限，前端做的话不安全，也可以做，做路由的显示和隐藏
14.请求拦截怎么做？
一般就是封装axios 在请求的时候吧token带到请求头中去，请求拦截：axios.interceptors.request.use响应拦截axios.interceptors.response.use
15.国际化怎么做？
利用插件，vue和react都有，先是加载国际化语言的资源实现懒加载，切换语言，自动翻译就行了
16.ui库用过哪些组件？
时间选择器，输入框搜索，分页，图片上传，
17.rem的算法？
rem就是根元素body字体的大小，默认16px做适配的时候，可以动态设置，获取窗口的大小设置
18.声明变量的方式？const一个变量再对对象进行操作，值是否改变？
var：变量可以提升，代码块外部可以调用
let：变量不可以提升，存在于块级作用域，
const：变量不可以提升，存在于块级作用域，赋值后值不可以改变
ps:const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。
function:允许在块级作用域内声明函数，会提升到全局作用域或者函数作用域的头部。
import：用于加载文件大括号里面用于接收一个或者多个变量名，变量名与你想导入的变量名相同
class：可以看成是一个语法糖，他的绝大部分功能es5都可以做到，新的class只是让对象原型更加的清晰，更加接近面向对象的写法，constrouctro方法就是构造方法，而this关键字代表实例化对象
19.xhtml和html的区别？
主要体现在代码规范上，xhtml（可扩展超文本标记语言）比html（超文本标记语言）更加严格规范
例如，大小写敏感，结束标签必须关闭，必须只有一个根元素
20.重排和重绘？
重排：重新生成布局，重新排列元素，重排也叫做回流，
重绘：元素的外观被改变，例如元素的填充颜色。
优化：使用定位脱离文档流，或者使用display;none减少重排次数
21.宏任务和微任务是啥？
微任务和宏任务皆为异步任务，它们都属于一个队列，主要区别在于他们的执行顺序
宏任务：常见的定时器，用户交互事件
微任务：promise相关的事件
ps：当上下文的同步任务都执行完毕的时候执行异步代码，同一个层级下微任务比宏任务先执行，也就是promis比setTimeout先执行，从全局上下文退出前（全局的同步代码执行完毕后）,开始收集当前层级的微任务和宏任务,然后先清空微任务队列,再执行宏任务
22.uni-app是啥？
uniapp是一个使用vue开发的跨平台应用的前端框架，可以编译到安卓，ios，小程序多个平台，使用hbuilder编辑器
23.退出登录切换身份数据怎么处理？
每个登录都会带有特定的token当用户同时登录时，会挤下线，退出时会删除token
24.html的块级元素，行内元素，行内块都有哪些标签？
块级元素：div、p、h1-h6、ul、dl、li
行内元素：span、lable、a、b、i
行内块级元素：img、input、（可设置宽高内外边距）
25.数组的方法？
改变原数组的：shift、unshift、pop、push、reverse、sort、splice
不改变原数组的生成新的数组：concat、join、slice、（map、foreach、some、filter、every、reduce）
es6 数组的方法，Array.from(new Set(a)) new.set方法会给数组去重，arrgy.from可以把类数组的对象转换为真正的数组对象,也可以把对象编程数组
Array.of() 生成一个数组
find 、indecOf、includes、findIndex扩展运算符
26.对象的方法？字符串的方法？
对象的方法：Object.assion (合并对象，相同会被覆盖)、json.parse(json.stringify())深拷贝、Object.entries()返回一个对象数组 Object.is()比较对象、Object.key（）返回对象的属性名数组 Object.values（）返回对象的属性值数组
字符串的方法：split(字符串的分割)、indexof、lastindexof、substring字符串截取、replace、search
27.树状结构数据怎么遍历？
使用递归在里面判断是否有子节点然后赋值
28.浅拷贝和深拷贝？
浅拷贝：拷贝的是内存地址，会改变原数组 方法：直接等于、Object.asssign 、lodash里面的clone、展开运算符
深拷贝：开辟一个新的内存空间，拷贝一个新的数据，不会影响原数据、方法：json.parse(json.stringify())/lodash里面的cloneDeep，循环递归赋值
29.es6 讲详细一点？
参照04
30.this的指向问题？
箭头函数的this指向指向他外层的this，箭头函数的this不会被修改
bind多次只认第一次bind的，this不会被修改
apply和call的第一个参数都是this区别在于apply实参放在数组中call的实参是逗号分隔的
new函数创造对象this指向js创造的新对象
this最终指向windown
31.垂直居中的方式有哪些？
行内元素； vertical-align:middle;
弹性盒： align-items: center;
绝对定位： position: absolute;
top: 50%;
transform: translate( 0, -50%);也可以margin-top: -0.5高度;
还可以
position: absolute;
top: 0;
bottom: 0;
margin: auto 0
水平居中的方式
textalin：center
margin：0 auto
弹性盒： justify-content: center;
绝对定位三种 position: absolute;
left: 50%;
transform: translate(-50%, 0);还可以margin-left: -0.5*宽度
还可以
position: absolute;
width: 宽度;
left: 0;
right: 0;
margin: 0 auto;
32.promise的原理？自己封装？。then后面可以接几个参数？
参照21、09
.then后面可以一直链式操作
var promise=new promise(resolve,reject)={
if(操作成功){
resolve（成功）
}
else{
reject（error）
}
}
promise就是解决异步问题的
promis常用的api promis.then：处理异步获取的数据/ promise.race：谁最快用谁的/promise.all：解决并发问题，多个异步并发获取最终结果/promise.catch如果有异常
33.为啥会跨域？跨域的解决方式？jsonp为啥可以解决跨域？
同源策略：协议、域名端口相同，没有同源就会跨域
解决方式：jsonp方式：利用script标签没有限制的漏洞网页可以得到其他来源json数据，jsonp一定需要服务器做支持
ngnix做反向代理方式
34.输入url地址，浏览器发生了什么？
1.DNS解析
2.发起tcp连接 三次握手四次挥手
3.发送http请求
4.服务器处理请求并且返回http报文
5.浏览器解析并且渲染页面
6.连接结束
35.箭头函数和普通函数的区别？
箭头函数没有prototype所以箭头函数本身没有this，他的this指向外层的普通函数，不能修改他的this指向
36.弹性布局？
分为主轴和纵轴
主轴对其方式 justify-content
纵轴的对齐方式 align-items
37.怎么判断对象不是一个普通对象？
在研究react-redux和redux源码时，出现一个判断对象是普通对象方法isPlainObject 通过对象的Object的静态方法getPrototypeOf，来获取当前对象的__proto__。
function isPlainObject(obj) {
if (typeof obj !== 'object' || obj === null) return false
let proto = Object.getPrototypeOf(obj)
if (proto === null) return true
let baseProto = proto
while (Object.getPrototypeOf(baseProto) !== null) {
baseProto = Object.getPrototypeOf(baseProto)
}
return proto === baseProto
38.路由的hash模式为什么会有#号？hash和history的区别？
hash模式是通过改变锚点(#)来更新页面URL，并不会触发页面重新加载，我们可以通过window.onhashchange监听到hash的改变，从而处理路由。
history模式是通过调用window.history对象上的一系列方法来实现页面的无刷新跳转。
在hash模式下，所有的页面跳转都是客户端进行操作，因此对于页面拦截更加灵活；但每次url的改变不属于一次http请求，所以不利于SEO优化。
在history模式下，借助history.pushState实现页面的无刷新跳转；这种方式改变了url，如果重新刷新页面会造成一个新的http请求，因此会重新请求服务器，这也使得我们必须在服务端配置好地址，否则服务端会返回404，为确保不出问题，最好在项目中配置404页面
39.弹性盒的用法？
参照36
40.数据的请求拦截和响应拦截？
参照问题14
41. webpack是什么？怎么使用？怎么优化？出口和入口的参数？用过哪些插件？
webpack：自动打包机，构建工具，优化项目
入口、出口、模块（loader）、插件配置（plugin）、devserve
loader：css、sass和less打包，js打包，图片打包的loader
plugin：html压缩、消除未使用的css
42.echart怎么使用，使用过哪些东西？
echart数据可视化，柱状图，折线图，引入给一个展示的div即可，
43.ajax原理？
ajax就是异步请求数据的web开发技术，核心是XMLHttpRequest对象，使浏览器可以发送http请求和接受http响应
44.怎么自定义组件？
就是把页面公用的东西封装成一个组件，让所有的地方都可以用
45.请求数据get和post的区别？
get用于请求数据，post用于获取数据
get有长度限制(受限于url长度限制最多2048字节)post长度没有限制
get请求的数据会附加在url之 ，以 " ？ "分割url和传输数据，多个参数用 "&"连接，而post请求会把请求的数据放在http请求体中。
get是明文传输，post是放在请求体中，但是开发者可以通过抓包工具看到，也相当于是明文的。
get请求会保存在浏览器历史记录中，还可能保存在web服务器的日志中
46.页面策略是什么？
参照33就是同源策略
47.正则表达式的原理？
正则表达式文本处理工具，目的是为了字符串模式匹配
定义一个正则表达式 var reg=/i,g/
reg.test() reg.exec()这个方法可以实现匹配全局，并返回分组的结果
48.bom是什么？
Javascript 由三部分构成，ECMAScript，DOM和BOM,
ECMAScript(核心) 描述了JS的语法和基本对象
DOM 是文档对象模型，处理网页内容的方法和接口。是W3C 的标准； [所有浏览器公共遵守的标准]
BOM 是浏览器对象模型，提供与浏览器交互的方法和接口。各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 浏览器的标签页，地址栏，搜索栏，书签栏，窗口放大还原关闭按钮，菜单栏等等
49.怎么判断页面是否加载完成？
用document.onreadystatechange的方法来监听状态改变
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
方式一：window.onload：
方式二：$(document).ready()：
50.原生的生命周期？
js变量的生命周期
1变量声明
2变量提升
3作用域
4垃圾回收
51.http和https的区别？
HTTPS比HTTP多了一层TLS/SSL协议
解决了1、隐私泄露 2、页面劫持风险
优点：1、身份认证，2、内容加密——防窃听、3、一致性校验——防篡改、4、HTTPS网络传输安全系数相对较高，可以大幅增加中间人攻击的成本
52.递归里面有几个函数？
函数调用自身
53.数据类型？es6新增的数据类型？检测的数据类型有哪些？
6种数据类型 null、undefind、boolean、number、string、object、
symbol 为ES6新增的数据类型。表示独一无二的值，使用Symbol()定义(S大写！)
54.seo优化的方法？
1.网页布局简单优化，尽量扁平化。
2.扁平化目录层次
3.导航优化必须加上title和alt
4.语义化标签和h1之类的
5.减少http请求数量
6.使用懒加载。
7，减少重排
8.使用cdn缓存
55.盒子居中的方法？
参照31
56.http的协议？
http协议：超文本传输协议，从客户端到服务器的运作流程协议，客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据，HTTP协议是TCP协议的一个子集
http请求的方法：get、put、delete、post
状态码：2**一般是请求成功
3**一般是请求重定向
4**请求客户端报错
5**一般是服务端报错
57.前端表单提交的数据格式？
提交的方式可以是post也可以是get
数据格式：第一就是 form—data格式
第二：默认的是application/x-www-form-urlencoded格式
第二以前也有json格式的，现在取消了
第三也有文本字符串格式的
58.for循环和forEach的区别？
for：可以使用break中断循环，可以嵌套函数return
foreach：不能使用break，不能return
map：不能改变原数组，可以break可以return
使用数组的方法可读性更强操作更加简单高效
59.事件冒泡，事件捕获，阻止的方法？
事件冒泡：最内层的盒子由内向外触发，阻止方法：stopPropagation()
事件捕获：把事件监听addEventListener()方法的第三个参数由的false修改为了true,也就是使用捕获方式获得button，事件就会从外向内触发。阻止的方法： event.stopImmediatePropagation();或者stopPropagation()都可
60.数组map和reduce和foreach的区别？
参照58；
foreach：
* 没有返回值，只针对每个元素调用func。
* 优点：代码简介。
* 缺点：无法使用break，return等终止循环
map：
* 有返回值，返回一个新的数组，每个元素为调用func的结果。
some：
* 返回一个Boolean，判断是否有元素符合func，如果有一个符合条件，就会终止循环，返回true。
every()
* 返回一个Boolean，判断每一个元素是否都符合func，如果有一个不符合，就会终止循环，返回false。
filter()
* 有返回值，返回一个符合func条件的数组的集合
reduce()
* 让数组中的前项和后项做某种运算，并返回运算结果
find()
* 不创建新数组，不改变元素组
* 在判断中一旦某个元素符合func，立马跳出循环，返回当前符合条件的元素
61.promise为什么可用.then？
参照32
因为.then返回了一个新的promise实例
62.箭头函数和匿名函数的区别？
参照35
箭头函数没有prototype(原型)，所以箭头函数本身没有this
普通函数
声明：1，直接声明。2函数表达式声明。3.构造函数声明
this指向调用者
this指向可以被call/apply/bind改变。
函数内部包含一个默认的arguments参数数组，它返回函数所接收的所有参数
函数域始终高于全局域
默认返回undefined
匿名函数：
声明：表现为function后面不带名字的函数，但是可以用一个变量接收，通过执行这个变量来执行这个函数。
this指向window
具有prototype
this指向可以被call/apply/bind改变
构造函数：
声明：function Person(name,age,city){
this.name=name
this.age=age
this.sayHi=function(){console.log('hi')}
}
特点：首字母大写，new操作符调用，内部用this构造属性和方法，
构造函数在被调用之后会马上创建一个新对象，并将该对象作为返回值返回
具有prototype
箭头函数：
没有this，没有prototype，不可以当作构造函数，不可使用arguments对象
Generator函数：function* gen(x){}
ES6提供的一种异步编程的解决方案，可以理解成一个状态机，封装了多个内部的状态。执行函数会返回一个遍历器对象，可以依次遍历函数内部的每个状态
function命令和函数名之间有一个星号*
不同的是，调用后函数并不执行，返回的也不是函数的运行结果，而是一个指向内部状态的指针对象
async函数
ES2017标准引入了async函数，使异步操作变得更加方便。它是Generator函数的语法糖，将Generator函数的星号 * 替换成async，将yield替换成await。返回值是Promise
63.前后端发送分别使用什么库？
没看懂略过
64.两个盒子。左边固定宽度右边占满宽度，并且随着浏览器宽度改变有哪些方法？
1.calc()函数，两边都可以浮动，利用CSS的calc()函数来计算右侧宽度值, 需要清除父容器的浮动
2.float + margin-left，因此给左侧盒子浮动, 右侧设置margin-left保持距离即可
3.absolute + margin-left
4.float + BFC 方法,父容器需要清除浮动, 右侧盒子设置了overflow: auto;形成了BFC
5.直接给右侧盒子设置flex: 1, 即可自动填满宽度
65.https加密流程？
HTTPS主要解决了 「 身份的认证 」 还有 「 传输报文的准确性 」 这两点。其实这两点就是基于 「 对称加密和非对称加密 」 还有 「 SSL\TLS证书认证 」 实现的，这里主要讲一下加密。
66.手写冒泡？
参照59
67.手写递归？
扁平化树状数据
function TreeToFlat(data) {
let formatData = []
for (var i = 0; i < data.length; i++) {
formatData.push({
id: data[i].id,
title: data[i].title,
})
if (data[i].children) {
formatData = formatData.concat(TreeToFlat(data[i].children));
}
}
return formatData;
}
console.log(TreeToFlat(treeData),'输出为扁平化结构
68.数组的去重？
1.双循环去重，定义一个空数组，如果没重复就添加进去
2.indexOf方法去重
for (let i = 0; i < arr.length; i++) {
if (res.indexOf(arr[i]) === -1) {
res.push(arr[i])
}
3.new Set去重 return [...new Set(arr)]
4. Array.from(new Set(arr))
ps：new Set 返回的是一个不重复的 set结构数据
69.https的了解？tcp协议是什么？
参照51
就是超文本传输协议，位于TCP/IP四层模型当中的应用层。
HTTP协议通过请求/响应的方式，在客户端和服务端之间进行通信。
通过对称加密和非对称加密，公钥和私钥已经证书保证http传送的安全
70.手写promise？promise式同步还是异步？promise的常用方法？请求数据一个在promise一个在setiomeout哪个先执行？
参照32、61、21、09
new promise(resolve,reject){}
promise是异步的也是宏任务的一种settionmeout是微任务
promise先执行
71.css定位？
绝对定位 absolute 相对于父元素定位
相对定位 relative 相对于自己原始位置定位
固定定位 fixed 相对于浏览器窗口定位
粘性定位 sticky 出现在正常的流中，定位，但是不会超过父元素
72.node多进程问题？
child_process 模块提供了以下 4 个方法用于创建子进程
73.const可以重新赋值吗？
参照18 不能重新赋值
74.浏览器渲染html的步骤？
参照34
1、构建DOM树
2、构建CSSOM
3、构建render树
4、布局通过render树，浏览器开始计算各个节点的位置和样式。
5、绘制遍历render树，在页面上绘制每个节点
6、重排reflow
7、重绘repaint
ps：1、如果遇到link和style，那就就会去下载这些外部的css资源，但是css跟DOM的构建是并行的，就是说不会阻塞DOM树的构建
2、如果遇到script，那么页面就会把控制权交给JavaScript，直到脚本加载完毕或者是执行完毕
3、页面的渲染是依靠render树，也就是说如果css没有加载完成，页面也不会渲染显示。
4、JavaScript执行过程中有可能需要改变样式，所以css加载也会阻塞JavaScript的加载。
75.https密匙交换的过程？
参照51、60
76.import和require的区别？
尊循的规范
require 是 AMD规范引入方式
import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法
调用的时间
require是运行时调用，所以require理论上可以运用在代码的任何地方
import是编译时调用，所以必须放在文件开头
本质
require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
import是解构过程，
require
const fs = require('fs')
exports.fs = fs
module.exports = fs
import
import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'
export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'
77.iframe传输数据？
iframe是HTML标签，作用是文档中的文档，
iframe可以通过 iframe.contentWindow发送数据
78.export和export defult 的区别？
参照76
1export default 在一个模块里只能有一个，但是export可以有多个
2模块中通过export 导出的(属性或者方法)可以修改，但是通过export default导出的不可以修改
79.webpack常用的loader？webpack的常用指令？
参照41
80.js的数据类型？
参照53
81.值类型和引用类型有什么区别？
基本数据类型存在栈里，引用数据类型在栈里存地址
82.object.create 和 new object有啥区别？
参照03
// new Object() 方式创建
var a = { rep : 'apple' }
var b = new Object(a)
console.log(b) // {rep: "apple"}
console.log(b.__proto__) // {指向Object.prototype}
console.log(b.rep) // apple
// Object.create() 方式创建
var a = { rep: 'apple' }
var b = Object.create(a)
console.log(b) // {}
console.log(b.__proto__) // {rep: "apple"}
console.log(b.rep) // apple
使用new运算符会创建一个新的对象，它继承自构造函数的prototype，也就是说它的__proto__属性会指向构造函数的prototype
Object.create()是使用指定的原型proto对象及其属性propertiesObject去创建一个新的对象
83.数组中嵌套数组怎么扁平化处理？
参照：67
84.jq为什么会淘汰？
前端内容越来越丰富，需要考虑兼容，jq需要直接操作dom，优化性能也主要从dom下手
85.怎么解决小数失精度问题？怎么判断字符串是不是整数？
1，解决小数失去精度问题 四舍五入 toFixed()
2，先扩大相应的倍数，计算完成之后在除去相应的倍数
判断数据类型 typeOf就可以了
86.为啥使用promise而不是用async？
promise是es6
async是es7
87.ajax和axios的区别？
axios是ajax封装更加成熟的请求框架
axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式
88.如何判断对象为空对象？
1、最常见的思路，for…in…遍历属性，为真则为“非空数组”；否则为“空数组”
2.通过JSON自带的.stringify方法来判断
3.ES6新增的方法Object.keys()
89.ts中的interface和type的区别？
事实上这两者非常的像，interface 能做的，type 基本都能做。
一般来说，如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface , 如果不能就用 type 。
1.interface 只能表示像对象那种结构的类型，如果想表示 JS 中的原始类型（undefined, null, boolean, string，number）只能交给 type 老大哥
2. 第二点，type 可以动态计算属性。
第三点，type 声明的类型不能重名，interface 声明的重命名会合并在一块
90.路由有哪几种模式？
参照 38
91.typeof的返回值有哪些？为啥有特殊的？
typeof(undefined); // undefined
typeof(null); // object
typeof(true); // boolean
typeof(1); // number
typeof(''); // string
typeof(Symbol(1)); // symbol
typeof(function () {}); // function
typeof([]); // object
typeof({}); // object
typeof(new Date()); // object
typeof(/abc/ig); // object
typeof(Math); // object
typeof(new Error('error')); // object
typeof null将返回object。因为在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息，000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object，然后被 ECMAScript 沿用了 。
typeof不能准确判别对象类型究竟是什么具体对象。例如typeof {}，typeof new Date(), typeof /abc/ig，typeof Math，都是返回object，有没有可能告诉我们这是一个date对象，那是一个regexp对象呢？。还有一个不能忍受的是，typeof []也是返回object。很多时候，我们业务中希望能准确区分是array还是object。
92.token的使用？
1.首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时间生成 token ，返回给前端；
2.前端拿到后端返回的 token ,存储在 localStorage
3.每次请求接口，在 Axios 请求头里携带 token;
4.后端接口判断请求头有无 token，没有或者 token 过期，返回401
5.前端得到 401 状态码，重定向到登录页面。
93.路由传参怎么加密？
路由传参的方式：
1.parmas
<Link to={ ' /sort/ ' + ' 2 ' } activeClassName='active'>XXXX</Link>
2.query
<Link to={{ path : ' /sort ' , query : { name : 'sunny' }}}>
3.state
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}>
同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏
94.axios的封装？
1.根据环境设置 baseURL
2.统一设置请求头
3.跨域、超时、响应码处理
4.请求、响应拦截
95.vant的常用组件？
日历、按钮、输入框、折叠面板，上拉加载，下拉刷新，分页
96.怎么做到浏览器优化？
参照：54
1.减少HTTP请求
2.非核心代码异步加载（通过script标签）
3.利用浏览器缓存 （强缓存是利用 http 响应头中的Expires或Cache-Control实现的。【重要】）
4.使用cdn
5.图片懒加载，使用精灵图
6压缩js。css代码
参考地址https://www.cnblogs.com/qianguyihao/p/8550195.html
97.css隐藏元素有哪些方法？
1.display：none
2，opacity: 0;
3.visibility: hidden;
4.定位偏离文档很远
v-if 、v-show
98.反向代理的原理？
隐藏了真实的服务器，为服务器收发请求，使真实服务器对客户端不可见;
方式是指以代理服务器来接受Internet上的连接请求，然后将请求转发给内部网络上的服务器；并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。
通过neginx反向代理
99.this的指向？
参考 30
100.清除浮动的方法
浮动会造成父元素的高度塌陷
1.overflew：hidden 造成BFC就可以了
2.万能清除法 ：clear
伪元素清除浮动的核心原理其实是在给父元素增加块级容器，同时对块级容器设置clear属性，使其能够清除自身的浮动
101.首页启动很慢怎么办？
1.可以使用服务端渲染，比如react的服务端框架，next.js,在服务端把渲染逻辑处理好，将渲染好的html直接返回给前端展示，缺点是，不利于维护，服务端会增加服务器的压力
2.骨架屏，就是预加载，在页面展示和数据加载之前，先展示大概样式，在骨架屏页面中，图片文字，图标都是用灰色原标展示，加载完成后，再进行页面替换
3.参考seo优化
图片懒加载，使用精灵图之类
102.盒子模型有哪些？
标准盒模型，width只包括内容不包括边框pandding和maring
怪异盒模型 width包括内容boder和padding
103.http协议的理解？
超文本传输协议：就是再两点之间进行，文本，数字，图片视频等超文本数据传输和协议
http就是一种无状态协议，他对用户的操作没有记忆功能
http和https的区别，https加了一个证书验证，而且还有加密，安全性更高
get和post的区别就是，get参数在url中可见，不够安全，相当于请求信息
post的参数在请求体中不可见，相当于提交信息，安全一点
TCP是传输控制协议，能够保证计算机连接到internet和他们之间的数据传输，通过三次握手建立连接，连接成功就可以发送数据了
三次握手
客户端发送报文服务端 第一次握手 确认客户端发送消息是否正常
服务端返回回应客户端 第二次握手 确认服务端是否能接受客户端消息
客户端返回回应给服务端 第三次握手 确认客户端能收到服务端消息
四次挥手
客户端发送报文给服务端 第一次挥手
服务端收到报文处理发送给客户端 第二次挥手
服务端处理好报文请求发送给客户端 第三次挥手
客户端收到报文发送给服务端 第四次挥手结束
服务端收到FIN报文时，很可能并不会立即关闭SOCKET，所以只能先回复一个ACK报文，告诉客户端，"你发的FIN报文我收到了"。只有等到我服务端所有的报文都发送完了，我才能发送FIN报文，因此不能一起发送。故需要四次挥手。
104.三栏布局的实现多种方法？
参照两栏布局：64
1.浮动 左边盒子浮动左边右边盒子浮动右边 中间盒子的宽度使用calc计算
2.定位 左边右边中间都定位
3.flex布局 左右两边写上自己的宽度，中间的flex为1
4.grad 网格布局
5，浮动加定位也可
105.插件能在框架中使用的原理？
用的语言相通，相当于就是一个组件
106.webpack的loader和plagin的区别？
webpack，模块打包css，压缩图片，主要用来加载文件
webpack 的plug主要是扩展功能，强化webpack的功能，比如生成html文件的插件，比如抽取css文件的代码
107.讲一下websocket？
主要就是服务端能够主动发送消息给客户端，实现网络通讯，实现了实时双向通信
108.split和join的区别？
spilt是切割字符串
join是将数组变成字符串，
109.http的请求头都有什么属性？
## Content-Type：用于客户端告诉服务器实际发送的数据类型
### Cache-Control与Expires之强制缓存
referer表示请求文件的网址，请求时会携带。为了防止自己网站的文件被外网直接引用，可以通过比较referer，即请求的地址，与本地地址比较，设置防盗链
110.call、aply、bind的区别？
都是改变函数的this指向
call绑定this的时候，后面是绑定逗号分割的参数
apply 绑定this的时候，后面绑定的参数，是一个数组
bind 也是改变this指向并且返回一个函数，需要再次调用
111.讲一下缓存？
浏览器缓存(Brower Caching)是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力
##### 强缓存：浏览器不会像服务器发送任何请求，直接从本地缓存中读取文件并返回Status Code: 200 OK
##### 协商缓存: 向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；
都是在http头部
112.实现一个0.5px的线？
直接写一个盒子高度0.5px会有兼容问题，后面可以使用calc计算会让线变得虚化
可以使用transform: scaleY(0.5); transform-origin: 50% 100%;
113.axios怎么配置？
就是二次封装axios，在请求拦截中设置token请求头，设置统一的请求地址，传参方式，解析之类的
114.http请求有哪些？
get post push delect
115.做过哪些页面性能优化？
参照54
116.浏览器接口的返回码都是什么意思？
2** 请求成功
4** 请求错误
5** 服务端错误
117.说一下媒体查询啥意思？
css的`media`描述了设备的类别。媒体类型是可选的，默认是`all`类型
可以看出设备的宽度的性能和类别
118.清除浮动的方法？
overflow：hidden
万能清除法
父元素加一个高度
使用一个clear的空标签
119.css动画有哪些方法？
animation（动画）
transition（过渡）
transform（变形
translate（移动）
120.为什么会造成内存泄露？怎么解决？
创造了一个没有被销毁的内存空间，解决方法是，执行完成后删除
121.js的循环有哪些？区别在哪？
for循环
for in循环遍历的是对象的属性
for of循环也支持字符串遍历
while循环
foreach
map
122.css怎么提高样式性能？
1.把关键的元素使用内联表达式写在html上
2.异步加载css 使用js创造link标签，然后在加载css
3.webpack压缩css只加载有用的css
4.不要使用@import引入标签多适应link标签
123.sass和less的区别？特性？
编译环境不一样 sass需要引入ruby less只要引入less。js就行
变量符不一样 sass是$ less是 @
124.h5里面的拖拽？
- ondrag 元素正在拖动时触发(整个过程持续触发)
- ondragstart 用户开始拖动元素时触发
- ondragend 用户完成元素拖动后触发
- ondragleave 当鼠标离开拖拽元素时调用
- ondragenter 应用于目标元素，当拖拽元素进入时调用
- ondragover 应用于目标元素，当停留在目标元素上时调用(持续触发)
- ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
- ondragleave 应用于目标元素，当鼠标离开目标元素时调用
被拖动元素(除img,a标签，默认可以拖动)需要添加`draggable="true"`属性.
125.讲一下BFC？
格式化块级上下文`BFC`是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用`BFC`呢，`BFC`可以看做是一个`CSS`元素属性
怎么触发 - overflow: hidden
float的值不为none。
定位也可以
- display: inline-block
- position: absolute
- position: fixed
- display: table-cell
- display: flex
解决高度塌陷问题
解决外边距重叠问题
解决两栏布局
126.axios和fetch？
最大的不同点在于Fetch是浏览器原生支持，而Axios需要引入Axios库。
Axios可以兼容IE浏览器，而**Fetch在IE浏览器和一些老版本浏览器上没有受到支持**，
127.对象转数组，数组转字符串的方法？
Object.keys方法是JavaScript中用于遍历对象属性的一个方法 。它传入的参数是一个对象，返回的是一个数组
Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值。正好与Object.keys相对接
join方法转字符串
128.使用箭头函数要注意哪些东西？
箭头函数没有this而是继承父作用域的this
三、vue部分
01.vue里面的计算属性可以传参吗？
computed是自动监听依赖值得变化，从而动态的返回内容，对数据进行逻辑处理，减少模板中的方法，监听数值得变化，由两部分组成，get和set，获取计算属性，和设置计算属性，也可以传参，返回一个回调函数，把参数传进去就可以了
02.vue的计算属性可以实现双向绑定吗？
利用计算属性的get和set方法可以实现
03.vue的属性修饰符和事件修饰符？
输入框的延时啊lazy，消除空格trim，输入框转化为数字number，阻止冒泡stop，事件捕获capture,只能点击本身self,只能点击一次once，阻止默认事件prevent，
点击事件的left right middle
keycode
04.vuex的应用场景？vuex的原理？
状态管理工具，公共数据管理，
vuex本质是一个对象，vuex有两个属性，一个是install,一个是store类，install这个方法将store这个实例挂载在所有的组件上，store这个类，拥有commit,dispach,action,mutation这些方法，store将用户传入的state包装成data，作为实例的参数
vuex有五个核心属性
state,getter,mutation,action,modules
状态储存在state中唯一改变的方式是mutation,
getter属性相当于vue的计算属性，
mutation必须是同步的方法使用commit调用
action提交的是mutation而不是直接改变状态，使用dispatch调用
05.双向绑定的原理？
vue2.0双向数据绑定，是利用数据劫持，再使用发布订阅模式，触发监听回调，简单来说，就是使用对象的object.defineproperty方法劫持各个属性的getter和settor方法，在数据变动的时候发布给订阅者，实现方法，就是在input方法，添加一个事件，调用对象的setter方法，改变data的值，从而实现双向绑定
vue3.0中使用proxy代理，实现双向绑定，proxy可以直接监听对象，而不是属性，可以监听数组的变化
object.definproperty不能监听数组的变化，
object.definproperty只能监听对象的属性，
06.v-if、v-for的区别？v-for为什么优先级比较高？
在vue2.0中
v-for不推荐和v-if一起使用，因为v-for的优先级更高，会出问题，
在vue3.0中，v-if的优先级更高
主要是render函数在作怪，只要有数据更新就会遍历改变，
07.组件之间的通讯？
父传子
属性传值，prop接收
@方法传递 this.$emit(方法名)调用
子传父
子传父，通过使用父组件传过去的方法可以接受数据，也可以调用父组件的实例
父组件使用ref传递直接使用子组件的方法，
祖孙组件
provide提供方法inject注入接收
兄弟组件
eventbus
公共数据
vuex
08.vue的两个基本概念？
两大核心是，双向绑定和组件化
vue的三个基本概念是，props可以在组件外部接受数据，事件，可以在组件内部触发事件，插槽，分为普通插槽和作用域插槽，在组件插入组件
09.第一次页面请求，触发哪几个生命周期？
生成阶段create和挂载阶段munted
10.keep-alive是啥？
页面缓存，保留组件的状态避免重新渲染
11.methods里面能直接写箭头函数吗？
不能 因为箭头函数没有this在vue里面methods的箭头函数是undefind
12.vue的路由的使用？路由的跳转方式？路由守卫的使用，和权限管理？传参方式？vue-router的原理？
建立router.js引入vue和vue-router然后在vue中use注入，然后router.link就是跳转的地址，router-view就是在哪里显示什么画面，- routes 路由映射，什么路由显示什么vue组件
路由的懒加载是这样的
{ path: '/home', component: () => import('../view/Home.vue') }
嵌套路由直接写children就可以了
路由的钩子以及执行顺序
全局路由守卫
1. beforeRouteEnter 进入路由前
1. beforeRouteUpdate (2.2) 路由复用同一个组件时
1. beforeRouteLeave 离开当前路由时
路由独享守卫
1. beforeRouteEnter 进入路由前
1. beforeRouteUpdate (2.2) 路由复用同一个组件时
1. beforeRouteLeave 离开当前路由时
- 触发进入其他路由。
- 调用要离开路由的组件守卫`beforeRouteLeave`
- 调用局前置守卫：`beforeEach`
- 在重用的组件里调用 `beforeRouteUpdate`
- 调用路由独享守卫 `beforeEnter`。
- 解析异步路由组件。
- 在将要进入的路由组件中调用`beforeRouteEnter`
- 调用全局解析守卫 `beforeResolve`
- 导航被确认。
- 调用全局后置钩子的 `afterEach` 钩子。
- 触发DOM更新(`mounted`)。
- 执行`beforeRouteEnter` 守卫中传给 next 的回调函数
路由传参一般有两个query和parmas
query参数就在路由中<router-link to="/user/detail?id=1">用户1</router-link>
获取的时候：this.$route.query.id
params：/router1/:id ，/router1/123，/router1/789 ,**这里的id叫做params**
编程式导航：this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }});
路由起源于后端的网址输入发生响应信息，然后执行对应的函数
路由分为两种一中hash模式一种histor模式，hash 是以#开头，是基于location.hash来实现的
history主要是HTML5的History API 为浏览器的全局history对象增加的扩展方法中的history.back()、history.forward()、history.go()】
13.为什么data是函数不是对象？
因为组件可能被复用如果是对象，所有的数据将会共享同用一个数据对象，通过data函数每次创建一个新的实例，返回一个全新的副本数据对象
14.nexttick的使用？
DOM更新循环结束之后执行的延迟回调。在修改数据之后立即使用该方法，获取更新后的DOM
，就是当页面全部更新完毕后执行的函数，**Vue 在更新 DOM 时是异步执行的**
15.生命周期？mounted之后做了什么？
生成 create
渲染 mounted
更新 update
销毁 destory
在created阶段，对浏览器来说，渲染整个HTML文档时,dom节点、css规则树与js文件被解析后，但是没有进入被浏览器render过程，上述资源是尚未挂载在页面上，也就是在vue生命周期中对应的created 阶段，实例已经被初始化，但是还没有挂载至**$el**上，所以我们无法获取到对应的节点，但是此时我们是可以获取到vue中data与methods中的数据的
mounted已经完成了dom与css规则树的render，并完成对render tree进行了布局，而浏览器收到这一指令，调用渲染器的paint（）在屏幕上显示，而对于vue来说，在mounted阶段，vue的**template成功挂载在$el中**，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，即可以调用节点了
16.调用另一个页面的函数怎么调用？
组件之间的方法传递
父组件使用子组件方法
通过ref获取子组件名称 this.$refs.组件名称.组件方法
子组件使用父组件方法
通过@传递过去，然后this.$emit(方法名)
设置公共的bus 引入公共的bus
bus.$on(方法名，方法=》{})输出
bue.$emit(方法名执行)
祖孙之间 provide提供inject接受
17.data为啥是个函数？
组件会复用，对象中的数据会共用，函数有作用域，会返回一个全新的副本对象，不会引起数据的错乱
18.说一下mixin？
mixin就是混入对象则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件（就是扩展了组件的对象和方法，就算共用了，变量和方法也还是相互独立的）
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。（vuex就是改变公共的数据）
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。（就算同时引入，每个组件的相同引用数据也是独立的，其实就是扩展了每个组件的方法）
19.vue的路由怎么实现跳转的？
vue的路由link标签相当于改变了地址栏的地址，然后根据地址栏的参数引用不同的组件页面就实现了跳转
20.讲一下vue里面的scope
scope就是作用域css，在各组件中定义的css不受污染，可以看到 Scope CSS 的本质是基于 HTML 和 CSS 选择器的属性，通过分别给 HTML 标签和 CSS 选择器添加 `data-v-xxxx` 属性的方式实现。
21.讲一下emit？
$emit触发事件对应的回调函数
$on就是定义一个触发事件
其实就是发布订阅模式
22.怎么自定义一个v-module？
如果自己写那就是，写一个触发事件，改变data里面的值，是最简单的
原理其实就是利用对象的拦截方法，对数据的变化进行拦截，然后使用get方法获取数据然后使用get方法改变数据
23 vue中的插槽
插槽分成三种，匿名，具名，作用域
匿名插槽就是在父组件的子组件中加上html标签写上html，在子组件中写上html元素中slot标签，子组件就会显示，在父元素子组件标签写的html内容的
具名插槽就是在父组件的html元素中加上v-slot名字然后在子组件的solt中加上那么等于那个名字，才会显示
作用域插槽，就是在子组件中显示子组件的数据，父组件才会显示子组件的数据
四、react部分
01.对react的理解？
react是一个js库，遵循组件化，函数式编程，声明式编程，使用虚拟dom来高效的操作真实的dom，遵循组件的单项数据流
全部使用js展示，写法更加的灵活，高效，组件化，分成ui组件和函数组件，使用jsx
02.react的生命周期？
生成阶段 设置组件的属性和默认状态
挂载阶段 componentwillmount（render） componentdidmount
运行阶段 componentwillreceiveProps （接收到属性时触发） shoundComponentUpdata
更新阶段 componentWillUpdate componentDidUpdate
销毁阶段 componentWillUNmount
03.组件之间的通讯？
父传子 通过属性传值，子组件通过props接收
子传父 利用父组件传过去的回调函数传值
跨级组件传值 1.通过层层传递props传值、2.使用context，context就像是一个全局的容器，在任何地方都可以访问到，我们把要通信的信息放在context上createContext，在需要用的地方调用就行了
没有嵌套关系组件的通讯 可以安装一个eventbus，在挂载的时候挂载方法，或者找到公共的父组件进行传值也可以使用redux 3.定义一个全局的context usecontext所有组件都可以用
04.能够手动搭建整个项目吗？
能，使用react-cli 或者webpack
05.react的组件通讯？
父传子
子传父
兄弟直接利用共同的父元素，或者使用redux
06.hook的理解？和class组件对比？hooks用了什么功能？
是react 16.8新增的属性、可以在不编写class情况写，可以使用state以及其他的属性
函数组件的性能比状态组件的性能高很多，hook可以把组件都变成函数组件写，去掉了this，和状态逻辑都可以复用，关注点分离
useState，useEffect,creatContext,
07.react的兼容问题？
使用es6转换出的问题，不兼容es5例如promise，浏览器阻止冒泡的方法不一样，缓存文件华为手机很难刷新清缓存
08.react上线之后的问题？
09.操作属性节点和文本节点的方法？
使用ref
10.react项目初始化。有哪些插件？
react react-dom react-router
11.hook的生命周期？hook用过哪些钩子？hook冷门函数有哪些？
useEffect有两个参数，第一个回调函数会在浏览器完成布局和绘制后完成调用，第二个参数是一个数组
数组里面有值的话，值发生改变，回调函数就会执行
数组里面没有值，相当于conmponentWillMount
数组不存在的时候，每次渲染都会触发
模拟shouldComponentUpdate使用reactMemo
useReducer
12.hook和类组件函数组件的区别？
hook去掉生命周期，去掉this
函数组件没有数数据状态性能更好
类组件有状态，数据容易操控
13.react router的原理以及使用？
路由的使用，先用import引入组件，router link标签代表路由的地址，route标签path代表地址，里面component代表地址对应的组件路由的写法，有动态路由，嵌套路由，路由传值等知识点
前端路由的本质就是，监听url的变化，匹配路由规则，显示相应的页面
react-router的路由分成两种一种是hash路由，地址栏参数带了个#字，然后就是组件的名称，不同的url代表不同的页面代表不同的组件，history，地址栏比hash好看一点，是利用了window.location.pathnamee修改url
14.react redux的异步和同步的处理方法？
redux分为store、action、reducer几个概念、store存放整个应用的state，action事件，是页面往store里面传数据的唯一途径，通过store.dispatch()触发、reducer纯函数唯一改变store数据的途径，同步处理就是页面中创造action对象然后使用dispach触发reducer里面的方法store里面的值就会发生改变。
如果是异步的话，例如当我们dispach方法的时候在reducer之前需要一些额外的操作，就是需要中间件了中间件一般有thunk和saga在获取数据的时候处理就可以了
15.react hook的use Effect的理解？
use Effect的理解可以代替常用的生命周期，他在每次页面渲染的时候都会执行一遍，但是这些函数都是异步执行的，他有两个参数，第一个是执行的钩子函数，第二个是一个数组，当他不存在的时候，每次渲染都会更新，当他存在，但是为空数组的时候，相当于componentdidmount，当他有值的时候，和对应的值绑定更新
16.react项目中最值得讲的技术点？（工程化打包，模块化优化）实际例子？
17.如果组件嵌套比较深，最外层组件要获取最内存的值有哪些方法？
公共的数据可以用redux，或者使用usecontext ，usecontext使用先在根组件使用creatcontext创造一个context，在根节点使用provide包裹子节点讲congtext提供给子节点，将 根节点的context export出去，在子组件中直接引入使用就行了
18.类组件的super有什么作用？不写super有什么影响？
constrrudor里面的super调用时获取父元素的this如果不调用就没有this
19.usecontext和usereducer的理解？
可以使用usecontext和usereducer实现redux功能，useReducer可以让复杂的代码更加的具有可读性，usecontext创建全局的数据不用一层一层的传递，usereducer创建reducer根据不同的dispach改变state
20.useref怎么使用？
useref可以获取jsx中的dom元素，就可以控制dom中所有的东西了，useref也可以保存变量但是有usestate用的少
21.hooks怎么模拟生命周期？
使用useeffect有两个参数，第一个就是钩子函数，第二个是一个数组，当数组不存在，只要页面渲染就会执行，当数组为空，相当于componentdidmount当数组有数据，就是和数据的变化绑定
22.react-router-dom里面用到了什么hooks函数？（usehistory）
react-router5.1版本之后带来了，useparams有了useparams传参就更加的方便了，uselocation查看当前路由，usehistory就是返回上一个路由，直接操纵路由，useroutermouth就是让参数更加的整洁吧
23.react类组件和hooks有什么区别？
以前react分为状态组件和无状态组件，现在hook分为ui组件和函数组件，hooks就是函数组件，性能更加的高效，可读性更强，没有很长的生命周期，代码的层次变得更浅，hook比较好用的函数，usestate，useeffect，usecontext，usereducer，usememo(相当于计算属性)当第二个参数匹配成功的时候才会执行 、usecallback计算属性返回一个缓存函数，useref
24.redux怎么使用？解释一下redux的单项数据流？
redux分为三个概念，store、action、reducer ，store保存数据，action页面一个对象发出dispach让reducer改变store的值，单项数据流就是页面发出action之后，reducer返回一个新的值而不是修改之前的值，适应为可以记录
25.render里面可以使用setstate吗？
render里面不能写setstate会造成死循环，但是在return体中可以写，render应该是个纯函数
26.render什么时候调用？
初次渲染的时候在componentwillmount之后componentdidmount之前执行
更新的时候，在componentshoudupdate之后执行
27.shoundComponentUpdate什么时候用？
是否允许页面更新就是是否允许render函数执行
28.react负责的内容？使用的哪个版本？
两年前是16.6现在是17.0了在2018年底16.5以上就有hooks了
29.this.setstate什么时候是同步什么时候是异步
在一般的onclick事件中会是异步的，除此之外的都是同步的例如监听事件
30.什么是虚拟dom？虚拟dom和真实dom对比？
虚拟dom存在于js中，js中的逻辑直接改变虚拟dom和真实的dom对比，去改变真实dom
31.class组件的props和state的底层原理？
props就是外部传入的数据，state就是自己内部管理自己的数据，
32.redux讲一下？hooks讲一下？ref原理？useEfect第二个参数能不能不写，不写会有什么问题？
redux就是状态管理工具，hooks就是新增优化reactde性能，都是函数组件性能更好，ref就是获取dom节点，useeffect可以不写第二个参数，每次渲染都会更新
33.什么叫做函数组件？
函数组件就是一个函数，没有内部状态，没有生命周期，不需要实例化的组件
34.dispash的三种用法？
直接dispach或者中间件，thunk或者saga
44.react的事件机制？
react的事件机制并没有绑定在真实dom上，而是利用事件委托机制绑定在最外层节点，使用统一的事件监听器执行
45.react的单项数据流原理？
就是父组件通过props传给子组件的数据，子组件不能改变，要想改变，只能通过父组件传过去的回调函数改变
46.react的动态路由怎么配置？
就是使用import引入组件，然后使用路由匹配就好了
47.react的中间件有哪些？
thunk和saga
48.除了在构造函数中绑定this还有哪些方式？
在事件中使用bind绑定this，在constrour里面绑定this，或者使用箭头函数
49.受控组件和非受控组件？
受控组件在state中设置初始值，在表单中通过事件触发，获取事件对象，通过setstate改变值并且进行更新，react比较推荐使用这种
非受控组件，表单数据由自己本身的值显示，也就是默认值是没有的，组件中通过ref获取，不受state和props控制
50.高阶组件？
高阶组件就是接收一个组件，返回一个组件，增加了代码复用性，逻辑抽离，渲染劫持，操作state，反向继承等 本质就是属性代理和反向继承
51.自定义的hooks？
可以使用useref useeffect实现usestate 或者实现防抖节流的自定义hooks
52.store调用dispach的方法？
store.dispach就可以了 dispach（action）就可以了
53.useeffect和componentdidmount的区别？
useeffect是hooks的api有两个参数，第一个是回调函数，第二个是数组，可以不写，可以为空，可以有数据 异步执行
componentdidmount是react的生命周期 渲染完成后同步执行
54.usememo？为什么usememo不能多使用？
usememo就是相当于计算属性，第二个参数一致才会执行，返回参数，usecallback返回一个函数，其作用就是，优化性能，在适当的时候更新值，使用太多，会造成代码冗余，不值得
55.usecallback和usememo的区别？
见54
56.setstate之后触发了什么钩子函数？同步还是异步？
componentwillrecuiveprops、componentshouldupdate，componentwillupdate，componentdidupdate
setstate在onclick事件中是异步的，在除了click之外都是同步的能够立马获取值
57跨域怎么解决？
1，跨域第一就是利用jsonp动态创建script标签，因为script不受同源策略影响
2，使用proxy代理，或者在ngnix使用反向代理
五、项目部分
01.独立完成项目的心得，遇到的bug和心得体会？
会有一种成就感，遇到bug，会觉得有挑战性，只要去花时间耐心解决，觉得很满足，
02.缓存的方式和理解？
浏览器得缓存，也就是http的缓存机制，也就是根据http的报文的缓存标识进行的，分为强制缓存，和协商缓存，都是在浏览器得请求报文中，服务器返回的响应报文中决定是否缓存，协商缓存是在强制缓存失效后，读取的缓存
03.强缓存，cdn缓存是啥？
cdn缓存就是强缓存
04.项目中用到哪些技能点？
05.项目中遇到的问题？都是怎么解决的。解决的方式和方法？
例如，华为手机的缓存问题，加上时间戳，serverconfig加上时间戳，webpack写上自定义的plugin，例如，之前不会gis和openlayers，现在回调用了，
06.页面上遇到的bug怎么解决的？
f12查看问题和报错，看是前端逻辑问题还是后端数据问题，
07.性能优化的方法？
项目优化，一共分为几个部分，图片，js，css，页面的内容，服务器，和cookie，
图片压缩，懒加载，精灵图，或者使用ico图标，先使用缩略图加载图片，然后在加载高质量的
js压缩，使用外部的js和css引入，移出重复的脚本和减少dom操作
css去掉不用的css，使用link标签引入，
页面内容，减少http请求，减少dns查询，避免重定向，预加载，
服务器，使用cdn缓存，避免图片的src为空
减少cookie大小，少用cookie
使用骨架屏
08.项目是单页还是多页？
单页面指的是，只有一个页面，就是一个html文件，页面中分成很多组件，每个组件就是独立的部分他们拥有html和css，用js控制，组件的加载，html只是页面容器，需要哪个组件直接跳转就行了，良好的交互体验，第一次就把所有的资源加载过来了，减少了服务器压力，缺点，第一次加载比较慢，不利于seo优化
多页面应用，说明有多个html文件，多个完整的页面组成，多页面跳转需要刷新所有的资源，公共的css,js需要重新加载，优点，有利于seo，首屏加载快，缺点，页面切换慢，公用的css.js需要重新加载，重复代码比较多
大型项目都是多页的，使用webpack打包开发，每个子系统一个文件夹，
09.项目的js包放在哪里？
可以放在项目的common文件夹里面，也可以自己创建一个js文件夹，自己引入就可以了，
10.echatr没有自适应怎么解决？
1.echart的盒子宽高设置为100%都会自己去适应盒子的发小
2.echart自带有resize方法，页面初试化的时候，绑定页面的rize的监听，调用resize.方法就可以了，卸载的时候，销毁监听事件
六、vue和react对比
01.vue和react的区别？
1.react使用jsx语法渲染html模板，vue通过拓展的html语法渲染模板
2.vue有双向绑定，react单向数据流，通过事件监听数据的变化，
3. react写起来更加的灵活，都是使用js方式
02.vue2.0和vue3.0的区别？
1.vue3会先执行setup方法
2.vue2.0可以通过this.$el访问组件根元素，vue3.0去掉了this，通过ref访问dom
3.vue3.0移出了过滤方法filter
4.vue3.0和vue2.0的双向绑定原理有区别，3.0利用proxy实现双向绑定，vue2.0利用difineproperty实现
5.vue3.0使用ts写的源码，对ts更加的友好
6.vue3.0增加了component.api使用时都需要先引入，
proxy的优点，
1.可以直接监听对象，而不是属性
2.可以直接监听数组
3.proxy有很多拦截的方法
4.proxy返回一个新的对象，我们可以对新的对象进行修改而difineproperty只能遍历对象属性直接修改
02.组件的使用，以及怎么自己封装组件？
把项目中共用的功能或者页面提取出来，
03.组件之间的通讯？
vue2.0
方法一基础的传值
父传子
数据
父元素通过v-bind绑定在子组件上
子组件通过props接受
方法
父组件直接通过v-on方法名绑定方法
自组件通过$emit接收调用this.$emit(方法名)
子传父
自组件通过调用父元素传过来的方法this.$emit(方法名，参数)
方法二，通过$parants和$children就可以拿到实例就可以取值了
方法三，provide和inject
provide提供变量inject注入变量，子孙组件都可以提取
方法四，ref和$refs
方法五，使用eventbus，，eventbus.emit发送事件，eventbus.on发送事件
方法六，使用vuex
state用于数据存储
getters相当于计算属性
mutations改变state的唯一方法
action操作mutation的方法，处理异步
modules模块化
vue3.0
vue3.0都是用compont API开发的，取消了vue3的this，后面都是直接props.
方法一props和$emit
方法二使用refs拿到组件实例就可以使用了
方法三provide和inject
方法四vuex
react
组件父子之间的通信
父传子：父祖家通过属性传给子组件，子组件通过props接受到父组件的数据，constructor继承
子传父：通过父组件通过props传过来的方法，子组件通过调用父组件传过来的方法进行传值
跨组件之间的通信 先创建一个Context文件然后用provide给祖先注入数据，然后用`contextType`或者`Consumer`来获取这些数据
兄弟组件中的通讯使用共同的父组件传值
04.数据请求在哪几个生命周期？
参照05
05.第一次页面请求，触发哪几个生命周期？
beforcreate,created,beformounted.mounted
vue3.0
beforcreate,created.setUp，beformounte,mounted,挂载生成真实dom都可以加上on
react
生成的时候defurprpops和countrouter，然后就是，挂载componentWillmounted和componentDidmounted
06.生命周期？
vue2.0的生命周期
注入阶段beforcreate,created然后就render
生成真实dom阶段 beformount,mounted
更新阶段beforupdate和updated
销毁阶段befordestroy和destroyed
vue3.0
创建阶段beforcreate,create
生成真实dom挂载阶段beformount和mounted
更新阶段beforeupdate和updated
销毁阶段beforeunmounte和unmounted
和2.0的区别就是，在创建阶段的生命周期都可以用setup代替，生成，更新，销毁阶段，生命周期都可以加上on，还有keepalive被激活时的生命周期onactived还有keepalive停用时生命周期ondeactived还有捕获错误的周期onerrcaptured
react的生命周期，
创建阶段
1.设置默认属性static defulprops
2.设置组件初始状态，constructor
挂载render阶段componentWillmount和componentDidMounted
运行阶段
组件接到属性值触发componentWillReceiveProps
是否同意属性值渲染
shoundComponentUpdate
更新阶段componentWillUpdated和componentedDidUpdated
销毁阶段 componentWillUnmounted
07.能够手动搭建整个项目吗？
可以，可以利用vue-cli或者webpack
08.页面之间的参数传递？
通过路由传递参数，传递的方法有query,params.state
09.router-link和a标签的区别？
编译之后都是一样的，routerlink的to表示，把to的值传给route.push()这个值可以是个字符串也可以是描述目标位置的字符
10.vuex刷新数据丢失怎么解决？
vuex数据是保存在内存中，当刷新时，数据会丢失，解决方法是，全局监听刷新，当刷新时，把vuex的数据保存在sessionstorage中，刷新结束又赋值给vuex并且删除sessionstorage
11.路由parmas和query的作用？
都是路由传参，params私密性好一点，不显示在地址栏，query传参显示在地址栏，state传参私密性比较好
12.怎么动态生成路由？
前端将全部路由规定好，
方式一， vue的动态路由，登录时根据用户角色权限，动态展示路由，
方式二，路由储存在数据库中，前端根据接口，获取当前用户对应的接口列表
vue通过路由守卫，router.beforeeach方法动态添加路由，在路由守卫里面判断是否登录，带有token
react-router没有自己的路由守卫，可以自己利用生命周期自己封装一个
13.路由的懒加载怎么实现？
路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块只有在这个路由被访问到的时候，才加载对应的组件就是使用import引入组件
