Js的数据类型有哪些？
据我所知
Js的数据类型有：
简单数据类型和复杂数据类型
简单数据类型有：String,null,boolean,Number，undefind,symbol
复杂数据类型有：Object,Array,function
如何判断数据的类型
可以利用typeof instanceof Obj.prototype.toString.all() constructor
typeof '1'返回 String
typeof 1 返回 Number
typeof null 返回 null
typeof true 返回 Boolean
typeof undefined 返回 undefined
typeof function(){} 返回 Object
typeof {} 返回 Object
typeof [] 返回 Array
!!! typeof symbol() 返回 symbol
'1' Instanceof String 返回 true
1 instanceof Number 返回true
false instanceof Boolean 返回true
[] instanceof Array 返回 true
{ } instanceof Object返回 true
null instanceof null 报错
instanceof不能判断原始数据类型
Object.prototype.toString().all
面试官问题
call apply bind
apply 和 call 会自己调用，call 是传单个参数，apply 是一个参数，参数为数组
bind不会立即执行，等下一次执行完毕再执行
事件委托
是什么？ 通过给元素父亲绑定点击事件，使用e.target来操作子元素
原理事件冒泡
为什么要用事件委托
因为更方便不用给所有的li添加点击事件，如果删除了这个li还要让这个点击事件给移除
阻止事件流运用 e.target.stopPropelation()
如果有是个li让前三个li不进行事件委托，后七个进行事件委托
我的思路是给ul先绑定事件，利用事件委托的方法来对ul绑定点击事件，在通过给前三个li添加一个name或者class属性，再利用父元素的事件委托 e.target.name或者class 用 if判断他class或者name是否为那个值再将这些符合条件的元素利用 e.stopPropeLation()来阻止事件冒泡
定时器设置一秒一定会在一秒之后执行嘛
不一定会 如果有不符合条件的情况 或者 return之类的不会执行后面
伪数组怎么转为真数组
1.利用Array.from()
2.利用[...]
3.利用 new set() 方法
数组返回什么
map返回一个新数组 不会改变原数组
filter返回一个过滤之后的数组 不会改变原数组
indexof()如果没有这个数则返回-1 如果有则返回这个数对应的下标
findindex()如果没有这个数则返回-1 如果有则返回这个数的下标
find()如果有这个元素则返回对应这个元素 没有则返回undefind
reverse()返回一个新数组 会改变原数组
sort() 返回一个新数组 会改变原数组
数组splice运用
()
1.第一个值为下标
2.第二个值为删除几个 0为不删除
3.第三个值为添加元素
vue2不是响应式的有哪些
vue2双向绑定采用的数据劫持，通过object.findproperty来劫持各个属性的setter和getter,一旦数据发生改变发布消息给订阅者，触发相应的回调
1.直接通过数组索引的方式赋值
2.给对象添加新属性并赋值
解决方案：
Vue.set
this.$set
vue2 vue3区别
区别有
vue2 采用的是 object.dinfpropety，遍历属性
vue2 有methes computed 等 方法
vue2 有this
vue2 钩子
vue3 采用的是 proxy （1.在vue2中 只能对一个属性进行监听，需要通过遍历所有属性进行监听，2.遇到一个对象的属性还是一个对象的情况下需要递归来监听，3.对于对象新增的属性需要手动监听，4.对于数组通过push、或者unshift方法添加的元素无法实时监听）
vue3 没有meshes computed。。。
vue3 v-if优先级更高 v-for
没有this
利用的是 setup() 来代替了vue2的 beforcreate created
性能好 体积小 新特性
兄弟之间传值用什么
event bus 传
在vue.protoType.use挂载
在需要传值的组件中的methes 中 定义 this.bus.$emit(事件名, 数据)
在接受组件中 create 或者 mouted 用
this.bus.$on(事件)接受
event Bus 为什么被弃用，替代方案
我的理解是这样的：因为event Bus如果在项目大了之后难以处理，数据难以被检测到
而且event Bus所做的事完全可以通过vue.on来替代，所有弃用了(个人观点)
替代方案：可以利用这个方案，设置一个公共的父组件来储存，这个操作叫变量提升
vue2 vue3 v-if v-for
vue2 是 v-for优先级更高 1.使用templay标签上写v-if
vue3 是 v-if 优先级更高 如果v-if v-for一起使用报错
工作流程
有三个分支
总分支 master
测试分支 text
用来合并的分支 dev分支
代码有 冲突怎么解决
1.利用码云 pull request 可以先手动解决再合并 ，也可以先合并了解决冲突
2.可以将最新的代码pull下来再解决冲突之后再提交分支
xlsx是干嘛的
这个包主要干了两件事，
1.导出：将excel表中的内容通过二进制，导出数据显示到页面上，
2.导入：将数据通过某种形式到excel表格中
hash和history区别
hash模式url路径上会有#号 路由改变不会浏览器不会重新发送请求 原理是内部运用了hashchange事件
history模式url路径上没有#号 路由改变时浏览器会向后端发送请求，如果nginx没有匹配当前的url则会发生白屏，解决方案是(让服务器允许地址可访问)原理是pushState(),replaceState() PopState()是调用
封装过什么axios
拦截器
baseUrl
timeout
axios请求 封装
api封装
怎么解决跨域问题
1.wepack+proxy
2.vue.config.js 里 dev serve 里配置proxy
在本地搭建服务器，用服务器向服务器发送请求，
怎么是跨域
是一种安全协议
跨域是：浏览器不允许当前页面所在源向另一个源请求数据
什么是同源策略：协议，域名，端口号满足这三个条件一样叫同源策略
怎么解决跨域：
1.iframe+window.name 或 location.hash 或 document.tomain
2.jsonp
原理：动态创建一个script标签，利用script标签的src属性不受同源策略影响，因为所有的src和href属性都不受同源策略的限制，可以请求第三方服务器数据内容
步骤：
2.1创建一个script标签
2.2script的src属性设置接口地址
2.3接口参数，必须要带一个自定义函数名 要不然后台无法返回数据
2.4通过定义函数名去接受后台返回的数据
3prossProxy
在Vue.comfig.js中添加Proxy:{/api:{target:基地址}}
4.CORS
原理：服务器设置Access-Control-Allow-OriginHTTP响应头后，浏览器会允许跨域请求
5.webSocket
6.postMessage
7.nginx反向代理
8.node.JS中间件
怎么实现三角形
div{
height: 0;
width: 0;
border: 10px solid transparent;
border-left:10px solid pink;
}
怎么解决1px的问题
解决方案1.1px的边框
解决方案2. 给盒子加box-shadow
解决方案3.利用border-imgage
解决方案4.使用伪元素
nextTick原理使用
nextTick原理是将括号里的异步请求放到任务队列中等到同步任务执行完毕之后再通知任务队列在执行
路由钩子有哪些
全局前置守卫 beforeEach
全局后置守卫 afterEach
全局解析守卫 beforeResolve
全局独享守卫 beforeEnter
局部守卫(组件守卫)
beforeRouteUpdate 在渲染该组件的对应路由被 confirm 前调用
beforeRouteLeave 在当前路由改变，但是该组件被复用时调用
beforeRouteEnter 导航离开该组件的对应路由时调用
路由模几种及原理
hash和history
hash模式是通过window.location.changhash()来触发路径的变化，改变路径不会发送请求
history模式有pushState()和replaceState() 方法通过popState()调用，history模式刷新会出现白屏，每次刷新会发送请求，解决：需要和后端配合处理，需要后端配置请求的路径
watch和computed的区别
watch监听的是对象属性
computed监听的是依赖值
vue了解加命名空间的作用
作用就是给vuex设置一个私有的数据，如果不设置命名空间取出数据,数据会乱
超出省略号显示
text-overFollow:ellipsis
overFllow:hidden
white-space:nowrap
vue中响应式如何实现的 ，响应式原理(重要)
原理：Vue采用的是数据劫持结合发布者订阅者模式，通过object.defineProperty()来劫持各个属性的getter和setter方法，在数据发生改变时，通知订阅者触发响应的回调
实现：
1.需要Observe对数据对象进行递归遍历，包括对象的属性都添加getter和setter
2.compile解析模版指令，将模版中的变量替 换成数据，初始化渲染页面视图，将每个指令绑定更新函数，添加监听数据的订阅者，一旦数据变动，收到通知，更新视图
3.Wather订阅者是Observe和Compile的直接的通信桥梁
3.1在自身实例时往属性订阅器(dev)添加自己
3.2自身必须有一个updata()方法
3.3待属性变动dep.notice()通知时，调用自身的update()方法，触发Compile中的回调
4.MVVM作为数据绑定的入口，整合Observe,Compile和Watcher三者
动态组件和异步组件
动态组件：
异步组件：
keep-alive使用
使用keep-alive组件包裹被缓存得组件
inclued 是缓存的白名单 exclued是缓存黑名单,
max是最大缓存组件数量
他有两个钩子activeted
vue中自定义指令，钩子函数
vue中自定义函数directive，我一般写到main.js中，利用vue.directive(自定义指令名，{
})对象里是一个钩子函数，钩子有
inserted 插入父元素节点时调用
bind 第一次绑定元素调用
unbind 与元素解绑时调用
uptdate Vnode更新时调用
compoentUpdated Vnode更新完毕时调用
钩子函数也有四个参数,我平常一般只用两种，一个时el 指的时绑定元素本身，binding指的时绑定事件
binding.value表示的是绑定属性的值
数组扁平化
可以使用 arr.flat(Infinity)
可以创建一个函数将arr循环判断循环的每一项是否为数组，如果为数组再调用此函数
利用arr.toString(). split(',') ,在通过循环这个数组每一项，让每一项变成数字
数组去重有多少种
1.利用双for循环第一个循环数组，第二个循环i+1
判断arr[i]是否等于arr[j]如果相等将这个arr.splice(j,1)删除，然后j--
2.利用 fliter筛选+indexof判断如果item在不在arr里不在则加入到空数组
3.利用fliter筛选+inclues跟上面判断一样
vue路由钩子有哪些
beforeEach
beforeAfter
beforeResolve
beforeEnter
beforeRouterLeave
beforeRouterEnter
beforeRouterUpdate
minxins混入如何使用
可以全局混入或局部混入即
全局： Vue.mixin({
created:function(){}
})
局部 export default导出
导入到组件里 再将组件内定义一个mixins:[mixin]
组件里修改mixin的值不会影响其他组件的mixin的值
如果组件里有 变量冲突，组件里的数组优先级更高
路由的几种模式，以及实现原理
vue.use如何实现注册成组建
1.全局注册组件可以使用Vue.component('组件名',组件名)
2.在components文件下的index.js中写
install：function(Vue){ }
再到main.js中使用 Vue.use(index)
keep-alive了解
是一个内置组件
用于包裹需要被缓存的组件
他不会显示到页面中
用法:
有三个参数
include:可传数组、字符串、正则表达式匹配名字成功则会进行组件缓存
exclude:可传数组、字符串、正则表达式匹配名字成功则不会进行组件缓存
max:最大缓存组件
key的作用，以及实现的原理
是一种让虚拟dom确定唯一值的标识，
一般给 v-if 中 每个元素添加一个key=“”
原理是一种diff算法，如一个元素被删除了，key的作用就是可以从被删除之后的元素位置开始计算渲染，重新赋值key，避免了不必要的操作
生命周期钩子的函数
vue3 钩子
setup
onBeforeMount
onMounted
OnBeforeUpdate
OnUpdated
OnBeforeUnMount
OnUnMounted
this.nextTick场景原理
场景：例如在拿到修改之后的值
button按钮触发点击事件将name值修改了，通过拿到this.refs[‘x'].innerHtml只能拿到第初始name值并不能拿到修改之后的name值
需要通过this.$nextTick在去拿值
v-model实现原理
v-model实际就是$emit()和props的语法糖
v2里v-model的使用是定义v-model=”“然后再子组件中用props{ value接受} 修改利用$emit(’input‘,修改的值)
v3里v-model是使用定义v-model=”“然后再子组件中利用props{modelValue接受} 修改利用 $emit('update:modelValue')
深拷贝和浅拷贝理解和实现方式
浅拷贝如果是基本数据类型拷贝的则是值，如果是复杂数据类型是拷贝的内存地址，改变对象里的属性会影响另一个对象
深拷贝是在堆内存中开辟一个新的内存空间，拷贝的是这个对象所有的属性和值，改变这个对象的值不会影响原对象
数组去重有哪些
利用双for循环
利用new set()方法
利用fliter indexof
利用fliter incluce
数组常见的方法
增 : unshift push
删：shift pop splice slice
查: map filter reduce some evey findindex indexof find
数组随机排列
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
return Math.random() - 0.5;
})
console.log(arr);
如何盒子水平居中的方法
子随父相 top50 l50 手动计算长度
子随父相 t50 l50 tranFrom transLate(-50%,-50%)
子随父相 margin:auto
flex布局：justify-content:center align-items:center
http状态码
100 初始化
101切换协议
200 成功
201表示请求成功处理
202表示接受
300重定向
301永久重定向
302临时重定向
304缓存重定向
307 临时重定向，类似302请求方法和消息主题不会发生改变
308 永久重定向，类似302请求方法和消息主题不会发生改变
400语法错误
401身份认证失败
403拒绝访问
404找不到网址
500服务器错误
503超负荷
eventloop
先执行同步任务，在执行异步任务，同步任务进入主线程，异步任务进入event table，异步任务完成后，会将回调函数放在任务队列中，如果还有异步任务则放到后面执行
宏任务有：promise,setTimeout,setInterval
微任务有：nextTick,pormise.then,async,await
说一下组合式继承
是一种利用原型链继承和借用构造函数继承
利用给原型添加属性 和 创建一个new
说一下new执行的 过程，如果在构造函数中return一个对象拿到的是实例还是构造函数
1.创建了一个空对象，
2.构造了原型链
3.改变this指向
4.判断返回值
如果函数没有指定返回值的情况下，默认返回新对象实例，
如果指定返回是基本数据类型的话，仍然会返回新对象的实例
如果是对象的话，返回的就是对象指定的值
函数传参传递复杂数据类型和简单数据类型有什么区别
就等于浅拷贝
修改简单数据类型不会影响原数据
修改复杂数据类型会影响原数据
说一下兄弟传值
利用event bus
1.创建一个event bus.js向外导出
2.也可以在main.js中 给vue.protoType.$Bus=new Vue()
说一下对vue3的理解
更支持TS 体积小 便捷加载速度快
vue2哪些数据不是响应式
数组通过key来赋值(直接通过数组索引的方式赋值)
给对象添加不存在的属性赋值
防抖节流
防抖：在一段时间内，触发多次，只执行一次
节流：在一段事件内，只执行最后一次
移动端有哪些常见的问题，都是怎么解决的？
1px 问题是 dpr为2导致的 css像素为1 像素点为2所有会宽1px 利用背景图片边框盒子阴影都能实现
动画参数
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
-
name: 绑定到选择器的关键帧的名称
-
duration: 动画指定需要多少秒或毫秒完成
-
timing-function: 设置动画将如何完成一个周期
-
delay: 设置动画在启动前的延迟间隔。
-
iteration-count: 定义动画的播放次数。
-
direction: 指定是否应该轮流反向播放动画。
-
fill-mode: 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
-
play-state: 指定动画是否正在运行或已暂停。
平移参数
translateX()沿着由方向平移translateY()沿着y轴方向平移translateZ()沿着z轴方向平移平移元素
清除浮动的方法:
1.clear:both
2.给盒子添加伪元素
clear:both
context:'.'
display:block
height:0
visibility:hidden
3.给父元素添加双伪元素
.cleanfix:after{
clear:both
display:block
context:''
visiblity:hidden
height:0
line-height:0
}
4.overflow:hidden
justify-content几个属性
1.flex-stat 从行头开始
2.flex-end 从行尾部开始
3.center 居中排放
4.space-between 平均分布在两侧
5.space-around 平均分布在两侧两边各留一半盒子距离
flex有几个属性
flex-grow 如果还有剩余空间时 该元素铺满剩余空间
flex-shrink 是如果盒子大于父盒子则会子盒子则会缩小0
flex-basic 给指定元素设置宽度，优先级高于width
http缓存机制
http缓存分为协商缓存和强缓存，根据responce Header 来判断是否命中强缓存，命中强缓存返回200状态码，从本地获取资源不会向服务器发送请求
协商缓存命中返回304状态码，表示数据未修改，从本地获取数据，会向服务器发送请求，不会返回内容，告诉浏览器直接读取本地缓存，如果没有服务器直接返回
TCP三次握手
客户端向服务器发送三次连接，客户端第一次向服务器建立连接，客户端向服务器发送一个syn编码包进入等待状态，等待服务器确认syn包， 服务器收到syn包确定syn包并发送一个syn+ack包同时服务器进入等待状态，客户端收到syn+ack包向服务器发送确认ack包，此时服务器与客户端tcp链接成功
vue指令有哪些
v-model
v-bind
v-html
v-on
v-if
v-else
v-else if
v-for
vue修饰符
.trim
.num
.sync
.self
.stop
.once
.prevent
vue路由传参方式有哪些
一共三种
1 动态路由.是直接用？连接传id=1&age=13 或 this.router.push({path:'/home/{id}})
2.query属性传值 配合path
3.params属性传值 配合name
vuex理解及使用场景，原理，优缺点
是一个状态管理模式，可以将多个组件公用的数据存入到vuex里方便管理
vuex里面有五个核心
state,mutation,action,getter,module
state:一般用来存放数据，也叫仓库
mutation:一般是用于修改state里的数据，利用commit('函数名'，载荷)
actions：一般是用来发送异步请求,利用的是dispach('函数名',参数)
getter：类似与计算属性，可以利用getter['函数名']直接用变量显示到页面上
module:模块化
