前端面试题

• 1.bind, call, apply有什么区别？

1.都是改变this的指向
2.call和apply会立即执行函数，bind会返回一个新函数
3.传参不同，call和bind是对象传参，apply是数组传参
function a(name) {
console.log(this, name)
}
a.call(String, ‘zhangsan’)
var b = a.bind(Number, 12)
b()

• 2、v-if和v-show的差异？

如果页面元素不频繁切换使用v-if性能好。
如果频繁切换那么应该使用v-show，v-show只是简单的基于css’的切换。
v-show 隐藏是为这个元素添加display：none，dom元素依旧存在；v-if隐藏是将整个dom元素添加和删除

• 2.1、v-if和v-for的优先级？

在 vue 2.x 中，在一个元素上同时使用 v-if 和 v-for 时， v-for的优先级高、v-if的优先级低。
在 vue 3.x 中， v-if 总是优先于 v-for 生效。

• 3、JS的基础数据类型有那些？null和undefined的区别？

number、string、Boolean、null、undefined、Symbol、bigInt
null：是表示没有声明或者是表示一个变量将来指向的一个对象
undefined：表示声明变量过但并未赋值

• 4.响应式和自适应的实现方式？

响应式
1.使用媒体查询（Media Query）结合rem
2.使用插件boostrap
3.使用弹性布局flex
4.通过百分比vh或其他相对度量值

自适应
1.不设置宽高
2.用相对单位
3.用最大，最小宽度

• 5.事件执行顺序是什么？

捕获->目标-> 冒泡

DOM事件流将事件分为三个阶段：捕获阶段，目标阶段，冒泡阶段，先调用捕获阶段的处理函数，其次调用目标阶段的处理函数，最后调用冒泡阶段的处理函数。如果有很多按钮，每个都要加click事件，那要加很多，这时用到事件委派bind。如果不冒泡，找不到真正的事件回调方法。事件委托----冒泡
事件捕获：父元素事件先触发，然后再目标元素触发
事件冒泡：目标元素事件先触发，然后父元素事件触发
事件委托：是利用事件冒泡原理，把事件监听绑定在元素的父级上

• 6.原型链是什么？

就是实例对象和原型对象之间的链接,每一个对象都有原型,原型本身又是对象,原型又有原型,以此类推形成一个链式结构.称为原型链

原型链是为了实现继承的，Javascript是面向对象的，每个实例对象都有一个_proto_属性，该属性指向它的原型对象，这个实例对象的构造函数有一个原型属性prototype,与实例的proto属性指向同一个对象。当一个对象在查找一个属性的时候，自身没有就会根据_proto _（原型对象）向它的原型进行查找，如果都没有，则向它的原型的原型继续查找，直到查到Object.prototype.proto_为null,这种查找称为链式查找，这样也就形成了原型链。为什么是null，不是undefined，null是空对象，undefined是没有被定义

• 7.变量提升、var和function的区别？

变量提升，是把变量的定义进行提升
var 和 function不一样，function是一等公民，所以它的提升会覆盖变量

• 8.输入URL地址到页面出来都经历了哪些事情？

浏览器检查url地址是否正确
发送请求到DNS服务器，进行域名解析成IP地址
实现三次握手
发送数据到后端
发送数据到前端
前端接收数据
前端解析页面：解析html成dom tree，解析css，解析css成css tree，然后合并dom和css tree形成一个渲染tree，执行渲染
最后得到页面

• 9.样式的link和@import有什么区别？

1.link是HTML的标签，可以引入任意文件，而@import是css的语法规则，只有导入样式表的作用，是一种css引入样式语法
2.link是同步引用，@import是异步引入
3.@import有兼容性问题，link则没有兼容性问题

• 10.如何实现对象和数组的合并？

assign 方法；对象的for循环
concat方法；数组的for循环都可以实现数组的合并

• 11.跨域是如何产生的，有那些解决方法？

浏览器为了保护网站数据安全提出一个保护措施，不允许不同服务器（协议、域名、端口号必须一致）的网站进行通信
解决方法： jsonp、CORS、代理

• 12.生命周期的理解？常用的vue生命周期有那些？created和mounted有什么区别？

生命周期指一个虚拟dom从创建到卸载的过程，在过程中允许用户执行对应的业务提供的函数叫生命周期钩子函数
四个阶段，每一个阶段分为之前之后，vue3中提供了两种写法，选项式和钩子函数式，在setup中没有创建生命周期，因为setup限于创建生命周期而执行，所以可以把setup当创建生命周期使用

常用的生命周期： created,mounted,beforeUnmount
created实现了实例创建，但是没有进行虚拟dom挂载，所以执行非异步赋值不会导致二次渲染，mounted赋值会导致二次渲染

• 13、如何判断数据类型？

typeof、instanceof、Object.prototype.toString.call()、constructor、isArray、isNaN特殊方法–譬如字符串：startsWith
typeof不能判断数组和对象
Object.prototype.toString.call()比较常用，都能判断

• 14.JS的继承有哪些方式？

extends、原型、构造函数、构造函数+原型==组合继承
1.原型链继承（让一个构造函数的原型是另一个类型的实例）
2.构造函数继承（在子类构造函数的内部调用父类型构造函数）
3.组合继承（构造函数+原型链继承）
4.寄生式继承
5.寄生的组合继承
6.ES6的extends关键字继承

• 15.判断版本号

‘1.12309.12323132’
‘0.12309.12323132’
通过.进行切割，然后逐个对比数组，要注意：12309 是小于 12310（1231–如果公司规定尾部的0一定不要，那么这个规则成立）

• 16.获取字符串中字符出现的次数，找到出现次数最多的或最少的

var str = ‘’
var a = ‘abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ’
for (var i = 0;i < 50;i ++) {
var idx = Math.floor(Math.random() * 52)
str += a.slice(idx, idx + 1)
}
str = str.split(‘’)
var b = {}
for (var _n of str) {
if (b[_n]) {
b[_n] ++
} else {
b[_n] = 1
}
}
var max = {name: ‘’, value: ‘’}
for (var n in b) {
if (max.value < b[n]) max = {name: n, value: b[n]}
}
console.log(max)

• 17.如何优化网页加载速度？

减少http的请求数量、分页降低传输数量
合并js文件
按需加载
移除控制台输出
合并小图片为字体文件或则是雪碧图(精灵图)
后端开启gzip(是浏览器特定的一个压缩方式，后端发送文件(可能是html、js、css、数据等)的时候把文件进行压缩发送，浏览器接收到以后会自动解压)
前端使用gulp、webpack、rollup等工具对代码进行混淆压缩
减少第一次加载文件的大小

• 如何实现文件按需引入？

requirejs、seajs、import方法

• 18.拷贝管理？什么是浅拷贝、深拷贝？

拷贝是对之前的数据进行一个复制
浅拷贝：只对数据的第一层进行复制，如果数据存在多层级，那么从第二层开始不会进行复制，还是引用关系
{a: 10, b: {b0: 20}} 如果进行浅拷贝，a会是复制，b属性还是引用
实现方法有：
…展开运算符，一个for循环，lodash这样库也可以进行拷贝中的clone，assign

深拷贝：对数据进行深层次复制，一旦拷贝以后，那么所有数据都不存在引用关系
var a = {a: 10, b: {b0: 20, b1: {b10: 1000, b11: function() {}}, b2: undefined, b3: null}}
实现的方法有：
JSON.parse(JSON.stringtify())：这个方法会丢失undefined值和函数值，也就是b11和b2属性会丢失
递归：
function loop(_a) {
var _c = {}
for (var _n in _a) {
if (Object.prototype.toString.call(_a[_n]) === ‘[object Object]’) {
_c[_n] = loop(_a[_n])
} else {
_c[_n] = _a[_n]
}
}
return _c
}
var c = loop(a)
可以使用lodash的_cloneDeep这样库来实现 https://www.lodashjs.com/docs/lodash.clone

• 19.本地储存有哪些 自身特性和区别？如果存爆会怎么样？

cookie：4k 可以设置过期时间，不设置时间，关闭浏览器销毁
localStorage：5M 永久存储 不设置过期时间，数据不会销毁
sessionStorage：5M 会话存储 关闭浏览器页签，数据销毁
存爆后数据会存储不进去

• 20.实现响应式布局与自适应？

响应式布局：使用@media属性实现，在不同的分辨率实现页面样式不同展示
自适应布局：在不同的平台(设备)上通过js判断设备来实现样式的动态加载
自适应–js判断页面运行的平台，加载不同的样式文件
响应式—css的media属性，在不同的分辨率下展示不同的样式

• 21.map reduce filter every some 用法与区别？ES6 中的数组方法你知道哪些？

map是循环一个数组，并且返回一个同原数组一样长度的一个新数组，如果数组项是引用数据，那么会产生引用关系，如果没有return，那么得到的是一个值为undefined的数组
reduce是循环一个数组，通过返回值来确定返回的结果，可以取代很多数组方法
filter循环一个数组，然后要求传递一个函数，这个函数返回一个Boolean值，如果为真会在结果集里边[1, 2, 3].filter(it => it < 3) 得到结果是：[1, 2]
every 和 some 区别在于every是数组中的每一项都符合要求才会返回真，some是只要有一些符合条件的数据，那么就会返回真
添加、删除数据 - push splice pop shift unshift slice join forEach for…of等

• 23.[1, 2, 3].map(parseInt)

1 NaN NaN

[1, 2, 3].map(function(val, index, arr) {
return parseInt(val, index)
})
parseInt(1, 0) 0进制表示10进制
parseInt(2, 1) 没有1进制
parseInt(3, 2) 2进制中不能有大于2的数字

[1, 2, 3].map(function(val, index, arr) {
return newValue
})

// 0需要转换的数据， 10表示进制
// 最大的进制：36进制
let val = parseInt(0, 10)

• 24.输入URL到页面展示过程？

1 浏览器输入 url。先解析 url 地址是否合法
2 浏览器检查是否有缓存（游览器缓存 - 系统缓存 - 路由器缓存）。如果有，直接显示。如果没有，跳到第三步。
3 在发送 http 请求前，需要域名解析（DNS 解析），解析获取对应过的 ip 地址。
4 浏览器向服务器发起 tcp 链接，与浏览器经历 tcp 三次握手
5 握手成功后，浏览器向服务器发送 http 请求，请求数据包
6 服务器收到处理的请求，将数据返回至浏览器
7 浏览器收到 http 响应。
8 浏览器解析响应。如果响应可以缓存，则存入缓存
9 浏览器发送请求获取嵌入在 HTML 中的资源（html，css，JavaScript，图片，音乐等），对于未知类型，会弹出对话框
10 浏览器发送异步请求
11 页面全部渲染结束。

• 25.数组中 forEach、map、filter、reduce 方法的作用与区别

1.相同点：
• 都会循环遍历数组中的每一项；
• map()、forEach()和filter()方法里每次执行匿名函数都支持3个参数，参数分别是：当前元素、当前元素的索引、当前元素所属的数组；
• 匿名函数中的this都是指向window；
• 只能遍历数组。
2.不同点：
• map()速度比forEach()快；
• map()和filter()会返回一个新数组，不对原数组产生影响；forEach()不会产生新数组，返回undefined；reduce()函数是把数组缩减为一个值(比如求和、求积)；
• reduce()有4个参数，第一个参数为初始值。

• 26.防抖节流的原理

防抖：短时间内触发了多个setTimeout只会执行最后一个
节流：短时间内触发多个setTimeout，只会执行第一个，当第一个执行完后，才可以继续触发后面的setTimeout
防抖原理解析：再执行setTimeout之前，先使用clearTimeout()把上一次定时器给清除掉，这样就达到了只会执行最后一次触发的setTimeout
节流的原理解析：在第一次触发了setTimeout后，先把阀门关闭（使用一个Boolean变量），等执行完后再把阀门打开，这样后面的setTimeou在触发前会先判断阀门是否关闭，如果关闭了则不会继续触发，要等之前的setTimout执行完后，才允许触发后面的setTimeout
防抖和节流的使用场景:
search搜索时，用户在不断输入值时，用防抖来节约请求资源。
1.鼠标不断点击触发，mousedown(单位时间内只触发一次)
2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

• 27.详解flex:1什么意思

flex:1实际代表的是三个属性的简写
flexgrow是用来增大盒子的，比如，当父盒子的宽度大于子盒子的宽度，父盒子的剩余空间可以利用 flex-grow 来设置子盒子增大的占比
flex-shrink用来设置子盒子超过父盒子的宽度后，超出部分进行缩小的取值比例
flex-basis是用来设置盒子的基准宽度，并且 basis和 width 同时存在 basis 会把 width 干掉
所以 flex:1;的逻辑就是用 flex-basis 把 width 干掉，然后再用 flex-grow和 flex-shrink增大的增大缩小的缩小，达成最终的效果

• 28.箭头函数和普通函数的区别

1.写法不同，箭头函数更加简洁
2.箭头函数没有自己的this
3.箭头函数没有变量提升
4.普通函数有arguments方法，箭头函数没有
5.箭头函数不能作为构造函数使用
6.箭头函数没有new.target

• 29.vue2、3中的生命周期有哪些?

vue2:

beforeCreate:在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

beforeMount:在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted:vm.$el已挂载在文档内，对已有dom节点的操作可以在这期间进行。

beforeUpdate

updated

beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
vue3销毁生命周期：unmounted，beforeUnmounte

• 为什么vue中赋值是异步？

nextTick 是典型的将底层JS执行原理应用到具体案例中的示例，引入异步更新队列机制的原因：
如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，Vue 会在本轮数据更新后，再去异步更新视图。而不是每当有数据更新，就立即更新视图。
为了在数据更新操作之后操作DOM，我们可以在数据变化之后立即使用nextTick(callback)nextTick()将回调延迟到下一个事件循环开始时执行,这样回调函数会在DOM更新完成后被调用，就可以拿到最新的DOM元素了。

• 30.css 中哪些样式具备继承性?

1.字体系列属性:font、font-family、font-weight、font-size、fontstyle;
2.文本系列属性:
2.1）内联元素：color、line-height、word-spacing（设置单词之间的间距）、letter-spacing（设置文本字符间距）、 text-transform(用于设置文本的大小写：uppercase所有字符强制转为大写，lowercase转小写，capitalize首字符强制转为大写);
2.2）块级元素：text-indent、text-align;

3.元素可见性：visibility
4.表格布局属性：caption-side（标题位置）、border-collapse（设置边框分离还是合并）、border-spacing（边框分离状态下设置边框间距）、empty-cells（定义如何渲染无可视内容的单元格边框和背景）、table-layout（定义用于布局单元格行和列的算法）;
5.列表布局属性：list-style

不可以被继承的css属性
1.display：规定元素应该生成的框的类型；
2.文本属性：vertical-align、text-decoration(用于设置文本的修饰线外观包括上/下划线，管穿线，删除线，闪烁 );
3.盒子模型的属性：width、height、margin、border、padding;
4.背景属性：background、background-color、background-image;
5.定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、maxwidth、max-height、overflow、clip;

• ** 32.双向绑定原理? vue2、3 的区别?**

vue2中使用Object.defineProperty给数据的属性添加getter和setter方法来实现数据劫持，通过setter发布数据更新的消息，通过getter来订阅数据更新消息（观察数据变化）
vue3中是使用Proxy对象给数据属性添加getter和setter
object.defineProperty方法每次只能给一个属性添加getter和setter属性，Proxy是用代理机制，实现多个属性同时添加getter和setter属性
Object.defineProperty有什么缺点:
无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。

• 33.父子组件通信（传参）有哪些方法?组件传值都有哪些方法？

父传子：props --子组件中定义props
子传父：$emit
$ parent和$ children 实例传参
provide和inject 跨组件注入传参
$refs 实例传参

• 34.vue2、3中的生命周期有哪些?

Vue2 8个：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、detoryed、
Vue3 ：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount 、unmounted
Vue3 钩子函数:onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted
路由两个生命周期 : keep-alive两个钩子函数：actived、beactived

• 21. 路由具体功能及实现原理？

路由具体功能：实现单页应用的页面切换和历史记录的功能
实现原理:监听hashchange、实现ServiceWorker线程的监听，当url地址发生变化，那么劫持，判断是否需要拦截，如果要拦截执行拦截任务
通过拦截，找到路由对应的组件，然后把路由组件渲染到router-view(router-view组件接收一个组件参数，然后动态的渲染这个组件)这个组件上

• 22.vue-router有哪几种路由的模式？

hash-通过监听hashchange事件来实现，然后把路由对应的组件渲染到router-view占位组件的地方，带‘#’,APP端只能用这个模式
history-通过ServiceWorker线程来实现

• 36.导航卫士在项目中是如何使用的，都用来做了什么业务?

导航守卫主要用来通过跳转或取消的方式守卫导航。
router.beforeEach((to, from, next) => { }

用户权限拦截，存在sessionStorage或vuex里面

校验数据的正确性和时效性,使用beforeRouteLeave做路由过滤，留在当前页还是离开 -> 采购计划统计业务
beforeEach、afterEach、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

• 56.路由导航卫士(钩子函数)有哪些？常用的钩子函数是哪些？？

全局：beforeEach、afterEach
页面：监听子路由变化：beforeRouteUpdate，监听路由变化：beforeRouteEnter、beforeRouteLeave
beforeEach常用于页面跳转权限拦截

• 63.vue-router 路由传参的方式有哪些，都有哪些特性??

通过query来传递参数----- 查询参数
通过路由属性name匹配路由，再根据params传递参数—动态路由参数
/user/edit/:name 当path里边有:key的时候，表示它是动态路由，使用的时候，需要把:name改为你需要传递的参数
比如：我要传递一个zhangsan名字给地址，/user/edit/zhangsan

• 37.vuex 如何实现模块化，在模块化中如何调用 mutation 方法

commit //可以获取当面模块的 mutations方法，也可以获取到别的模块的 mutations方法用法
This.$store.commit(‘模块名/模块中的mutations方法’, 值)

• 38.vuex 异步更新数据的方法?vuex为什么不能在mutations 中进行异步操作?

Mutations不接受异步函数，要通过Actions来实现异步请求，
在actions中可以有异步操作，mutations才能操作state,如果actions中能操作state的话，数据会变得难以管理
在actions中更新完才能去mutations中修改

• vuex 的特性是什么?

1、vuex是一个闭包，避免了全局变量的数据污染
2、实现数据共享
3、使用发布订阅机制，实现数据可预测化

• vuex 在页面刷新下是否会丢失数据，如何处理?

第一种方法用sessionStorage
安装 vuex-along
安装 vuex-persistedstate
安装 vuex-persist

• 39.vuex 的核心组件?.

modules：定义模块，方便开发的模块化管理
state：定义并初始化数据
getters：通过getter方法暴露数据
mutations：修改数据并执行数据更新消息发布，所以它不能有异步代码，否则发布的消息不正确
使用commit提交数据到mutations中进行数据修改
actions：执行数据处理的动作，需要使用dispatch来调用

• data为什么是一个函数？

因为组件是可以复用的, JS里对象是引用关系, 如果组件data是一个对象, 那么在子组件中的data属性值会互相污染, 产生副作用。
所以一个组件的data选项必须是一个工厂函数， 因此每个实例可以维护一份被返回对象的独立拷贝。new Vue的实例是不会被复用的，因此不存在以上问题

• 2、vue样式隔离原理？

在vue文件中的style标签上加上scoped属性，则style标签下的样式只能在本组件中使用。
如果每一个vue组件的style标签都加上了scoped，那就实现了样式的模块化。
Scope CSS 的本质是基于 HTML 和 CSS 属性选择器，即分别给 HTML 标签和 CSS 选择器添加 data-v-xxx

• 63.keep-alive 组件是什么，它可以和哪此生命周期进行配合使用?？

keep-alive来缓存组件内部状态，避免重新渲染，缓存动态组件
两个生命周期的钩子:activated 与 deactivated

• 63.axios 的优点是什么？

支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换json数据
没次发起请求的时候，axios会去调用use方法传递进去的函数，判断函数返回的数据类型，如果是config对象，则执行异步请求，否则直接中断
拦截的意义？
想通过拦截实现token数据的请求头注入，并且实现用户是否已经登录的拦截–token；有部分接口时不需要拦截的所有要抛开

• 40.对 slot 的理解，v-slot 指令的作用?

内容分发的机制，使用元素作为内容分发的出口。统一slot和scope-slot 语法，使代码更加规范和清晰。
如 具名插槽== ==
作用域插槽

• 41.原型链是什么?如何实现原型链继承?

原型链:实例对象上的私有属性__proto_指向的是构造函数的prototype，简称原型,构造函数的原型也有原型，层层往上直到null，形成了链式结构就称作原型链。

• 42.如何改变 this 指向?它们的异同点?.

biand, call, apply
call和apply会立即调用函数;传参不同：call是对象，apply是数组
bind只会改变this指向，并且传参是对象，会返回一个新函数

• 43.new 关键字的作用?

1.创建空对象 {}
2.将空对象分配给 this 值。调用构造函数改变this指向
3.将空对象的__proto__指向构造函数的prototype。实现原型继承
4.如果没有使用显式return语句，则返回this。返回实例或对象

• 44.数组中常用的方法?

join .split
数组的增删操作(直接改变原数组):push pop unshift shift
数组的翻转和排序(改变数组): reverse 翻转数组 sort
数组的拼接与截取(原数组不受影响): concat slice
删除或增加元素(任意在任何位置,直接改变原数组,没有返回值): splice
查找元素在数组中出现的位置: indexOf lastIndexOf
ES5新增的遍历数组方法: forEach map filter some every find findIndex reduce

• 45.实现一个栈的功能，可以通过 size 获取长度，delete 删除数据，add 添加数据?

class Stack {
list = []
}
add(val) {
this.list.push(val)
}
delete() {
this.list.pop()
}
get size() {
return this.list.length
}
let stack = new Stack()
stack,add(10)
stack.add(9)
stack.add(8)
console.log(stack.list)
stack.delete()
console.log(stack.list)
console.log(stack.size)

• 46.盒子模式是什么?BFC 形成的条件有哪些?

盒子模型:就是把HTML页面中布局元素看作一个盒子,也就是盛装内容的容器。 一个盒模型包含了padding（内边距）margin（外边距）border（边框）内容（content）也就是元素本身的width,height。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
BFC（block formatting contexts)：块级格式化上下文
形成条件:
1）添加浮动float
2）dispaly：inline-block或flex
3）overflow除去默认值visible的所有属性
4）定位除去absolute的所有属性

• 47. display:none 和 visibility:hidden 的区别是什么?

display: none，该元素不占据任何空间，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中）。
visibility: hidden，该元素空间依旧存在,占空间。
display: none，display不是继承属性，元素及其子元素都会消失,不具有继承性。
visibility: hidden，visibility是继承属性，具有继承性,若子元素使用了visibility:visible，则不继承，这个子孙元素又会显现出来。

• 48.for…in和Object.keys 有什么区别？

for…in:
1.遍历对象及其原型链上可枚举的属性 for…of遍历数组
2.如果用于遍历数组，除遍历其元素外，还会遍历开发者对数组对象自定义的可枚举属性及其原型链上的可枚举属性。
3.遍历对象返回属性名和遍历数组返回索引都是string类型
for in 遍历对象的时候 会沿着原型链 遍历构造函数中的原型对象的属性
Object.keys ：
1.返回对象可枚举属性组成的数组
2.只有构造函数的基本属性，不包含所有原型链的属性
区别就是 for in 遍历会沿着原型链 寻找 上层对象的属性 但是 Object.keys 不会，Object.keys 返回对象的自身属性组成得一个数组。

• 49.如何理解闭包？他有什么优缺点

概念：一个函数内创建另一个函数，通过另一个函数访问这个函数的内部变量
优缺点：避免全局变量污染，延长变量的生命周期，容易造成内存溢出。

• 50.data为什么不是对象而是函数？

组件是多例的，如果data是对象的话，因为对象是引用数据类型，所有的实例将共享一个数据对象

• 51.extends和mixins有什么区别？

1.mixins是对象合并原理，接收对象数组，extends是ES6继承原理，接收的是对象或者函数
2.mixins类似于面向切面编程，extends类似于纯函数编程
3.优先级：extends>mixin

• 52.数组中splice和slice的区别？

splice会改变原来数组的长度
slice返回截取数组对象，原数组结构不变

• 53.如何实习防抖和节流？

节流：设置一个延时器，业务在第一时间触发，并开启延时器，在指定的时间内不会触发第二次业务
防抖：设置一个延时器为标志，标志存在时，不会第一时间触发业务，在过了延时器的时间后，清除标志，在指定的时间后触发业务

• 54.cookie，localStorage，sessionStorage有什么区别？

1.存储空间：cookie存储空间最小，只有4kb左右，localStorage，sessionStorage有5M左右
2.有效期：cookie不设置过期时间，关闭浏览器销毁；localStorage本地存储，本地持久化需要主动删除；sessionStorage是会话存储，会话存储关闭页签删除

• 55.对vue中插槽的理解？

插槽是自定义组件的占位符，用于组件扩展
在vue3中，name指定名字，v-slot可以指定名字和接收参数
在vue2中，name指定名字，slot可以指定名字，slot-scope可以接收参数

• 57.vue2和vue3的区别？

1.虚拟dom–TreeShaking不一样(vue3的虚拟dom更新添加了摇树机制)–它是render方法的createElement方法创建的一个普通js对象
2.vue2和vue3双向数据绑定原理发生了改变 ：v-model
vue2使用Object.defineProperty方法来给对象的属性添加getter和setter方法，实现数据劫持，通过setter方法发布数据更新消息，在编译代码的时候订阅消息发布，然后实现数据更新页面更新的机制。vue3进行了优化、因为vue2使用的这个方法需要给每一个属性添加getter和setter方法，那么vue3使用代理对象就不需要给每个属性添加这个属性。
v-model实现原理：使用input机制，用value绑定数据传值，使用input事件来实现子传父(修改这个值)，这个是vue2。vue3是通过modelValue进行传值，然后使用：update:modelValue实现数据修改
3.、插槽–它是用于扩展组件功能的一个占位符
vue2 可以使用v-slot指令和slot属性+slot-scope属性。vue3只能使用v-slot指令
4.

• 58.如何实现js预加载？？

preload

• 59.new关键字做了什么？

创建一个空对象
调用构造函数实现原型继承
调用原型继承，最后返回一个新对象

• 60.闭包是什么？

概念：一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量
优点：避免全局变量污染，延长变量的声明周期
缺点：容易造成内存溢出

• 61.vue有什么优缺点？

优点：数据双向绑定，响应式设计，监听观察等数据
缺点： 双向数据流，让数据变化不可控；过度封装，很难对页面渲染性能做优化等（说白了就是vue高度封装后，对应也失去了灵活性）

• 62.eventLoop中微任务和宏任务？

微任务：nextTick,promise;requestAnimationFrame
宏任务：setTimeout;setInterval

• 63.虚拟dom或者虚拟节点是什么？？

它是一个由createElement方法创建的一个js对象，它描述了真实dom的结构
它是由h函数创建的一个普通js对象，它描述了真实dom的结构和属性
vue框架中没有真实dom，只有虚拟函数
h函数在对dom变化性非常强的时候使用–比如递归实现tree功能
那么它怎么渲染到页面的呢?
使用递归方法，把js对象中的元素使用document.createElement方法创建出来并appendchild到root元素上

• 64.fixed、relative、absolute的区别？

fixed;固定位值。常用于：导航栏， 广告（左下角，右下角，则边栏）
relative-相对位置，不会脱离文档流，会保留它原来位置的尺寸。在页面里会影响页面的布局。
absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
absolute-绝对位置,会脱离文档流，不占用位置。
设置position: absolute，首先要给父元素设置position:relative定位，确定需要定位元素的包含块，子元素在设置position: absolute，设置方向值

• 63.动画样式有那些？？

animation、transition、transform、@keyframe、过渡动画、位移、执行动画
@keyframes:定义动画—0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状太
transition:过渡动画；有4个基本要素，分别是要过度的属性，动画时长，动画演变速度，延迟时间。
transform

• 64.在做for循环的时候一定要加一个key属性，并且这个值必须唯一，为什么要这么做？？

虚拟dom的数组更新，需要一个唯一键来提高diff算法性能，所以必须添加key

• 64.数组去重有哪些方式？？

WeakSet 结构与 Set 类似，也是不重复的值的集合，只有三个方法，没有属性
WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。
WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。
WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。
=set
数组循环方法:Map、includes、sort 、双重for循环
filter

• 65.面的重排、重绘有什么区别？回流机制是什么？？

重排：当增加或删除dom节点，改变元素的尺寸或者触发某些属性，引起页面结构改变时，浏览器就会重新构造dom树会重新渲染页面，这就是回流
重绘：一个元素外观改变触发浏览器的行为，浏览器会根据元素的新属性重新回值，使元素呈现新的外观；换言之：某一个元素的样式改变了，虽然并不影响其在文档流中的位置，但是浏览器就会对元素进行重新绘制，这就是重绘
回流机制：回流就是重排重绘

• 66.Promise的理解？

Promise是异步的一种解决方案，使用Promise的链式写法来解决回调地狱的问题
三种状态 ： ①pending等待 ②resolved已处理 ③rejected已拒绝
.then（表示成功返回）,catch（表示失败），finally（不管成功还是失败都要执行）
const p = Promise.all([p1, p2, p3])
只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

• 67.var、const 和 let 的主要区别是什么？

let、const是块级作用域，var不存在块级作用域，是全局范围
var存在变量提升，let、const不存在变量提升
let,const变量不能重复声明
const是用来声明常量的，就是不能改变数据

• 68.$nextTick的作用是什么?？

使用$nextTick来获取赋值后并且渲染后的页面数据—相当于updated生命周期
vue中赋值是同步的，但是赋值渲染是异步的
为什么要异步？
如果多次赋值，不异步，那么会执行多次渲染，浪费性能
所有vue实现了虚拟dom。修改数据的时候，虚拟dom会更新，但是不会把虚拟dom渲染到页面上，通过防抖的方法，然后实现渲染合并

• 63.什么是事件委托？它有什么好处？

事件代理又称事件委托，‘事件代理’就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听
优点：1.减少事件数量，提高性能
2.预测未来元素，新添加的元素仍然可以触发该事件
3.避免内存外泄，在低版本的IE中，防止删除元素而没有移除事件而造成的内存溢出

• 63.JavaScript对象的几种创建方式？

Object构造函数式、对象字面量、工厂模式、构造函数、动态原型

• 63.ts 的 class 中如何进行数据和方法权限管理？

修饰符作用: 对类的属性和方法提供权限控制
public: 公有的可以在任何地方可以被访问和修改(类中属性和方法默认为publish)
private: 私有的仅在当前类可访问和修改
protected: 仅当前类与子类(继承类)可以访问和修改
readonly: 只读修饰符, 仅可访问不可修改

• ts 中type 和interface 有什么区别?？

interface 有继承性，type没有继承

• 63.处理数组更新无法监听的方法？

改变数组深度监听，用watch+deep深度监听，
或者vue2中用用$set方法
或者用conmputer计算属性，本身就是深度监听

• 63.想要多个组件继承的方法？

可以理解为继承，但是不是继承，可以使用混合方法来实现，相当于Onject.assign（把多个）
mixins：[a ,b]==把b合并到a

• 63.组件懒加载有哪些方法?？

使用import实现懒加载: (path:/home ‘component: () => import(’./views/test/home .vue’)]
loader: () => import( ./views/home/index .vue’).

• 浮点数？

0.1+0.2不等于0.3怎么办
转成整数，再转成小数—1+2再除以10

• 63.异步加载的方法？
  

• 63.extends和minxis的区别？？

1、mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）
2、优先级>extends>mixins，继承钩子函数的时候，是不进行覆盖的，extends的钩子函数先触发，而后再是mixins的钩子函数触发，最后就是组件自身的钩子函数触发。
3、mixins类似于面向切面的编程（AOP），extends类似于面向对象的编程

• 63.异步加载？

js同步加载会导致主线程被阻塞–加载和页面渲染会被阻塞
<script src ="./test.js" defer></script>

• 63.组件懒加载有哪些方法?？

• 63.解决异步赋值问题方法?？

setTimeout
requestAnimationFrame本次页面渲染完成之后，
Promise.reslove().then()
Promise.reject().catch()
在赋值前调用Promise异步不行

• 63.哪些操作容易造成内存泄漏？

意外创建的全局变量，而这个变量一直存在内存中无法回收
闭包
dom元素的删除和清空
事件未清除—被遗忘的定时器或者回调

• 63.js的垃圾回收机制？

标记清除法：标记清除法分为标记和清除两个阶段，标记阶段需要从根节点遍历内存中的所有对象，不消除的对象做上标记，清除阶段则把没有标记的对象销毁。优点：实现简单。缺点：内存碎片化、内存分配速度慢。
引用计数法：引用计数法主要记录对象有没有被其他对象引用，如果没有被引用，它将被垃圾回收机制回收。它的策略是跟踪记录每个变量值被使用的次数，当变量值引用次数为0时，垃圾回收机制就会把它清理掉。优点：立即进行垃圾回收。缺点：需要一个计数器，这个计数器可能要占据很大的位置，因为我们无法知道被引用数量的多少。第二个缺点是无法解决当出现循环引用时无法回收的问题。

• 63.前端的框架有哪些？

vue、react、angular

• 63.前端有哪些构建工具？

grunt、gulp、webpack（摇树机制）、rollup

• 63.前端脚手架？

ng-cli、vue-cli、create-react-app、vite（rollup）

• 63.前端开箱即用的框架？

表示通过命令直接构建一个应用，包含路由、状态管理器、拦截等、也会有一些页面(登录页面、首页、看板、列表、表单等
next、nust、umi element-amdin、antd-pro

• 63.架构？

后端架构：restful–使用不同方式（请求方法不同：POST/GET/DELETE/PUT/PATCH等）对以一个资源（同一个url地址，/user）进行不同操作（/user + post 表示获取用户信息，/user+delete表示删除用户信息，/user+put表示新增用户）
flux 前端全局进行

• 63.rem、em、px、vh、%？

rem：相对单位。是相对于根元素进行计算的
em：相对单位。是相对父元素的字体大小
px：像素
vh：视口单位。相对于视窗的高度
%：是基于父元素的宽度/高度的百分比

• 63.隐藏元素的方法？

display：none；被隐藏的元素不占位置，看不见摸不着，会导致浏览器重绘和重排
visibility：hidden；占位置，看不见但是摸得着，会导致重绘，但是不会重排
opacity：0；透明度为0，只是看不见，但是依然存在
position：利用定位将元素的top、left值设为足够大的负数，使移出屏幕看不见。
overflow：hidden；超出盒子部分隐藏
clip：rect（0，0，0，0）：将元素剪裁成0大小，看不见，但是依旧存在

• 63.怎么中断foreEach？

• 63.小程序中源码文件过大如何处理?？

拆包、将图片转为线上图片

• 63.小程序路由传参及接收参数的方法?

查询参数传递：
switchTab不能使用查询参数传递
reLaunch、redirectTo、navigateTo可以使用查询参数传递
在页面中使用onLoad生命周期的形参接收
事件传参：
只有navigateTo可以实现，因为它不会关闭页面
A页面传递到B页面（A页面跳转到B页面）
A传递给B—A在首次进行传递使用这个
A跳转以后，B页面加载成功以后，可以使用eventChannel来监听事件，然后A页面在成功回调中，使用入参来进行事件触发
B传递给A
A页面在event中定义事件名字和处理函数，等待B页面事件触发

• 63.小程序路由跳转方法及区别?？

reLaunch——会关闭之前所有页面（如果welcome和home都没有关闭，那么这两个页面全部关闭），然后跳转到一个页面中
redirectTo——会关闭当前页面（现有welcome和home页面，如果home执行方法，那么关闭home），然后进行跳转，当返回的时候，会返回到当前页面的上一个页面
navigateTo——不会关闭任何页面，然后执行跳转
switchTab——它只能跳转到tabBar页面，navigateTo不能跳转到tabBar页面

• 63.小程序自定义组件如何传参?？

父传子——properties属性，type指定类型，value指定默认值
子传父——triggerEvent（事件名字，{传递的参数，只能是一个}）
插槽——不能具名，不能传递参数

• 63.小程序事件传参?？

只有navigateTo可以实现，因为它不会关闭页面
A页面传递到B页面（A页面跳转到B页面）
A传递给B—A在首次进行传递使用这个
A跳转以后，B页面加载成功以后，可以使用eventChannel来监听事件，然后A页面在成功回调中，使用入参来进行事件触发
B传递给A
A页面在event中定义事件名字和处理函数，等待B页面事件触发

• 63. 小程序如何实现数据缓存?？

小程序提供了读写本地数据缓存的接口，通过wx.getStorage/wx.getStorageSync读取本地缓存，通过wx.setStorage/wx.setStorageSync写数据到缓存，其中Sync后缀的接口表示是同步接口

• 63. uniapp的生命周期有哪些?？

生命周期可以使用vue或者小程序的生命周期
onLoad（）{}——表示页面组件加载完成（加载完成不代表渲染完成）
onReady（）{}——页面渲染完成，线程已经准备好（jQuery中的onready函数）
onUnload（）{}——卸载生命周期
onShow（）{}——切换到前台 切换应用的生命周期
onHide（）{}——切换到后台 切换应用的生命周期

• 63.隐藏元素的方法？

display：none；被隐藏的元素不占位置，看不见摸不着，会导致浏览器重绘和重排