【HTML5+CSS3】基础相关
又到了开年找金主的时候了
个人整理了些八股文面试简述，希望能帮上各位，（内容如有错误，请提出，后续纠正）
1.DOCtype有什么作用？
告诉浏览器使用那个版本的html规范来渲染文档
2.html5为什么只需要<DOCtype html>?
因为html不基于标准通用标记语言，不需要对文档类型定义进行引用，但是需要DOCtype来规范浏览器行为
3.简述html语义化的理解?
- 页面呈现清晰的结构 -有利于SEO和搜索引擎获取
- 方便其他设备解析和团队开发维护，语义化可读性
4.title与H1的区别？b与strong的区别？i与em的区别？
- title属性没有明确意义只是标题，h1表示层次明确标题，对页面信息抓取很大影响-
- strong表明重点内容语义加粗加强，b是无意义视觉加粗
- em表明重点内容语义倾斜加强，i是无意义视觉倾斜
5.html xml xheml的区别?
- html 超文本标记语言 审核语法不严格
- xml 可扩展的标记语言。用于储存数据和结构
- xhtml 可扩展的超文本标记语言，基于xml 作用与html相似，语法审核严格
6.src 与 href 的区别?
- src用于替换当前元素，指向外部资源的位置，指向的内容将会嵌入文档中当前的标签的位置
- href用于文档和引用资源之间确立联系，指向网络资源的位置，建立和当前元素之间的链接
7.渐进增强和优雅降级之间的含义？区别？
渐进增强：针对低版本的浏览器进行页面重构，保证基本功能正常使用，再针对高级浏览器进行效果，交互方面改进和追加功能
优雅降级：先构造完整的功能，在针对低版本的浏览器进行兼容
区别：优雅降级是从复杂的现状开始，并减少用户的体验功能，渐进增强是从基础上不断升级提升用户体验感
8.行内元素有哪些？块级元素有哪些？空元素有哪些？
- 行内：a span img input select
- 块级：div ul li ol dt dd h1-6 p
- 空元素：br hr link meta
9.BFC理解？怎么触发？解决了什么？
BFC(Block Formatting Context)：一个块级上下文，生成一个独立空间，空间之间不会相互影响，有属于自己渲染规则
触发：【float：left right】【display：flex inline-flex grid inline-grid inline-block】【position：absolute fiexd】【overflow:属性不为visible】
解决：防止margin重叠，清除浮动
10.清除浮动方法？
父级盒子设置：overflow：hidden
浮动元素后新增一个标签设置class为clear设置属性为both
添加伪类元素：
11.父随子动的解决方法？
设置padding增加内边框（需要根据增加的padding调整盒子px）
设置border增加边框（需要根据增加的padding调整盒子px）
overflow:hidden
12.盒子居中的方式？
1.先子绝父相
水平居中：left：50%；margin-left：负的自身宽度一半；
垂直居中：top：50%；margin-top：负的自身高度一半；
2.先子绝父相
margin：auto；
left：0；right：0; top：0; bottom：0;
3.绝对定位
left和top：50% transform：translate（-50%，-50%）
4.怪异盒子居中：display：flex jusiify-content：center aligin-items：center
13.CSS元素那些可以继承？
- 文本样式
- 字体样式
- 元素可见性
- 表格布局属性
- 列表布局属性
14.可以隐藏页面的元素？
- display：none
- visibillty：hidden
- opacity
- position：absolute
- clip-path
15.如何简单实现0.5px边框？
16.如何判断一个元素是否在可视区域中？
- offsetTop scrollTop
- getBounding clientRent
- intersection.onserver
17.文本溢出省略设置？
18.z-index是干什么用的？
z-inde 属性设置元素的堆叠顺序，且在绝对定位下才能生效
区别：0会创建一个新的堆叠上下文 1不会创建
19.给div盒子设置高100%不显示？
当你让一个元素的高度设置为百分比高度时，是相对于父元素的高度根据百分比来计算高度。 所以当父元素没有高度时，height:100%也就没有高度值，根据父级设置html，body高度。
20.简单说一下css样式的层叠性
1.样式表的来源：
用户代理样式表(浏览器默认)
用户样式表(某些浏览器允许作者自定义一些样式, 可忽略)
2.作者样式表
!important以及过渡和动画有一些样式来源
选择器优先级 ：
行内样式
选择器优先级
3.源码顺序 (出现得越晚优先级越高)
【JS】相关
1.JS的数据类型有哪些？区别?
基本数据类型：string number boolean null undefined symbol bigint
引用数据类型：object function array
存储区别：基本数据是存储在栈里面得，引用数据类型是存储在栈内存中的对象，在堆内存中储存的是栈内存对象的引用地址
值比较的区别：基本数据类型是值之间比较，引用数据类型是比较的引用地址
赋值的区别：基本数据类型的赋值是简单赋值，引用数据的赋值是对象的引用
2.创建实例对象的方式有几种？
- new对象的方式创建对象
- 通过class的反射机制创建对象
- 利用序列化和反序列化创建对象
- 通过克隆的方式创建对象
3.JS的继承方式有几种？
- 原型链继承
- 借用构造函数基继承
- 组合式继承
- ES6的class继承（不能变量提升，用extands关键词继承）
4.JS创建对象的几种方式*
- 工厂模式
- 构造函数模式
- 原型模式
- 组合构造函数和原型模式
- 动态原型模式
- 寄生构造函数模式
5.new创建一个对象，共经历几个阶段？
- 创建一个空对象
- 设置原型链
- 让实例对象中的this指向对象，并执行函数体
- 判断实例化对象的返回值类型
6.JS中this的指向?
- this出现在全局函数中，指向windoW
- this出现在严格模式中，永远不会指向window
- 当函数为对象属性时，this指向对象
- this出现在构造函数中，指向构造函数创建的对象
- 当一个元素绑定事件处理函数时,this指向事件源
- 在箭头函数中，没有this，this指向父级的this
7.箭头函数与普通函数的区别?
- 箭头函数时匿名函数，不能作为构造函数，不能使用new
- 箭头函数不绑定arguments
- 箭头函数不绑定this 会捕获上级this，作为自己的值
- 箭头函数通过call和apply方法调用一个函数时，只传入一个参数，对this没有影响
- 箭头函数没有原型属性
8.JS中改变this的指向方法?
call（你要指向谁 参数1 参数2）第一参数不传或者null的时候this指向window
apply （你要指向谁,以数组的形式传参）第一个参数不传 或者传null的时候 this指向windowbind
bind (你要指向谁,参数1，参数...) 有返回值： 一个新的函数 这个函数就是改变this指向后的函数
新函数执行的时候 优先考虑bind方法传的参数
9.数组的用法
- push 数组的末尾追加一个元素
- pop 删除数组末尾的一个元素
- Unshift 数组最前面添加一个元素
- shift 删除最前面的一个元素
- splice（开始索引位置，截取索引位置。替换新元素）截取数组中的内容
- reverse 反转数组
- concat 拼接数组
- join 把数组每一项内容链接起来，变成一个字符串
10.ES5使用方法
- use strtict 严格模式
- indexOf（查找的值，开始的索引）找到数组中的某一项索引，没有则返回-1
- forEach（function（itme，index，arr）{}）遍历数组，没有返回值
- map 遍历数组 对数组每一项进行操作，返回一个新的数组，没有则返回undecfined
- some 遍历数组 判断数组里面是否有该项，满足一项则返回true停止遍历，返回值true，不改变原数组
- every 遍历数组 满足所有项返回true 任一项不满足返回false 停止遍历，不改变原数组
- reduce（function（result，itme，index，arr）{}，0） 让数组的前后两项进行累计计算，返回其值，不改变原数组，返回最终计算值，
11字符串使用方法
- charAt（）找到字符串中指定索引位置的内容返回，没有则返回空字符串
- charCodeAt（）返回对应索引位置的unicode编码
- IndexOf 按照字符找到对应的索引，从左往右
- lastindexOf 在原始字符中，从右往左查找，没有则返回-1
- substring（索引开始，到索引截取）截取字符串 包前不包后
- Substr（索引开始，截取多少个）截取字符串
- toLowerCase（字符串字母转小写）
- toUpperCase（字符串字母转大写）
- Split（）将一个字符串切割成若干段，返回一个数组
- slice（）提取字符串的片段，并在新的字符串中返回被提取的部分，不包括结束位置
- replace（被替换的值，替换的值）
- trim（）移除字符串首尾空白
- concat（抗卡特）连接字符串，返回连接后的字符串
12.原型的5条规则？
- 所有的引用类型都可以自定义添加属性
- 所有的引用类型都有自己的隐式原型
- 函数都有自己的显示原型
- 所有的引用类型隐式原型都指向对应构造函数的显示原型
- 使用引用类型的某个自定义属性时，如果没有这个属性，会去该引用类型的——proto—中去找
13深拷贝 浅拷贝 含义及如何实现？
浅拷贝：只拷贝地址，将数据中的所有数据引用下来，存放在一个地址，拷贝后的数据修改后，会影响到原数据中的对象数据
实现：object.assign 拓展运算符 slice concat
深拷贝：内容拷贝，将数据中的所有数据拷贝下来，拷贝后的数据修改后，不会影响到原数据
实现：json 递归 lodash
14.防抖和节流含义？
防抖：事件被调用后，再执行之前无论被调用多少次都会从头开始计时
节流：不管事件被调用多少次，总是按规定时间间隔执行
15.检测数据类型的方法？
- typeof 检查基本数据类型
- instanceof 检查对象
- constructor 检查构造函数
- object.getprototypeof 检查原型
- object.prototype.tostring.call 检查任意类型
16.get和post的区别？
get是从服务器上获取数据，post是向服务器传送数据
get是明文传送追加url地址栏且不安全，post是密文传输
get传输数量有限，post则不受限制
get请求的参数是能是ASCLL码，中文需要UTF编码，post请求传参则不需要
17.var let const的区别？
let 和const没有变量提升，具有块级作用域
var具有变量提升，没有块级作用域
var let声明变量可以进行修改
18.ES6新增了那些语法？
箭头函数，解构赋值，自执行函数，拓展运算符，模板字符串
call apply bind let const promies async await （map set数据类型）
19.闭包怎么理解？
函数嵌套函数，里层函数可以返回外层函数的变量，外层函数通过一个变量去接收里层函数。
为什么要使用闭包：函数内部可以直接读取全局变量,函数外部自然无法读取函数内的局部变量，我们有时候需要得到函数内的局部变量。那就是在函数的内部，再定义一个函数。
闭包解决了什么问题:
不必为函数命名，避免污染全局变量。
提供对局部变量的间接访问，按需求进行共享和长期保存,维持变量，使其不被垃圾回收。
内部形成单独的块级作用域，通过闭包实现变量/方法的私有化。
闭包的缺点：
闭包使用不当可能造成内存泄露（是指你用不到的变量，依然占居着内存空间，不能被再次利用）。
怎么避免造成内存泄漏：删除意外的全局变量，被遗忘的计时器和回调函数，脱离DOM的引用。
20.如何中断forEach循环？
使用try-catch来终止循环抛出异常
21.cookie sessionstorage localstoage的区别？
cookie：生命周期为只在设置的cookie过期时间内，存放大小为4K左右，有个数限制，与服务器通信
sessionstorage：仅在当前会话下有效，关闭浏览器后被清除，大小一般为5M左右，仅在客户端保存，不参与和服务器通信
Localstoage：生命周期永久，大小一般为5M左右，仅在客户端保存，不参与服务器通信
【VUE】相关
1.VUE2和vue3的理解？
vue2的响应式是通过object.defineproperty对数据进行劫持和结合观察者模式，vue利用object.defineproperty创建一个observe来劫持监听所有属性，把这些属性全部转为gerter和serter，
vue中每个组件实例都会对应一个watcher他会在组件渲染的过程中把使用过数据通过getter收集为依赖，之后依赖触发项的setter触发时，他通知watcher，他会关联组件重新渲染。
vue3则是通过proxy的代理替代object.defineproperty，直接监听对象和数组的变化，弥补了vue2中数组响应式的缺陷。
2.v-if和v-for的使用场景及优先级？
vue2中v-for优先级更高
vue3中v-if优先级更高
场景使用：不推荐在同一节点使用，避免不必要性能开销，如果使用可以通过嵌套template标签使用
v-for绑定KEY的作用：更好区分vue组件的唯一性，更高效更新虚拟DOM
v-for可以用index做KEY吗：在插入节点时候，容易导致真实节点的渲染问题，相同key值得虚拟DOM节点做对比，可能会复用真实节点，导致不能把虚拟节点渲染成真实节点
3.v-if和v-show的区别？
v-if:操作的是节点的在DOM树中的销毁与重建，v-if也是懒惰性的，再开始条件为false时什么都不做，直到条件为true才开始渲染条件块
v-show：操作的是css样式的display的样式显示和隐藏
使用场景：频繁切换下使用v-show，条件很少改变下使用v-if
4.常见的请求状态码？
- 200:请求完成
- 206：部分内容
- 301：永久重定向
- 302：临时重定向
- 400：错误请求
- 401：未经授权
- 402：需求预留
- 403：禁止访问
- 404：请求错误
- 500：服务器错误
- 502：无效网关
5.watch和computed的区别？
watch：监听data数据变化 , computed：计算属性
watch：不支持缓存 , computed：支持缓存
watch：支持异步 , computed：不支持异步
watch：不会立即监听（调用immediate:true立即监听） , computed：立即监听
watch：不用调用 , computed：函数必须调用return
watch：一个数据影响多个数据 , computed：一个属性受多个属性影响
6.vue-router中hash和hisstory有什么区别？如何实现？
区别：在URL上，hash模式有带#号，history没有带#号
在刷新的时候，hash模式可以正常加载hash值对应页面，则history需要后台配置重定向，不然返回404页面
实现：hash模式在#号后的hash值变化，不会导致浏览器向服务端发送请求，不发送请求，就不会刷新页面，同时通过hashchange事件去监听hash的变化，根据hash的变化实现更新页面内容
history模式通过h5新增的api，pushstate和replacestate改变URL，但是不会发送请求，通过监听URL的变化实现更新页面内容
7.vue通信方式？
父子通信：在子组件内定义props的变量，接收父组件的数据，在父组件中引入子组件后注册使用，在父组件内创建一个标签以属性方式给proos变量传递数据
子传父通信：在父组件通过$on监听事件，事件处理函数的参数则为接受的数据，在子组件内通过$emit触发事件，第一个参数为要触发的事件，第二个参数为要传递的数据
跨组件通信：如在APP.vue文件中引入跨组件的组件，注册，在要传递数据的组件中引入事件总线EVentBus，并通过EVentBus.$emit（自定义事件名，传递的数据）将内容传到另一个组件中
8.vue中组件和插件的区别？
区别：注册方式，使用场景，编写的方式
组件：降低整个系统耦合度，调试方便，维护方便
插件：利用vue添加全局功能
9.vue-router的query传参和params传参的方式？
query传参时携带在URL的问号后面，（字符串和对象两种方式传参），在路由组件中通过$route.query获取
params传参是添加在URL路径里面的需要配合路由规则使用（字符串和对象两种方式传参），且在对象方式时只能配合name使用，不能配合path使用，在路由组件中通过#route.params获取
10.vue-router中router和route的区别？
router是路由实例对象，包含路由跳转方法
route是路由信息对象，包含和路由相关的信息（ath,params,hash,query,fullPath,matched,name）
11.vue要做权限管理怎么做？
前端权限控制可以分为四个方面：
接口权限
路由权限
菜单权限
按钮权限
接口权限：用户登录成功后获取token，前端保存token，通过axios请求拦截进行拦截，请求头中携带token
路由权限：初始化的时候挂载全部路由，并在路由上标记相应的路由权限信息，发送请求前效验
菜单权限：路由和菜单分离，前端配置路由信息，后端返回菜单，通过name字段，做唯一的性的效验，通过beforerouteenter做判断
按钮权限：通过v-if控制按钮是否显示和隐藏
12.首页登录路程及页面访问权限拦截简述？
登录路程:
1.登录页面填写登录表单后，点击登录按钮进行登录处理
2.登录处理时，调用状态管理库相关 API 实现发送异步登录请求并处理登录结果数据
3.如果登录成功，则将后端返回的 token 数据保存到 store 中，然后跳转到主页面
4.如果登录失败，则清除 store 中保存的 token 数据，提示错误信息
访问权限拦截:
1.访问每个页面前都应该进行拦截判断处理（vue 可以使用 vue-router 的导航守卫, react 通常在组件页面内部进行判断）, 通常会先定义一个白名单数组保存无需登录即可访问的资源
2.从 store 中筛选登录的 token 状态数据，如果不存在 token，则说明用户未登录，如果存在则说明已登录。进行判断逻辑处理
3.没有 token，判断是否访问的是白名单页面，如果访问的是白名单页面，则放行，如果不是访问白名单页面，则跳转到登录页面
4.如果有 token，判断是否有用户基本信息及角色权限相关信息（这些信息通常也是会保存在 store 中）。
存在用户基本信息及角色权限信息，则说明用户的页面访问权限已处理过，无需重复处理，放行正常执行下一步
5.不存在用户基本信息和角色权限，则根据登录成功的用户 token 数据，查询用户信息（基本、角色权限）后保存到 store 中
6.有了用户角色权限信息后，要动态计算出登录用户可访问到的路由信息，也要将动态计算出的用户可访问路由保存到 store 中
7.在跳转到主页面后，可根据 store 中保存的用户可访问路由动态渲染出侧边导航菜单
