2022 前端面试题-CSDN博客

数据类型	typeof 值	举例
String字符串	string	“abc”,'abc',`def`
Number数组	number	123，-12.5
Boolean布尔	boolean	true,false
undefined未定义	undefined	undefined
Symbol符号	symbol	symbol
null 空	object	null

复杂数据类型，引用类型

数据类型	typeof	举例
Array数组	object	[1]
Object对象	object	{}
function函数class类	function	function(){}
Map图	object	new Map([[]])
Set集合	object	new Set([])
weakMap，weakSet	object
Date,Math,	object

值类型与引用类型的区别

值类型 key和value都存储在栈中。

引用类型栈中存内存地址，真正值存储在堆中。

// 值类型

var a = 15；

var b = a；

b = 20；

// b与相互不影响

一个引用类型堆中的值可以被多个变量引用，修改其中一个会影响到其它。

2.什么是闭包，闭包的应用场景，闭包的缺点

闭包就是函数嵌套函数，函数作为参数被传入，作为返回值被返回。

闭包作用：

形成局部作用域，
在函数外部可以访问函数内部的局部变量

闭包的缺点

被闭包引用的变量不会被js垃圾回收机制销毁，会常驻内存，使用不当容易造成内存崩溃

3.什么是原型，什么是原型链

每个构造函数（class）都有一个显示的原型prototype

每个实例实例对象都有个隐私原型__proto__

实例的隐式原型__proto__等于其构造函数的显示原型protype

当查找一个对象的属性或方法时先在实例上查找，找不这沿着__proto__向上逐级查找

我们把__proto__的__proto__形成的链条关系成为原型链

作用：1 原型链实现了js继承，2.原型可以给构造函数创建的实例添加公用方法

4.JS如果实现继承

class使用extends关键字实现继承
通过原型链实现继承， ·

5. Call，apply的区别

call与apply都是执行一个函数，用第一个参数冒充函数的this

apply参数用的是数组形式

6. new关键字做了什么？

创建空对象
call执行构造函数并传入空对象作为this
指定空对象的构造函数

7. 浅拷贝

Object.assign(A,B)
for in遍历拷贝
{...A}对象扩展

8. 深拷贝

1.转字符串

2.递归

9. js检测对象类型

typeof ：引用类型除function都返回 object

instance ：是某个函数的实例，在原型链有该构造函返回ture

最准确：Object.prototype.toString.call(obj).slice(8,-1)

constructor, Array.isArray()

10. 事件流

冒泡流：事件由最具体的元素响应然后组件冒泡到最不具体的元素（html）

捕获流：从最不具体的元素捕获事件

开启捕获 addEventListenter第三个参数 true

阻止事件冒泡：e.stopPropagation()

11. 事件代理

把事件注册到多个元素共有的父元素上，通过事件的冒泡机制响应事件

作用：动态添加的元素也可以响应事件

12. 数组去重

1.set去重

var arr2 = [...new Set(arr1)]

2.filter过滤

var arr2 = arr1.filter((item,index)=>arr1.indexOf(item)===inmmdex)

13. 异步和同步

同步是按顺序执行，会阻塞代码

异步非阻塞式执行代码

异步方法：回调函数，Promise，订阅发布模式，事件响应，aync和awiat

14. 手写ajax

ajax核心是通过XMLHttpRequest（xhr）与服务器异步交换数据，实现前端刷新更新视图

15.Promise

Promise 实现异步操作，解决回调函数层级过多形成的回调地狱问题

Promise resolve与reject状态发送改变不能更改

Promise.reject()

Promise.all() 多个promise多完成才返回结果

Promise.race() 多个promise执行返回最快的一个

你在哪些地方用到promise

定义api请求接口
自定义jsonp用到
弹框插件等待用户确定则resolve
封装actions 用sync装饰 await实现异步

（等待，网络，等待用户确定的）（异步操作都会用到promise）

16. get与post区别

get 获取数据

post 新增，修改，删除

put 修改

delete 删除

get 有缓存的，可以收藏书签，方向，数据量2k

post 没有缓存，理论上没有大小限制

17. 什么是RESTful

RESTful是接口的设计风格

每一个URI地址都是一个资源

使用get获取，post新增，put修改，delete方法删除

18. 如何实现跨域

jsonp
后端响应头允许
代理

无论哪种跨越都需要后端支持

19. jsonp原理

利用了script标签src没有同源限制。

后端返回的是方法名+（）+数据格式 fun（data）

前端提前与定义这个方法就能获取数据

20 .什么是MVVM（前后端分离）

M：model 模式存储数据

V：view 显示内容（html）

VM viewModel视图模块连接视图与model模型（

）

当model数据发生变化时候通过VM可以监听变化更新视图

当view视图发变化时候通过VM可以监听变化自动更新model数据

21. 什么是MVC（前后不分离代码）

M 模型

v 视图

c 控制器

后端软件的设计思维：把视图V和模型M通过C控制实现分类

mvc（有利于SEO）

前端写好视图交给后端后端经过编程生成 html 发送给浏览器（客户端）

mvvm（有利于开发）)

后端写好接口，前端请求接口数据+定义视图，在浏览器（客户端）渲染html

22. Vue2 响应式原理，（双向绑定的原理）

通过Object.defineProperty劫持对象的getter与setter

通过订阅与发布者模式结合

er观察者来连接视图与数据

当数据发生变化时候通知说要订阅该数据的订阅者更新

23. Vue3响应式原理

ES6新增的 proxy代理实现的

vue3 与Vue2的区别

响应式原理不同：Object.defineProperty和Proxy
启动方式不用：

//vue2

new Vue({

store,

router,

render:h=>h(App)

}).$mount("#app")

// vue3

createApp(App).use(store).use(router).mount("#app")

全局挂载方法

Vue3 增加了setup 组合式api

24. v-if与v-show的区别

都可以隐藏节点

v-show通过css方式隐藏

v-if 直接移除dom节点

频繁切换显示与隐藏用v-show反之用v-if

25. computed与watch区别

computed有缓存，watch没有

conputed从现有数据计算出新的数据，watch是监听数据变化执行handler回调函数

computed 多对一，watch一对多

26. 生命周期

option选项api ：创建前后，挂载前后，更新前后，销毁前后

setup中：没有创建前后

created 有this，发起ajax请求，监听事件，定时器

setup 没有this ，发起ajax请求，监听事件，定时器

mounted 可以操做dom

beforeDestroyed ||onUnmount 移除定时器，移除事件监听