2023前端面试题（含答案）
set，map区别
1.Map是键值对，Set是值的集合
2.Map可以通过get方法获取值，而set不能;因为它只有值；
3.都能通过迭代器进行for...of遍历；
4.Set的值是唯一的可以做数组去重，Map由于没有格式限制，可以做数据存储
盒子水平垂直居中方法(常见)
四种方式：
利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。
.div {
position: absolute;
width: 200px;height: 200px;
left: 50%;top: 50%;
transform: translate(-50%, -50%);
}
利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况。
.div { position: absolute;
width: 200px;height: 200px;
left: 0;right: 0;
top: 0;bottom: 0;
margin: auto;
}
利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。
.div {
position: absolute;
width: 200px;height: 200px;
left: 50%; top: 50%;
margin-left: calc(-200px / 2);
margin-top: calc(-200px / 2);
}
使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。
.div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items:center;
}
隐藏元素的方法
- visibility: hidden;这个属性只是简单的隐藏某个元素，但是元素占用的空间仍然存在
- opacity: 0; CSS3属性，设置0可以使一个元素完全透明，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
- display: none;元素会变得不可见，并且不会再占用元素位置。会改变页面布局。
- transform: scale(0);将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留。
浏览器渲染机制
- HTML 代码转化成 DOM
- CSS 代码转化成 CSSOM（CSS Object Model）
- 结合 DOM 和 CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
- 生成布局（layout），即将所有渲染树的所有节点进行平面合成
- 将布局绘制（paint）在屏幕上
h5新特性，语义化
html5新特性：音频video 视频 audio、画布canvas、H5存储localStorage sessionStorage
语义化标签 ： header nav main article section aside footer
合理正确的使用语义化的标签来创建页面结构 如 header,footer,nav
盒子模型由哪些组成
content 内容、padding 内填充、border 边框、外边距 margin
描述cookies sessionStorage localStorage区别
相同点：都存储在客户端
不同点：1.存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
BFC
BFC就是块级格式化上下文，让元素成为一个独立的空间 不受外界影响也不影响外面布局
css3新特性(介绍一下css3)
var let const区别
- const 定义常量， 不可以重复赋值 块级作用域 不存在变量提升
- var 定义变量，可以重复声明 var 全局作用域或函数作用域 有变量提升
- let 定义变量，不可以重复声明 ， 块级作用域 不存在变量提升
js有哪些基础数据类型
基础数据类型String、Number、Boolean、Undefined、Null
引用数据类型: Object、Array、Function、Date等
Symbol、BigInt是ES6之后新增的 属于基本数据类型
Symbol 指的是独一无二的值
BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数
null和undefined区别
首先 Undefined 和 Null 都是基本数据类型
- undefined 代表的含义是
未定义，一般变量声明了但还没有定义的时候会返回 undefined
- null 代表的含义是
空对象。null主要用于赋值给一些可能会返回对象的变量，作为初始化。
==和===区别
- 双等号（==）进行相等判断时，如果两边的类型不一致，会强制类型转化再进行比较。
- 三等号（===）进行相等判断时，如果两边的类型不一致，不强制类型准换，直接返回 false
js中哪些数据在if判断时是false(6个)
1、undefined（未定义，找不到值时出现）
2、null（代表空值）
3、false（布尔值的false，字符串"false"布尔值为true）
4、0（数字0，字符串"0"布尔值为true）
5、NaN（无法计算结果时出现，表示"非数值"；但是typeof NaN===“number”）
6、""（双引号）或’’（单引号） （空字符串，中间有空格时也是true）
注意空数组空对象，负值转的布尔值时都为true
判断数据类型的方法有哪些，有什么区别
深拷贝浅拷贝
- 浅拷贝: 以赋值的形式拷贝引用对象，仍指向同一个地址，修改时原对象也会受到影响
- Object.assign
- 展开运算符 ...
- 深拷贝: 完全拷贝一个新对象，修改时原对象不再受到任何影响
数组的方法
js数组去重
作用域作用域链
作用域：变量和函数起作用的范围。作用域最大的用处就是隔离变量，不同作用域下的同名变量不会有冲突。
作用域链：访问变量时，自己的作用域中没有，一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃，这种一层一层的关系，就是作用域链
原型、原型链
原型：原型分为隐式原型和显式原型，每个对象都有一个隐式原型，它指向自己的构造函数的显式原型。每个构造方法都有一个显式原型
原型链：多个_proto_组成的集合
this指向
普通函数：谁调用就指向谁，没有调用者，就指向全局对象window。
定时器 this指向window。
箭头函数 没有this,它的this指向取决于外部环境。
构造函数：this是指向实例
call apply bind区别
相同点：改变this指向。
不同点：
call和apply会调用函数，并且改变函数内部this指向，call和apply传递的参数不一样，call传递参数使用逗号隔开，apply使用数组传递
bind不会调用函数，会改变函数内部this指向
应用场景：
- call经常做继承
- apply经常跟数组有关系，比如借助于数学对象实现数组最大值最小值。
- bind不调用函数，但是可以改变this指向，比如改变定时器内部的this指向。
闭包，闭包的使用场景
闭包：定义在一个函数内部的函数（方法里面返回方法）。
闭包的使用场景：settimeout、回调、函数防抖、封装私有变量
闭包存在的意义是什么？(1) 延长变量的生命周期；(2) 创建私有环境；
箭头函数，普通函数区别
外形不同：箭头函数使用箭头定义，普通函数中没有
箭头函数都是匿名函数。普通函数有匿名函数，也有具体名函数
箭头函数不能用于构造函数，不能使用new。普通函数可以用于构造函数，以此创建对象实例。
this指向不同:(1).箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()
(2).普通函数的this指向调用它的那个对象
promise
什么是：
Promise是ES6中的一个内置对象，实际是一个构造函数
特点：
①三种状态：pending（进行中）、resolved（已完成）、rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都不能改变这个状态。
②两种状态的转化：其一，从pending（进行中）到resolved（已完成）。其二，从pending（进行中）到rejected（已失败）。只有这两种形式的转变。
③Promise构造函数的原型对象上，有then()和catch()等方法，then()第一个参数接收resolved()传来的数据，catch()第一个参数接收rejected()传来的数据
作用：
①通常用来解决异步调用问题
②解决多层回调嵌套的方案
③提高代码可读性、更便于维护
promise的使用
function getJSON() {
return new Promise((resolve, reject) => {
setTimeout(() => {
let json = Math.random() * 2
if (json > 1) {
resolve(json)
} else {
reject(json)
}
}, 2000)
})
}
const makeRequest = () =>
getJSON()
.then(data => {
console.log('data==>', data)
return 'done'
})
.catch(err => {
console.log('err==>', err)
})
makeRequest()
async await
什么是：
①async/await是ES7新特性
②async/await是写异步代码的新方式，以前的方法有回调函数和Promise
③async/await是基于Promise实现的，它不能用于普通的回调函数
④async/await与Promise一样，是非阻塞的
⑤async/await使得异步代码看起来像同步代码，这正是它的魔力所在
Async/Await的使用
function getJSON() {
return new Promise((resolve, reject) => {
setTimeout(() => {
let json = Math.random() * 2
if (json > 1) {
resolve(json)
} else {
reject(json)
}
}, 2000)
})
}
const makeRequest = async () => {
const value = await getJSON()
console.log(value)
return value
}
makeRequest()
Async/await 比 Promise 更优越的表现
1、简洁干净：使用 async/await 能省去写多少行代码
2、错误处理：async/wait 能用相同的结构和好用的经典 try/catch 处理同步和异步错误，错误堆栈能指出包含错误的函数。
3、调试：async/await 的一个极大优势是它更容易调试，使用 async/await 则无需过多箭头函数，并且能像正常的同步调用一样直接跨过 await 调用
总结
Async/await进一步优化了Promise.then()的缺点，使代码更简洁，所以在项目中尽量使用Async/await
for…in 和 for…of的区别
- for…of遍历获取的是对象的键值, for…in获取的是对象的键名;
- for…in会遍历对象的整个原型链, 性能非常差不推荐使用,而for…of只遍历当前对象不会遍历原型链;
- for…in循环主要是为了遍历对象而生,不适用遍历数组; for…of循环可以用来遍历数组、类数组对象、字符串、Set、Map以及Generator对象
防抖节流
函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
应用场景：文本输入的验证；
限制 鼠标连击 触发
函数节流：每隔一段时间，只执行一次函数。
应用场景：滚动加载，加载更多或滚到底部监听。
搜索联想功能
es6新特性(介绍一下es6)
...、箭头函数、promise、async/await、let和const、set集合、导入improt 导出export default、smybol新的基本类型
http,https区别
1、HTTPS协议需要CA证书,费用较高; 而HTTP协议不需要
2、HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议;
3、使用不同的连接方式,端口也不同,HTTP协议端口是80,HTTPS协议端口是443;
4、HTTP协议连接很简单,是无状态的;HTTPS协议是具有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全
如何判断一个对象是空对象？
1.使用JSON自带的.stringify万法来判断：
if(Json.stringify(obj)=='{}'){
console.log('空对象')
}
2.使用ES6新增的方法Object.keys()来判断：
if(Object.keys(Obj).length<0){
console.log('空对象')
}
js哪些操作会造成内存泄露
- 意外的全局变量引起的内存泄露。
- 闭包引起的内存泄露
- 没有清理的DOM元素引用。
- 被遗忘的定时器或者回调。
- 子元素存在引起的内存泄露
什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
vue.........
介绍一下MVC MVVM
- MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。
- Model 层代表模型层(数据层)。View 代表视图层(页面)。ViewModel 是一个同步View 和 Model的对象，充当桥梁。
- 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互
- 它本质上是MVC 的改进版
区别
- MVC中Controller演变成MVVM中的ViewModel
- MVVM通过数据来显示视图层而不是节点操作
- MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验
v-model的原理
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
为什么data是一个函数
每一个组件都有自己的私有作用域，确保各组件数据不会被干扰。
router和route的区别
- route是当前正在跳转的路由对象，可以从route里面获取hash,name,path,query,mathsr等属性方法（接收参数时使用）
- router跳转连接就可以使用
query和params 有何区别？
- 用法：query用path来引入，params只能用name来传递，不能使用path
- query更像是get请求（会在地址栏显示参数）；params更像post方法传递（不会在地址栏显示）
跳转
// params传递
{{ n.name }} vue组件通讯有哪些方式
父子之间传值：
首先 使用import child from './child.vue'；components: { comArticle },建立父子关系
1.props 父向子传值
1.1父组件通过:自定义名称="值",
1.2子组件使用props接受,与data同级,子组件接收到数据之后，不能直接修改父组件的数据。否则会报错，因为当父组件重新渲染时，数据会被覆盖。如果只在子组件内要修改的话推荐使用 computed.
2.$emit 子向父传值
2.1子组件通过this.$emit('自定义事件',参数)
2.2父组件用@接受自定义事件,并定义方法.
生命周期方法，在哪一步发送请求
vue2 在created 和 mounted都可以发送请求，区别不大。但在create中时无法获取dom
vue3 是在onMounted发请求
生命周期
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，data和methods中的数据都还没有初始化。
create：data 和 methods都已经被初始化好了。如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：已经编译好了模板，但是还没有挂载到页面中，此时，页面还是旧的
mounted：Vue实例已经初始化完成了，进入到了运行阶段。如果想要操作页面上的DOM节点，最早在这个阶段中进行
beforeUpdate：页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，还没有真正被销毁
destroyed：已经被销毁了。
v-if v-show区别
v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏；
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果；
使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。
.vue , 微信小程序 , uni-app属性的绑定
vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":";
小程序绑定某个变量的值为元素属性时，会用两个大括号{{}}括起来，如果不加括号，为被认为是字符串。
说一下vue3.0你了解多少?
vue2中，我们一般会采用mixin来复用逻辑代码，挺好用的，但是存在一些问题：例如代码来源不清晰、方法属性等冲突。
基于此在vue3中引入了Composition API（组合API），使用纯函数分隔复用代码。
在vue2中，组件必须只有一个根节点，很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的
vue、小程序、uni-app中的本地数据存储和接收
vue：
存储：localstorage.setItem（‘key’，‘value’）
接收：localstorage.getItem（‘key’）
微信小程序：
存储：通过wx.setStorage/wx.setStorageSync写数据到缓存
接收：通过wx.getStorage/wx.getStorageSync读取本地缓存，
uni-app：
存储：uni.setStorage({key:“属性名”，data:“值”}) //异步
uni.setStorageSync(KEY,DATA) //同步
接收：uni.getStorage({key:“属性名”,success(res){res.data}}) //异步
uni.getStorageSync(KEY) //同步
vue , 微信小程序 , uni-app的页面生命周期函数
vue：
beforeCreate（创建前）
created（创建后）
beforeMount(载入前，挂载）
mounted（载入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）
小程序/uni-app：
1. onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
2. onShow：加载完成后、后台切到前台或重新进入页面时触发
3. onReady：页面首次渲染完成时触发
4. onHide：从前台切到后台或进入其他页面触发
5. onUnload：页面卸载时触发
6. onPullDownRefresh：监听用户下拉动作
7. onReachBottom：页面上拉触底事件的处理函数
8. onShareAppMessage：用户点击右上角转发
vue-router 有哪几种导航守卫?
全局守卫、路由独享守卫、路由组件内的守卫
//路由的钩子函数总结有6个
全局的路由钩子函数：beforeEach、afterEach
单个的路由钩子函数：beforeEnter
组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate
为什么说vue是一个渐进式的javascript框架，渐进式是什么意思？
vue允许你将一个页面分割成可复用的组件，每个组件都包含属于自己的html、css、js用来渲染网页中相应的地方。
对于vue的使用可大可小，它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。
vue是响应式的（reactive）这是vue最独特的特性，也就是说当我们的数据变更时，vue会帮你更新所有网页中用到它的地方。
vue的性能优化
路由懒加载、图片懒加载、第三方组件库按需引入、keep-alive缓存页面、使用v-show复用DOM、避免v-if与v-for同时使用
为什么避免v-for和v-if同时使用？
v-for比v-if优先级高，使用的话每次v-for都会v-if判断，影响性能
异步请求适合在哪个生命周期调用？
可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。
我一般在 created 钩子函数中调用异步请求，能更快获取到服务端数据，减少页面 loading 时间；
过滤器的作用？如何实现一个过滤器？使用场景？
过滤器是用来过滤数据的，在vue中使用filters来过滤数据；使用场景：例如(时间/日期 格式化)