2022 前端面试题

数据类型	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 移除定时器，移除事件监听

27. 导航守卫

组件内部，路由独享，全局守卫

实现权限管理：

在路由配置定义meta权限

通过全局beforeEach实现路由守卫

beforeEach3个参数 to要去的页面，from从哪个页面来，next下一操作

28. $router,和$route区别

$route是当前页面路由信息，params，query，path,fullpath

$router使整个路由实例通常带方法push，replace back forward go

29. 路由传参，子路由

params传参 query查询传参 hash传参 meta传参

子路由：在路由配置添加children

动态添加路由，router有个AddRoutes方法

30. 你封装过哪些组件（哪些插件）？

日期格式，防抖节流，瀑布流，弹框，提示，翻译。

设计好组件的data（尽量不使用data）

定义好props（多使用）

设计好方法

设计插槽和查找作用域

注意组件的传参

哪些工具

解析时间，格式时间，获取查询参数

清空数组，url转换（qs）html转文本

对象合并，常见dom操作，防抖，节流

深拷贝

31. vuex 哪些组件

存储数据的state

修改数据唯一方式 mutations

异步操作的Actions

模块：module

映射方法：getters

32. 什么是vuex

vuex是vue的全局状态管理器，当state更新，引用state组件的视图会响应式更新。

本质上就是一个没有template的vue文件

通过vuex可以更好集中管理数据，多个组件共享数据

33. vuex和全局变量区别

都可以实现多个组件全局共享数据

vuex的数据是响应式，会自动更新视图

vuex的修改必须是mutations，更加利于调试

vuex还支持异步操作，方便vuex插件便于调试

34. vuex mutations和action区别

mutations用来改变数据（唯一方式）

actions执行异常操作

35. 哪些数据你都存储在vuex

当多个组件都需要使用的数据通常都存储在vuex里面

app信息：，菜单栏信息，设备，运行模式

用户相关：token ，用户信息，权限信息，第三方登录信息

用户访问历史，操作日志

设置信息：主题，自定义菜单，标签

权限相关：路由，固定路由，菜单路由，

同时通过actions执行请求，mutations更新

36.axios封装哪些常用功能

基础配置：baseURL，timeout，headers

拦截响应与请求：加载提示，token和其他请求头，错误响应操作，添加或移除权限

37. 组件传参

父传子 props，

子传父$emit 事件

非父子关系：

ref获取引用

依赖注入：provide inject

vuex

vue2（选项options）：event Bus传参；$parent父对象，$c0hilren子对象 $root根节点

38. nextTick作用（全局方法）

数据更新，等待视图更新执行的回调函数（dom操作常用）

39. vue2 有没有遇到数据更新视图不更新？

vue2 通过数组下标更新数据，视图不会更新

Vue.set(数据名，下标，数值)强制视图更新a

this.$set(数组名，key，value)

vue2 数组的双向绑定监听是通过重写数组的原型方法 pop，push ..

40. 在vue-for循环中为什么时候key

key为了让vue虚拟dom节点查找与更新更加优化（优化dom的渲染）

vdom 优化diff算法：

如果过key一致就不向下查找
如果tag不一致，子节点不查找
只在同级做比较

n3次方优化到n1次方

41. 什么是虚拟dom，优点

虚拟dom就是用js对象的形式去模拟dom节点

操作dom 重绘，回流，消耗页面性能

虚拟dom，操作js比操作dom要快，通过diff算法查找之前的vdom与现状vdom最小区别，通过patch更新到dom视图中

虚拟dom可以映射html，虚拟dom可以转换为ios的组件，转换为android组件（react-native）

前端通过编写js实现原生ios/Android 的效果（实现跨平台开发）

42. 箭头函数与普通函数的区别？

箭头函数this指向函数的上一层作用域的this
箭头函数不能作为构造函数，没有constructor

43. this指向问题

函数的this在函数执行的确定的

构造函数 new 函数名() this执行的 new出来对象的实例
箭头函数的this上一层作用域的this
对象中的this指向对象
事件响应函数的this指向调用者
setTimout setInterval 里面this指向window
call，apply，bind 响应的函数this指向第一个参数

44. 变量提升

在js var 声明的变量会被提升到当前作用域的最前面赋值为undefined

所有的函数也会被默认提升到当前作用域的最前面:函数可以先调用后声明

45. let 与var的区别

let 不会变量提升，var声明的变量会变量提升

let 不能重复声明 var可重复声明

const 声明必须赋值，值类型的值不能修改

46.小程序

小程序单位：rpx 750rpx宽度等于一屏的宽度

更新数据 this.setData()

全局数据 globalData:{xxx:"yyy"}

var app = getApp（）

app.globalData.xxx

限制：页面栈5层，tab栏2-5，源文件包2M总20M，setData 1M 本地存储1次1M最大100M

跳转：navigateBack 移除一层页面栈 navigate 添加一个层页面栈 redirect 替换一层栈，switchTab请空页面栈

分包与与加载：app.json 配置一下

npm: npm init 初始化，a'z'z'z'z'z'z'z'z'z'z'z'z'z'z'z'z'z'zazzzzzzzzzzzzzzzzzz i安装，构造npm

生命周期：小程序生命周期，页面的生命周，组件的生命周期

小程序：启动onLaunch 前台onShow 后台 onHide 错误 onError

页面：加载onLoad(options）onReady加载完毕 onShow显示 onHide后台运行分享，下拉，滚动，触底，底部栏切换

组件的：attach 挂载 detach 卸载 move移动。。。。

登录流程：wx.login 获取code 发给后端后端通过appid appscecret 找微信服务器换取 sessionid与openid

获取用户信息：必须是用户才能使用api getUserInfo getUserProfile

云开发：了解没有用过

自定义底部栏，顶部导航。配置

47.获取浏览器宽高

window.innerWidth wondow.innerHeight

document.documentElement.clientWidth

48.clientWidth offsetWidth, scrollWidth区别

clientWidth内容+padding宽

offsetWith 内容+padding+边框宽

scrollwidth 内容+滚动区域的宽

49.scrolleft offsetLeft

scrollLeft 滚动条滚动的距离

offsetLeft 当前元素与父元素（position非static）距离

50.事件event.pageX ，event.pageY,clientX,clienX

事件点击的位置

51. 手机端事件

touchStart touchMove touchE.nd

事件参数 event.currrentTouches[0]

52. 获取元素的边界

elem.getBoundingClientRect()

dom操作，距离计算（监听滚动，图片懒加载，瀑布流）

53. JQuery相关

jq源码阅读过：读过，没有全董

无new操作怎么实现

var vm = new Vue() //通过new关键字实现实例化

$("div")

jquery的工厂函数与原型链重新指向

js对象转jq

用$函数包裹 $(js对象)

jq转js

下标获取，get方法获取

$(selector)[0]

$(selector).get(0)

window.onload 与 jQuery.ready() || $() 区别

onload 后面覆盖前面；$(function(){}) 可以执行多重

onload等于页面加载才执行；入口函数dom加载就执行

页面渲染过程

下载html 生成dom树

下载css生成css树

css树与dom树合并为渲染树

开始渲染页面，遇到js会有阻塞，

JQuery.常用方法

show hide fadeIn fadeOut toggle slideIn slideDown显示与隐藏

css（） html（） attr（） props（）text（）val 属性和值

addClass toggleClass hasClass removeClass（）类

animation() stop() 动画停止动画

$ajax,$.get $,post() .load() ajax方式

find chilren parent parents next sibings 查找节点

54.html5标签有哪些

article aisde section header footer main hgroup figure video audio

55. 行内标签，块标签，行内块

行内 a span i u code b strong sub sup em del

块 div，p，h1-h6，ul li dl dt dd ol

行内块 img iframe

表格：table thead tbody th tr td

表单 input textarea button

56.行内与块区别

行：水平排列，不可设宽高可以设margin

块：垂直排列可设宽高不可以设margin

行块：水平可设宽高可以设置margin

都可以设置paddding

行内元素浮动自动化为块

57. 如果写个三角形

宽高为0 三边透明，一边显示

.san{

width:0;

hegiht:0;

display:block;

border:10px solid transparent;"

border-left-color:red;

}

58. css哪些属性可以继承

文字属性可以继承。a不继承，h标签页不继承粗细

59. css如何垂直居中

行内：文字一行，高等于行高

行内块：一行，高等于行高，veticle-aligin:middle

块:

flex 弹性布局 aligin-items:center;

display:table-cell

定位的方式

60. css权重

选择器 * 0.5 标签 1 类10 id 100 import 最高

行内>内嵌>外链(离元素节点越近权限越高)

61. BFC

块级格式上下文

解决：父元素高度坍塌，margin加倍问题，实现自适应宽布局（bfc之间不会重叠）

62. px pt rem em rpx

px 像素

pt ios单位通常 2倍屏（iphone 5,6,7,8） 1pt = 2px 3倍屏1pt = 3px（iphonex，iphone6 plus）

em 一个字符宽

rem 根节点一个字符宽

rpx 是小程序uni-app的宽 750= 一阁屏幕

vh 100vh = 1个屏幕的高

vw 100vw = 1个屏幕的宽

63. 清除浮动

解决的是父组件高度坍塌的问他

oveflow：hidden开启bfc
设置高度
最后一子元素宽100%，清除both

64. 定位区别

relative 相对定位正常文档流相对于自身的位置

absolute 绝对订定位脱离文档流相对于开启了position非static最近的父辈元素，

fixed 固定定位脱离文档流相对于浏览器可是窗口（不随滚动条滚动）

65. webpack 中的插件plugin与加载器loader的区别

loader用来处理非js文件的，插件在webpack运行生命周期中进行压缩，清理等工作

66. webpack有哪些优化方式

区分生产模式和开发模式

压缩优化css，压缩优化js，压缩图片，base64小文件减少请求

使用hash命名控制二次缓存

异步加载，懒加载，按需加载，摇树treeshake

67. webpack 切换环境，区分环境，跨平台传递参数

cross-env 插件跨平台传递参数，通过参数区分环境，切换环境。process.env这个参数

（axios的baseURL也是通过pross.evn区分环境的）

68.不用vue脚手架自己能搭建项目吗

能，原理是用webpack 搭建，写配置文件

vue-loader 处理.vue

vue-template-compiler 编译模板

69.webpack核心概念

入口：entery 从那开始进入打包 index.js/main.js

出口：文件输入的位置 output

plugin：插件，在webpack运行生命周期过程中进行打包清理，压缩等额外操作

loader：加载器处理非.js 文件的

mode：模式production development

tip：vue.config.js 其实就是webpack.config.js的vue版本（大部分可通用）

70.get 与post 请求

get缓存，post不缓存

get由于浏览器url现在只能2k，post没有理论上没有限制

get收藏书签与分享

get常用于向服务器获取数据，post常用于修改，增加删除数据

71.闭包

函数嵌套函数，函数作为参数被传入，函数作为返回值被返回

在函数外部修改函数内部的局部变量

创建局部作用域，避免变量的全局污染

72.如何解决异步

回调函数（出现回调地狱）

Promise

sync/await

生成器generator (函数前加个* yeild next)

订阅发布模式

73.如何实现继承

extend 关键字类实现继承
原型链继承

function Parent（）{}

function Son（）{

// 继承构造函数

Parent.call(this,参数)

}

// 继承原型

Son.prototype = Object.create(Parent.protype)

// 修正构造函数

Son.prototype.constructor= Son

74.事件流

冒泡流，先最具体元素到最不具体

捕获流，反之

addEventListener(事件类型，回调函数，是否捕获）

75.如何事件先冒泡后捕获

同一事件同时监听冒泡和捕获，分别对应处理函数

76.事件委托，代理

事件监听不直接放在触发的元素上面，而监听其共有的父元素上

通过事件冒泡和事件对象（event.target）判断具体元素

好处：可以对动态添加的子元素添加事件

77.图片懒加载与预加载

图片懒加载当用户不需要的时候先不加载图片

图片预加载：当网络有空闲先提前把可能需要的图片缓存到内存中

78.mouseover与mouserenter区别

over移入元或者子对象都会触发

enter移入本身才会触发

79.js的new操作符做了哪些事情

创建空的对象
通过call apply执行函数并把空对象作为this传入
把空对象原型原型构造函数的prototype

80. 说一下 http 和 https

https 加密，http明文； https端口443 http端口80

81. tcp 三次握手，一句话概括

C代表客户端

S代表服务端

第一次握手：S 只可以确认自己可以接受 C 发送的报文段

第二次握手：C 可以确认 S 收到了自己发送的报文段，并且可以确认自己可以接受 S 发送的报文段

第三次握手：S 可以确认 C 收到了自己发送的报文段

82. TCP 和 UDP 的区别

1.）TCP 是面向连接的，udp 是无连接的即发送数据前不需要先建立链接。

2）TCP 提供可靠的服务。也就是说，通过 TCP 连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP 尽最大努力交付，即不保证可靠交付。

3)TCP 只能是 1 对 1 的，UDP 支持 1 对 1,1 对多。

83. webscoket

http 协议不支持持久性连接。 webscoket 是持续的长链接

webScoket常用于聊天，消息主动推送

84. HTTP 请求的方式，HEAD 方式与OPTIONS

HEAD 只发送请求头，不发送请求体

options：允许客户端查看服务器的性能，比如说服务器支持的请求方式等等。

85. 一个图片 url 访问后直接下载怎样实现？

1. 域名解析ip

2. 发送请求头

3. 服务器应答响应头和响应体（图片内容）

4. 客户端渲染图片

86. web Quality（无障碍）

能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。

如：设置img的alt属性图片提示（通过语音也知道图片是什么）

87. 什么是 Bom? Bom 是浏览器对象。有哪些常用的 Bom 属性呢？

location 地址信息

location.href 地址

location.reload() 刷新

location.replace() 跳转

history 历史记录

history.go() 跳转

history.back() 后退

history.foward()前进

window.navigator.userAgent 浏览器的标识

88. 说一下 http2.0

提升访问速度；允许多路复用；二进制分帧（更快乐，同时容量更大了，可分割更小了）

89. iframe 是什么？有什么缺点？

行内框架，在网页中可以嵌入另外一个网页

缺点：阻塞onload加载事件，不利seo（搜索引擎优化）（你的网站在百度可以被人更快搜索到）

解决方法：使用js动态添加iframe 设置src

90.Doctype 作用?严格模式与混杂模式如何区分？它们有何意义?

Doctype 告诉浏览器你什么模式渲染页面；严格按浏览器最新标准；混杂兼容渲染

xss攻击用户使用非法javascript与网站交互实现非法的目的

后端：httponly 防止js访问cookie ，secure让https才发生cookie

cookie 浏览器与服务器交互的重要手段；cookie存储在浏览器端一小段数据

http请求与响应都会携带cookie；cookie可以被后端设置；也可以被前端设置

session是存储在服务器的当前用户的唯一标识符（安全）

通常以cookie形式存储sessionid 告诉前端当前用户的状态

93.一句话概括 RESTFUL

就是用 URL 定位资源，用 HTTP 描述操作

是前后端交互风格开发方式，URL 定位资源，http请求时候用put添加 delete删除 post修改 get获取等方法与服务器交互

94.什么是ajax？

全称：异步的javascript和xml

核心：xhr：XMLHttpRequest

作用：无刷新更新页面的数据（视图）

原理：客户端通过xhr与服务器交换数据，客户端用javascript来操作dom渲染更新数据

95.什么是浏览器同源策略？

https://pan.baidu.com:8080/list?name=mumu&age=18#good

https 协议

pan子域名

baidu.com 域名

:8080 端口号

/list 路径 ?name=mumu&age=18 查询参数 #good 哈希值

同源策略（安全策略）：客户端向服务器请求数据的时候，要求客户端请求的html与服务器请求的地址要

协议一致，域名一致，子域名一致，端口号一致。

96.什么是跨域，跨域的常见方式有哪些？

跨域是绕过浏览器的同源策略（跨域名）向服务器请求数据

CORS 服务器响应头允许：Access-Control-Allow-Origin: *
jsonp技术（天气案例）
代理请求

97.jsonp的原理是？

利用的script的src属性没有同源策略的限制

Vue中路由相关的组件是？

<router-view> 存放路由页面

<router-link> 切换路由

路由配置

{ path:"/about" ，

name:"about"，

component：About

}

路由传参

{path:"/produce/:id",name:"produce",component:Produce}

{$route.params.id}

路由方法

$router.go

.back()

.forward前进

.push() 添加

replace（）替换

98.$router 有哪些方法（5个）

go(num)跳转

back()返回

forward（）前进

push（）添加历史记录（跳转）

replace（）替换

99. 写一个produce带参数路由配置

{ name:"produce",path:"/produce/:id",component:Produce }

在页面中获取参数$route.params.id

100. 导航组件内部守卫

进入前，更新前，离开前

beforeRouteEnter(to,from,next)

beforeRouteUpdate()

beforeRouteLeave()

101. sessionStore有哪些方法（3个）localStorage也具有这些方法

setItem(key,value) 设置数据

getItem(key) 获取key数据

removeItem(key) 移除key数据

clear()清空

102. 使用axios的get请求请求/list.php 请求参数是 {name:"mumu",age:18}

并在控制台输出请求内容（2种get方法）

axios.get("list.php?name=mumu&age=18").then(res=>'').catch(err=>'')

axios.get("list.php",{params:{name:"mumu",age:18}}).then().catch()

axios({url:"/list.php",method:"get",params:{name:"mumu",age:18}}).then().catch()

axios({url:"/list.php?name=mumu&age=18",method:'get'}).then().catch()

103. 使用axios的post请求请求/login.php 请求参数是 {name:"mumu",age:18}

并在控制台输出请求内容（2种post方法）

axios.post("/login.php","name=mumu&age=18",{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then().catch()

根据接口要求

axios.post("/login.php",{name:"mumu",age:18},{headers:{'Content-Type':'application/json'}}).then().catch()

post默认就是json格式可以省略

axios.post("/login.php",{name:"mumu",age:18}).then().catch()

axios({

url:"login.php",

method:"post",

data:"name=mumu&age=18"},

headers:{"Content-Type":"application/x-www-form-urlencoded"})

.then().catch()

104. 什么是浏览器的同源策略？

客户端向服务器请求数据，

t'r要求客户端的网址与服务器是同源

协议，端口，子域名，域名一致

105. 跨域的方式有哪些？

jsonp

CORS 响应头允许（后端允许）

服务器代理

106. jsonp的原理有哪些？(script)