前端面试题

1、vue的双向绑定原理是什么？里面的关键点在哪里？
Vue的双向绑定原理是基于Object.defineProperty（vue2）或者Proxy（vue3）来实现的，其关键点在于数据劫持，即对数据的读取和修改进行拦截，在数据发生变化时自动更新视图
其中difineproperty并不能对数组的改变进行数据劫持，vue2中是重写了数组的操作方法，对数组的操作方法做劫持而做到的数组的双向绑定

2、实现水平垂直居中的方式？
实现水平垂直居中的方式有多种，比如使用Flex布局、绝对定位、margin负值，以及grid布局等。

3、伪元素和伪类的区别？
伪类是为了弥补css3选择器的不足，为元素的选择提供额外的选择器。（单冒号）
伪元素是在页面上创建一个带有内容实际并不存在于dom文档中，算是一个虚拟元素，常用的伪元素有before和after。（双冒号）
:after/::after和:before/::before的异同
:before/:after是Css2的写法，::before/::after是Css3的写法，css2的兼容性要好一些（当前开发基本不用）

4、移动端如何适配不同屏幕尺寸？
移动端可以通过设置meta标签中的viewport属性来适配不同屏幕尺寸，例如设置width=device-width、initial-scale=1等。
flex弹性布局，rem、rem+viewport、媒体查询（较少）

5、本地存储有哪一些？他们三者有什么区别？
常见的本地存储方式有cookie、localStorage和sessionStorage，它们的区别在于作用域、存储容量和过期时间等方面。
cookie可以设置过期时间，常用来做保持登陆、登陆过期，一般最大为4k，常用来存储加密字符
localStorage永久保存，浏览器窗口会话的关闭并不能清除localStorage中保存的数据，根据各个浏览器的限制有不同的容量，一般是5Mb
sessionStorage缓存保存，浏览器窗口会话的关闭会自动清除sessionStorage中保存的数据，根据各个浏览器的限制有不同的容量，一般是5Mb

6、JS的数据类型？如何判断js的数据类型?
JavaScript的数据类型包括Number、String、Boolean、Object、Null和Undefined等和ES6新增Symbol，可以使用typeof、instanceof和Object.prototype.toString.call()等方法来判断数据类型，常用Object.prototype.toString.call()

7、说一下ES6的新特性有哪些？
ES6的新特性包括let和const关键字、箭头函数、模板字符串、解构赋值、类和继承、模块化等。

8、Let、const、var三者有什么区别？
let和const是块级作用域的关键字，
var是函数作用域的关键字，var具有声明提升，未声明前调用，不会报错而是undefined
let和const声明的变量不能重复声明，没有声明提升，未声明前调用，会直接报错
const声明的变量不可修改。

9、数组去重有哪些办法？
数组去重的方法包括利用构造函数Set的去重功能、使用循环遍历、reduce、filter和对象属性去重等。

10、说一下深拷贝和浅拷贝，如何自己实现一个深拷贝？
深拷贝和浅拷贝是指在复制对象时，是否对其内部的子对象进行递归复制。实现深拷贝可以使用JSON.parse(JSON.stringify(obj))、递归复制等方法。
浅拷贝是创建一个新对象，这个对象有原始对象属性值的一份精确拷贝，如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址。
深拷贝是创建一个新对象，深拷贝是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，彼此完全独立。

11、Vue的生命周期有哪一些？说一下它们每个阶段做什么操作？
Vue的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段，每个阶段对应着不同的操作，
beforeCreate - > 数据初始化 - > created(data、事件、计算属性均已挂载，dom树未挂载)
beforeMount(模板字符串编译成内存虚拟DOM，模板已经编译完成，已经完成渲染树) - > mounted(DOM挂载完成，可以进行dom操作)
beforeDestroy(还没销毁) -> 销毁中 -> destroyed(销毁完毕，data，方法均不可用)

12、组件通讯方式有哪一些？
父子组件通信: props; $parent/$children; provide（声明） / inject（接受） ; $refs ; $attrs / $listeners兄弟组件通信:eventBus($emit/$on)（执行函数/监听函数执行）;vuex跨级通信:eventBus；Vuex；provide/inject、$attrs /$listeners
eventBus事件总线代码量过大，不易维护，不推荐

13、Vuex有几个属性及作用？
Vuex的属性包括state、getters、mutations、actions和modules等，它们用于管理Vue应用中的状态。

14、Vue的监听属性和计算属性有什么区别？
Vue的监听属性和计算属性都用于监测数据变化，但监听属性是一个函数，需要手动调用，而计算属性是一个属性，会自动计算并缓存结果
监听属性是监听在data中已定义的数据的变化而做出对应的函数执行
计算属性不需要在data中定义，根据其依赖属性的变化而return对应的处理之后的结果，并缓存

15、说一下防抖和节流。怎么实现？
防抖和节流是用于控制函数执行频率的方法，防抖是在一定时间内只执行最后一次操作，节流是在一定时间内只执行一次操作。可以通过setTimeout和时间戳等方式实现。

16、Vue的导航守卫有哪一些？
Vue的导航守卫包括全局前置守卫、全局后置钩子、路由独享守卫和组件内的守卫等

17、你的登录拦截怎么实现的？
登录拦截可以通过路由守卫、请求拦截和响应拦截等方式实现

18、有用过图表吗？用的多吗？
常见的图表库包括ECharts、Highcharts、D3等，依据实际情况回答

19、闭包是什么？如何实现？
闭包是指函数内部可以访问外部函数的变量，封装私有变量、实现柯里化、定时器传参、防抖、节流都是闭包。

20、Vue2.0和vue3.0有什么区别？
Vue2.0和Vue3.0的区别在于性能优化、组合式API、响应式系统和虚拟DOM等方面。（搬运）

21、Vue常用的指令有哪些？
Vue常用的指令有v-model、v-if、v-show、v-for、v-bind、v-on等。

22、v-If和v-show有什么区别？
v-if和v-show的区别在于v-if在条件为false时会销毁对应的DOM元素，在文档中销毁，而v-show只是在样式上改为display：none。

23、v-for为什么要加一个key？
v-for需要加key属性是为了帮助Vue识别节点的唯一性，提高渲染效率。（就是这么设计的）

24、你是如何封装一个组件的？
封装一个组件需要考虑组件数据的输入和输出，事件的调用，可以使用props和$emit等方式实现。

25、有自己从0到1搭建过项目吗？
从0到1搭建一个完整的项目需要考虑项目架构、技术选型、开发流程、测试和部署等方面（实际情况回答）

26、有用过uni-app吗？
uni-app是一款基于Vue的跨平台开发框架，用于快速开发小程序、H5、APP等应用。（实际情况回答）

27、你会写后台吗？有搞过服务端渲染吗？
后台开发需要掌握服务器端语言和数据库等技术，服务端渲染可以提高页面的首屏加载速度和SEO效果。（实际情况回答）

28、说一下你项目中遇到的难点，如何解决？
在项目中遇到的难点可能包括架构设计、性能优化和业务逻辑等方面，需要通过调试和优化等方式解决。（实际情况回答）

29、Url到浏览器的一个过程有哪些步骤？
1、浏览器的地址栏输入URL并按下回车。
2、浏览器查找当前URL的DNS缓存记录。
3、DNS解析URL对应的IP。
4、根据IP建立TCP连接（三次握手）。
5、HTTP发起请求。
6、服务器处理请求，浏览器接收HTTP响应。
7、渲染页面，构建DOM树。
8、关闭TCP连接（四次挥手）。

30、如何实现小程序的request封装及拦截？
封装uni.request函数和使用拦截器等方式实现小程序的请求封装和拦截。

31、在vue的项目应用中，不使用框架，怎么封装？
在Vue项目中不使用框架可以使用原生的HTML、CSS和JavaScript来实现，需要手动处理数据和事件等方面。

32、什么是Js原型？原型链是什么？
JavaScript的原型是指每个对象都有一个原型对象，原型对象又有自己的原型，形成了一条原型链。js原型链的顶端是Object.prototype

33、hash路由和history路由的区别？
监听方式不同：hash路由是监听hashchange，history是监听popstate
改变url的方式不同：
hash ：
手动输入网址。
浏览器的前进后退。
JS的方式location.href=“#/xxx”。
histroy：
浏览器的前进后退。
history.pushState() 切换路由前的url会保存在浏览器历史记录中。
history.replaceState() 切换路由前的url不会保存在浏览器历史记录中。
go()方法可以在用户的历史记录中任意跳转，这个方法接收一个参数，表示向后或向前跳转的页面数的一个整数值,负数表示向后跳转(类似于后退按钮)，正数表示向前跳转(类似于前进按钮)history.go(0)等于刷新。
back()方法用于模仿浏览器的后退按钮，相当于history.go(-1)。
forward()方法用于模仿浏览器的前进按钮，相当于history.go(1)。

34、说下webpack的loader和plugin？
loader就是文件加载器:用来预处理（加载和解析）文件。 plugin：插件，用来增强功能，处理loader做不到的一些事

35、作用域是什么？
作用域是指变量的可访问范围，JavaScript中有全局作用域和函数作用域等

36、操作数组的方式有哪些？
操作数组的方式包括遍历数组、添加和删除元素、数组去重、颠倒和排序等。

37、0.1 + 0.2 等于 0.3吗？为什么？如何解决？
0.1 + 0.2不等于0.3，这是因为JavaScript采用的是IEEE 754浮点数标准，存在精度问题。可以使用toFixed方法处理。

38、keep-alive是什么？有哪几个生命周期阶段？
keep-alive是Vue中的一个组件，用于缓存组件实例，提高组件的渲染效率，比如某长数据列表、选中状态，其生命周期包括activated和deactivated等阶段

39、判断一个变量是否是数组，有哪些办法？
判断一个变量是否是数组可以使用Array.isArray和instanceof、常用Object.protoType.toString.call()等方法。

40、判断一个变量是否是对象，有哪些办法？
判断一个变量是否是对象可以使用typeof和Object.prototype.toString.call()等方法。

41、对象/数组常用方法有哪些？
对象/数组常用方法包括push、pop、shift、unshift、slice、splice、concat、map、filter、reduce等。

42、创建一个空数组/空对象有哪些方式？
创建一个空数组可以使用[]或new Array()，创建一个空对象可以使用{}或new Object()。

43、哪些遍历方式会改变原数组？
使用forEach、map、filter、reduce等遍历方式不会改变原数组，而使用push、pop、shift、unshift、splice等方法会改变原数组

44、Set和Map各是什么？
Set是一种数据结构，用于存储唯一值（常用来做数组去重），Map是一种键值对数据结构，用于存储任意类型的键和值

45、介绍一下promise。
Promise是一种异步操作管理的解决方案，用于解决回调地狱问题，其特点是链式调用和状态机制
三种状态pending（等待），resolve（fulfilled）、rejected

46、Promise通常会解决三种问题
(1)链式回调
(2)同时发起几个异步请求，谁先有结果就拿谁的
(3)发起多个请求，等到所有请求后再做下一步处理
这三种方式promise是怎么处理的？
Promise可以通过then方法实现链式回调，通过Promise.race方法实现同时发起多个异步请求，谁先有结果就拿谁的，通过Promise.all方法实现等待多个异步请求的结果，等到所有请求成功后再做下一步处理

47、如何改变一个函数a的上下文(改变this指向)？
可以使用bind、apply和call等方法改变一个函数的上下文

48、Call和replay有什么区别？
call和apply都是用于改变函数上下文（this指向）的方法，区别在于传入参数的方式不同 apply接收数组传参，call是arguments参数

49、Evenbus是什么东西？
事件总线，EventBus是一种事件发布/订阅的机制，可以实现组件之间的通讯

50、Vue中普通的生命周期大概有哪些？
Vue中普通的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段。

51、父子组件生命周期执行顺序是怎么样的？
父子组件生命周期执行顺序是父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted。

52、mixins有几个生命周期阶段？
mixins有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等生命周期阶段。

53、弹性布局，一行两列，左列固定宽，右列自适应如何实现？
实现一行两列，一列固定宽的水平垂直居中布局可以使用Flex布局，父元素设置display: flex、align-items: center和justify-content: center，左侧元素设置flex: 1，右侧元素设置固定宽度
grid布局 父元素设置 grid-template-columns：固定宽度 1fr/auto；

54、Flex：1 包含哪三种属性
Flex：1包含flex-grow、flex-shrink和flex-basis三个属性，分别表示元素在剩余空间中的占比、元素在空间不足时的缩放比例和元素的基准大小。

55、promise.all 和 promise.race有了解过吗？
promise.all接受多个promise实例组成的数组参数，只要数组中有一个promise执行失败就返回失败，当所有的promise全部成功后，返回成功结果的数组合集
promise.rece接受多个promise实例组成的数组参数，他的返回值是最先执行完毕的promise的结果，无论结果是失败还是成功

56、promise.all 和 promise.race返回结果后其余promise还会执行吗？
会。这两个方法进行了结果的处理（赛跑、有一个失败、全部成功），提前返回结果不影响其余promise的执行

57、说下你对Symbol的了解？
Symbol是ES6新增的一个数据类型，最开始是为了避免我们为对象添加新的方法时因为属性值相等导致覆盖，需要一个独一无二的值来完成，所以定义了Symbol。可以将Symbol看成一个唯一的值。

57、我们如何获取object的键名
object.keys（）可以用于大部分场景，返回一个键名的数组合集，对于带有Symbol作为键名的对象，我们需要使用Reflect.ownKeys（）来获取对应的键名合集

58、说下你对async和await的理解
async其实就是promise的语法糖，在定义一个函数时声明这个函数是个异步的，await则是用于等待一个方法的执行完成，并且阻塞后续代码的执行，await不能单独使用，一般用来简写promise的then链式调用

59、常见的状态码有那些，代表什么意识？
200：请求成功、301：请求的网站已永久移动到新地址、304：请求的网页未做任何修改，读取缓存、无任何返回、401：身份认证不通过、403：请求被拒绝、404：服务器中未找到请求的网页、405：请求方法不对，禁用此方法、500：服务器错误、502：错误网关、503：服务器暂不可用、504：网关超时

60、说下你对继承的了解？
继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的属性和方法,或子类从父类继承方法,使得子类具有父类相同的行为。
继承的方法有
原型链继承：子类的prototype指向父类的实例，子类prototype.constructor指向自身
缺点：1.修改子类数据，会影响到父类的值。 2.创建子类实例时，不能向父类构造函数中传参数，无法实现多继承
构造函数继承：利用call 子类函数中写Father.call(this, name)。 缺点：无法继承父类原型上的方法和属性
组合式继承：将原型链继承和构造函数继承结合 。 缺点：会挂载两次父类的属性和方法
寄生式继承：在组合式继承的基础上修改，子类的prototype = 浅拷贝的父类prototype Child.prototype = Object.create(Father.prototype)
ES6class类继承 ：class Child extends Father { }

61、说下ES5继承和ES6继承的区别
ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.call(this)）.
ES6的继承有所不同，实质上是先创建父类的实例对象this，然后再用子类的构造函数修改this。因为子类没有自己的this对象，所以必须先调用父类的super()方法，否则新建实例报错。

62、说下你对BFC的了解
BFC：块级格式化上下文 ，一个独立的渲染区域。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。常用来解决margin重叠，清除浮动等
BFC的创建方法，满足BFC的条件overflow：hidden。float的值不是none。position的值不是static或者relative。display的值是inline-block、table-cell、flex、table-caption或者inline-flex

63、清除浮动的方式有那些
创建BFC、伪元素：：after 属性content:'";display:block;height:0;clear:both;overflow:hidden;