前语

又到了金九银十季，最近我也是奔走于各种面试。我自己总结整理了许多方向的前端面试题。借着国庆这个假期，也把这些题目总结共享给咱们，也祝正在面试的朋友们能够拿到满足的offer。

往期文章

（1） 2022年我的面试万字总结（阅读器网络篇）

（2） 2022年我的面试万字总结（CSS篇）

（3） 2022年我的面试万字总结（HTML篇）

（4） 2022年我的面试万字总结（JS篇上）

（5） 2022年我的面试万字总结（JS篇下）

（6） 2022年我的面试万字总结（代码篇）

（7） 2022年我的面试万字总结（Vue上）

（8） 2022年我的面试万字总结（Vue下）

（9） 2022年我的面试万字总结（Vue3+TS）

（10） 2022年我的面试万字总结（Node、webpack、功用优化）

一、小程序

1.请谈谈微信小程序首要目录和文件的作用？

  • project.config.json：项目装备文件，用的最多的便是装备是否敞开https校验
  • App.js：设置一些大局的基础数据等
  • App.json：底部tab，标题栏和路由等设置
  • App.wxss：公共款式，引进iconfont等
  • pages：里边包含一个个具体的页面
  • index.json：装备当时页面标题和引进组件
  • index.wxml：页面结构
  • index.wxss：页面款式表
  • index.js：页面的逻辑，恳求和数据处理

2.请谈谈wxml与规范的html的异同？

  • 都是用来描绘页面的结构
  • 都由标签，特点等构成
  • 标签名字不一样，且小程序标签更少，单一标签更多
  • 多了一些 wx:if 这样的特点以及{{}} 这样的表达式
  • WXML仅能在微信小程序开发者东西中预览，而HTML能够在阅读器内预览
  • 组件封装不同，WXML对组件进行了从头封装
  • 小程序运转在JS Core内，没有DOM树和windiw目标，小程序中无法运用window目标和document目标。

3.请谈谈WXSS和CSS的异同？

都是用来描绘页面的姿态

  • WXSS具有CSS大部分的特性，也做了一些扩大和修正
  • WXSS新增了尺度单位，WXSS在底层支撑新的尺度单位rpx
  • WXSS仅支撑部分CSS选择器
  • WXSS供给大局款式与局部款式

4.你是怎样封装微信小程序的数据恳求的？

  1. 在根目录下创立util目录及api.js文件和apiConfig.js文件
  2. 在apiConfig.js封装基础的get，post和put，upload等恳求办法，设置恳求体，带上token和异常处理等
  3. 在api中引进apiConfig.js封装好的恳求办法.根据页面数据恳求的urls，设置对应的办法并导出
  4. 在具体的页面中导入或将一切的接口放在共同的js文件中并导出
  5. 在app.js中创立封装恳求数据的办法
  6. 在子页面中调用封装的恳求数据

5.小程序页面之间有哪些（传值）传递数据的办法？

  1. 页面跳转或重定向时，运用url带参数传递数据
  2. 运用组件模板 template传递参数
  3. 运用缓存传递参数
  4. 运用数据库传递参数
  5. 给html元素增加data-*特点来传递值，然后经过e.currentTarget.dataset或onload的param参数获取（data- 称号不能有大写字母，不能够寄存目标）
  6. 设置id 的办法标识来传值，经过e.currentTarget.id获取设置的id值，然后经过设置大局目标的方法来传递数据
  7. 在navigator中增加参数数值

6.请谈谈小程序的双向绑定和vue的异同？

大体相同，但小程序之间this.data的特点是不能够同步到视图的，有必要调用this.setData()办法

7.请谈谈小程序的生命周期函数

  • onLoad()页面加载时触发，只会调用一次，可获取当时页面途径中的参数
  • onShow()页面显现/切入前台时分触发，一般用来发送数据恳求
  • onReady()页面初度烘托完结时触发，只会调用一次，代表页面已可和视图层进行交互
  • onHide()页面躲藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等
  • onUnload()页面卸载时触发，如redirectTO或navigateBack到其他页面时

8.简述微信小程序原理

小程序本质便是一个单页面运用，一切的页面烘托和事情处理，都在一个页面内进行，但又能够经过微信客户端调用原生的各种接口；它的架构，是数据驱动的架构形式，它的UI和数据是别离的，一切的页面更新，都需求经过对数据的更改来完结； 它从技能和解现有的前端开发差不多，选用JavaScript、WXML、WXSS三种技能进行开发；

功用可分为webview和APPService两个部分：

webview首要用来展现UI，appservice用来处理事务逻辑，数据及接口调用，它们在两个进程中进行，经过体系层JSBridge完结通讯，完结UI的烘托，事情处理； appService有来处理事务逻辑、数据及接口调用；

两个部分在两个进程中运转，经过体系层JSBridge完结通讯，完结UI的烘托、事情的处理等。 javaScript的代码是运转在微信App中的，因而一些h5技能的运用需求微信APP供给对应的API支撑 wxml 微信自己根据xml语法开发的，因而在开发时只能运用微信供给的现有标签，html的标签是无法运用的 wxss具有css的大部分特性，但并不是一切都支撑，没有具体文档（wxss的图片引进需求运用外链地址，没有body，款式能够运用import导入）

9.请谈谈原生开发小程序，wepy，mpvue的比照？

个人以为，假如是新项目，且没有旧的 h5 项目搬迁，则考虑用小程序原生开发，长处是相比于第三方结构，坑少。 而假如有 老的 h5 项目是 vue 开发 或许 也有 h5 项目也需求小程序开发，则比较合适 wepy 或许 mpvue 来做搬迁或许开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。 而假如假如团队前端强壮，自己做一套结构也没问题。

10.简略描绘下微信小程序的 相关文件类型

  1. wxml 模板文件，是结构规划的一套标签预言，结合基础组件，事情体系，能够构建出页面的结构 wxss 款式文件，是一套款式言语，用于描绘WXML的组件款式 js脚本逻辑文件。逻辑处理网络恳求 json装备文件，小程序设置，如页面注册，页面标题及tabBar

  2. app.json是整个小程序的大局装备，包含：

    • pages:一切页面途径

    • 网络设置（网络超时事情）

    • 页面体现（页面注册）

    • window：（背景色，导航款式，默许标题）

    • 底部tab等

  3. app.js 监听并处理小程序的生命周期函数，声明大局变量

  4. app.wxss 大局装备的款式文件

11.那些办法来进步微信小程序的运用速度？

  • 进步页面的加载速度
  • 用户行为猜测
  • 削减默许的data的巨细
  • 组件化计划

12.分析微信小程序的优下风？

优势：

  • 简单上手，基础组件库比较全，根本不需求考虑兼容问题
  • 开发文档比较完善，开发社区比较活跃，支撑插件式开发
  • 杰出的用户体会，无需下载，经过查找和扫一扫就能够翻开，翻开速度快，安卓上能够增加到桌面，与原生APP差不多
  • 开发本钱比APP要低
  • 为用户供给杰出的保证（小程序发布，严厉是审查流程）

下风：

  • 约束较多，页面巨细不能超越1M，不能翻开超越5个层级的页面
  • 款式单一，部分组件已经是成型的，款式不行修正，例如：幻灯片，导航
  • 推行面窄，不能共享朋友圈，只能经过共享给朋友，附加小程序推行
  • 依托与微信，无法开发后台管理功用
  • 后台调试费事，因为api接口有必要https恳求且公网地址
  • 真机测验，个别安卓和苹果体现迥异，例如安卓的定位功用加载很慢

13.微信小程序和H5的差异？

  • 运转环境不同（小程序在微信运转，h5在阅读器运转）
  • 开发本钱不同（h5需求兼容不同的阅读器）
  • 获取体系权限不同（体系级权限能够和小程序无缝衔接）
  • 运用在生成环境的运转速度流程（h5需不断对项目优化来进步用户体会）

14.怎样处理微信小程序的异步恳求问题？

在回调函数中调用下一个组件的函数

*/app.js*/
​
success:function(info){
​
 that.apirtnCallback(info)
​
}
*/index.js*/
​
onLoad:function(){
​
    app.apirtnCallback = res =>{
​
        console.log(res)
​
    }
​
}

15.小程序相关微信大众号怎样确认用户的唯一性？

运用wx.getUserlnfo办法 withCredentials为true时，可获取encryptedData，里边有union_id，后端需求进行对称解密

16.运用webview直接加载要注意那些事项？

  • 有必要要在小程序后台运用管理员增加事务域名
  • h5页面跳转至小程序的脚步有必要是1.3.1以上
  • 微信共享只能够是小程序的主称号，如要自定义共享内容，需小程序版别在1.7.1以上
  • h5的付出不能够是微信大众号的appid，有必要是小程序的appid，并且用户的openid也有必要是用户和小程序的

17.小程序调用后台接口遇到那些问题？

  • 数据的巨细约束，超越规模会直接导致整个小程序溃散，除非重启小程序

  • 小程序不能够直接烘托文章内容这类型的html文本，显现需求凭借插件

    注：插件烘托会导致页面加载变慢，主张在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其他的标签让插件来做

18.微信小程序怎样完结下拉刷新？

用view代替scroll-view，设置onPullDownRefresh函数完结

19.webview中的页面怎样跳转回小程序?

wx.miniProgram.navigateTo({
  url:'pages/login/login'+'$params'
})
//跳转到小程序导航页面
wx.miniProgram.switchTab({
  url:'/pages/index/index'
})

20.bindtap和catchtap的差异？

bind事情绑定不会阻止冒泡事情向上冒泡 catch事情绑定能够阻止冒泡事情向上冒泡

21.简述wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的差异？

  • wx.navigateTo()：保存当时页面，跳转到运用内的某个页面。可是不能跳到 tabbar 页面
  • wx.redirectTo()：封闭当时页面，跳转到运用内的某个页面。可是不能跳转 tabbar 页面
  • wx.switchTab()：跳转到 tabBar 页面，并封闭其他一切非 tabBar 页面
  • wx.navigateBack()封闭当时页面，返回上一页面或多级页面。可经过 getCurrentPages() 获取当时的页面栈，决议需求返回几层
  • wx.reLaunch()：封闭一切页面，翻开到运用内的某个页面

22.小程序和Vue写法的差异？

  1. 遍历的时分：小程序wx:for=”list”, 而Vue是v-for=”item in list”

  1. 调用data模型（赋值）的时分：

    小程序：this.data.item // 调用，this.setDate({item:1})//赋值

    Vue：this.item //调用，this.item=1 //赋值

23.小程序与原生App那个好？

各有各自的长处，都又有缺陷

小程序的长处：

  • 根据微信渠道开发，享用微信自带的流量，这个长处最大

  • 无需安装，只需翻开微信就能用，不占手机内存，体会好

  • 开发周期段，一般最多一个月就能够上线完结

  • 开发所需的资金少，所需资金是开发原生APP的一半不到

  • 小程序称号是唯一的，在微信的查找里权重很高

  • 简单上手，只需之前有HTML+CSS+JS基础知识，写小程序根本没有大问题

  • 根本不需求考虑兼容性问题，只需微信能够正常运转的机器，就能够运转小程序

  • 发布，审阅高效，根本上午发布审阅，下午就审阅经过，升级简略，支撑灰度发布

  • 开发文档完善，社区活跃

  • 支撑插件式开发，一些根本功用能够开发成插件，供多个小程序运用

    缺陷：

  • 局限性很强（比方页面巨细不能超越1M，不能翻开超越5个层级的页面，款式单一，小程序的部分组件已经是成型的了，款式不能修正，比方幻灯片，导航）只能依靠于微信依托与微信，无法开发后台管理功用

  • 不利于推行，推行面窄，不能共享朋友圈，只能共享给朋友，附近小程序推行，其中附加小程序也收到微信约束

  • 后台调试费事，因为API接口有必要https恳求，且公网地址，也便是说后台代码有必要发布到长途服务器上；当然咱们能够修正host进行dns映射把长途服务器转到本地，或许敞开tomcat长途调试；不管怎样说终归调试比较费事

  • 前台测验有许多坑，最头疼莫过于模拟器与真机显现不共同

  • js引证只能运用绝对途径，不能操作DOM

原生App长处：

  • 原生的相应速度快

  • 对于有无网络操作时，比如离线操作根本选用原生开发

  • 需求调用体系硬件的功用（摄像头，拨号，短信蓝牙..）

  • 在无网络或许弱网情况下体会好

    原生App缺陷：

  • 开发周期长，开发本钱高，需求下载

24.小程序的发布流程（开发流程）

  1. 注册微信小程序账号
  2. 获取微信小程序的AppID
  3. 下载微信小程序开发者东西
  4. 创立demo项目
  5. 去微信大众号装备域名
  6. 手机阅读
  7. 代码上传
  8. 提交审阅
  9. 小程序发布

25.webview中的页面怎样跳回小程序中？

// 首要，需求在你的html页面中引证一个js文件
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
//然后为你的按钮标签注册一个点击事情
$(".kaiqi").click(function(){
    wx.miniProgram.redirectTo({url: '/pages/indexTwo/indexTwo'})
});
// 这里的redirectTo跟小程序的wx.redirectTo()跳转页面是一样的，会封闭当时跳转到页面，换成navigateTo，跳转页面就不会封闭当时页面

26.小程序授权登录流程

授权，微信登录获取code，微信登录，获取 iv , encryptedData 传到服务器后台，假如没有注册就需求注册。

27.小程序付出怎样完结？

//1.小程序注册，要以公司的身份去注册一个小程序，才有微信付出权限
//2.绑定商户号
//3.在小程序填写合法域
//4.调用wx.login()获取appid
//5.调用 wx.requestPayment({
  'timeStamp': '',//时刻戳从1970年1月1日00:00:00至今的秒数,即当时的时刻
  'nonceStr': '',//随机字符串，长度为32个字符以下。
  'package': '',//共同下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*
  'signType': 'MD5',//签名类型，默许为MD5，支撑HMAC-SHA256和MD5。注意此处需与共同下单的签名类型共同
  'paySign': '',//签名,具体签名计划拜见微信大众号付出协助文档;
  'success':function(res){},//成功回调
  'fail':function(res){},//失利
  'complete':function(res){}//接口调用完毕的回调函数（调用成功、失利都会执行）
})

28.小程序还有那些功用？

客服功用，录音，视频，音频，地图，定位，摄影，动画，canvas

29. 小程序的常见问题：

  • rpx：小程序的尺度单位，规定屏幕为750rpx，可适配不同分辨率屏幕 本地资源无法经过wxss获取：background-image：能够运用网络图片，或许base64，或许运用标签

  • wx.navigateTo无法翻开页面：一个运用同时只能翻开5个页面，请防止多层级的交互方法，或运用wx.redirectTo

  • tabBar设置不显现：

    1.tabBar的数量少于2项或超越5项都不会显现。

    2.tabBar写法过错导致不会显现。

    3.tabBar没有写pagePath字段（程序启动后显现的第一个页面）

30. 什么是uni-app

uni-app 是一个运用 Vue.js (opens new window)开发一切前端运用的结构，开发者编写一套代码，可发布到iOS、Android、Web（呼应式）、以及各种小程序（微信/付出宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快运用等多个渠道。

二、Git

1. git常用指令

1.1、git init

初始化一个 Git 库房，它将创立一个 .git 文件夹，后续的操作记载都会在此文件夹里，相当于 Git 的数据库。

1.2、git remote add origin 长途库房地址

将本地库房和长途库房相关，origin 是长途库房的名字，是 Git 的默许叫法。相关之后，咱们就能够将本地的提交前史推送到长途库房，完结和其他人的协同作业了。

1.3、git remote -v

检查相关的长途库房列表，返回长途库房名和 URL：

$ git remote -v
origin  https://github.com/schacon/ticgit (fetch)
​

1.4、git status

显现当时作业目录和暂存区的状况，例如创立了一个文件，此刻 git status 就会在 Untracked files 里显现该未追踪的文件，假如将该文件 add 了之后，就会在 Changes to be committed 看到，即已经加到缓存区，等候提交。最后，当咱们 commit，就会发现没有任何修正和未提交的文件了。

1.5、git add [file] 、git add .

用于将已修正或未跟踪的文件增加到暂存区

1.6、git commit -m “提交日志”

将暂存区的文件提交到本地库房

1.7、git log –oneline

检查提交的日志信息

1.8、git diff

检查作业区的文件和暂存区的不同之处

1.9、git push origin <本地分支名>

将本地的分支推送到 origin 长途库房的上，第一次推送长途库房将会在服务器上创立对应的分支，当第一次推送完后，后续能够直接运用 git push 这种简介用法了

1.10、git pull

将长途库房的最新内容兼并到本地库房里

1.11、git merge <其他分支名>

将其他分支里的提交内容兼并到当时分支里

1.12、git merge –abort

兼并是有可能有抵触的，假如抵触后想放弃兼并，能够运用这个指令

1.13、git branch 分支称号

创立新的分支

1.14、git checkout 分支称号

切换到其他分支上

1.15、git checkout -b 新分支称号

相当于上面连个指令的合体功用，即创立新分支，然后切换到新分支上。

1.16、git branch、git branch -r、git branch -a

别离是检查本地分支、检查长途分支、检查一切分支

1.17、git branch -d 分支称号

删去分支，假如该分支没有兼并过，则会提示相应过错，假如想要强制删去，可运用 git branch -D 分支称号

1.18、git clean -f

删去本地库房中未跟踪的文件，假如想删去的是目录，运用 -d

1.19、git reset

用于重置暂存区的文件与上一次的提交(commit)保持共同，但不会重置作业区的修正，需运用 git checkout <文件名> 指令才干重置作业区的改动。或许运用比较危险的 git reset --hard HEAD 指令，会将作业区和暂存区都重置到上一次版别，包含 commit 信息。

1.20、git rm 文件、git rm –cached 文件名

假如仅仅简略的在作业目录里手动删去文件，则还需求自己将修正增加到暂存区，然后再提交到本地库房里才完结一次改动版别的记载。git rm 文件 则帮咱们在删去的同时，也将修正增加到了暂存区，少了一步的操作。

但有时分咱们想保存该文件，以便后续运用，但又想把删去的改动增加到暂存区，此刻就能够运用 git rm --cached 文件名 指令来达到此作用了。

1.21、git stash 和 git stash pop

假如咱们开发到一半，需求从头创立一个新分支去处理线上问题，但此刻又不想将当时的分支改动提交到对应分支上，则能够运用 git stash 将修正（包含作业区和暂存区）保存到库房中，等新分支处理完毕后，就能够切换到之前的分支，然后运用 git stash pop 康复缓存的库房内容了。

2. git提交时发生抵触，你能解说抵触时怎样发生的吗？你是怎样处理的？

抵触怎样发生的

开发过程中，咱们都有自己的特性分支，所以抵触发生的并不多，但也碰到过。诸如公共类的公共办法，我和别人同时修正同一个文件，他提交后我再提交就会报抵触的过错。

怎样处理抵触

1、发生抵触，在IDE里边一般都是比照本地文件和长途分支的文件，然后把长途分支上文件的内容手工修正到本地文件，然后再提交抵触的文件使其保证与长途分支的文件共同，这样才会消除抵触，然后再提交自己修正的部分。特别要注意下，修正本地抵触文件使其与长途库房的文件保持共同后，需求提交后才干消除抵触，否则无法继续提交。必要时可与同事交流，消除抵触。

2、发生抵触，也能够运用指令。经过git stash指令，把作业区的修正提交到栈区，意图是保存作业区的修正；经过git pull指令，拉取长途分支上的代码并兼并到本地分支，意图是消除抵触；经过git stash pop指令，把保存在栈区的修正部分兼并到最新的作业空间中；

3. 假如本次提交失误，怎样吊销

假如想吊销提交到索引区的文件，能够经过gitresetHEADfile。假如想吊销提交到本地库房的文件，能够经过gitreset–softHEAD^n，康复当时分支的版别库至上一次提交的状况，索引区和作业空间不改变。

经过gitreset–mixedHEAD^n康复当时分支的版别库和索引区至上一次提交的状况，作业区不改变。

经过gitreset–hardHEAD^n康复当时分支的版别库、索引区和作业空间至上一次提交的状况。

4. git和svn有什么差异

  • git是分布式版别操控，svn是集中式版别操控（核心差异）
  • git相对于svn的优势便是不需求网络即可版别操控
  • git把内容按数据方法存储，而svn是按文件
  • git能够是共用的，能够共享，svn根本是公司内部才干访问，网外不便利访问
  • git不依靠中央服务器，即便服务器有问题也不受影响，svn依靠服务器，一旦服务器有问题就会受影响
  • git没有一个大局的版别号，svn有

分布式和集中式的差异：

每个节点的位置都是平等，拥有自己的版别库，在没有网络的情况下，对作业空间内代码的修正能够提交到本地库房，此刻的本地库房相当于集中式的长途库房，能够根据本地库房进行提交、吊销等惯例操作，然后便利日常开发

5. git fetch、git merge、git pull的差异

git pull相当于git fetch和git merge，即更新长途库房的代码到本地库房，然后将内容兼并到当时分支。 git merge:将内容兼并到当时分支 git fetch相当所以从长途获取最新版别到本地，不会主动merge 便利回忆: git pull=git fetch+git merge

6. Git的rebase和merge的差异是什么？

git rebase 和 git merge 两个指令都⽤于从⼀个分⽀获取内容并兼并到当时分⽀。

以一个 feature/todo 分⽀兼并到 master主分⽀为例，咱们来看一下别离⽤ rebase 和 merge 会有什么不同。

运用 Merge

merge 会⾃动创立⼀个新的 commit， 假如兼并时遇到抵触的话，只需求修正后从头 commit。

  • 长处：能记载真实的 commit 情况，包含每个分⽀的详情

  • 缺陷：由于每次 merge 会⾃动产⽣⼀个 merge commit，

    因而在使⽤⼀些可视化的 git 东西时会看到这些主动发生的 commit，

    这些 commit 对于程序员来说没有什么特别的含义，多了反而会影响阅读

运用 Rebase

rebase 会兼并之前的 commit 前史。

  • 长处：能够得到更简练的提交前史，去掉了 merge commit
  • 缺陷：因为兼并而发生的代码问题，就不简单定位，因为会重写提交前史信息

主张

  • 当需求保存具体的兼并信息，主张使⽤ git merge, 尤其是要兼并到 master 上
  • 当发现⾃⼰修正某个功用时提交比较频繁，并觉得过多的兼并记载信息对自己来说没有必要，那么可测验运用 git rebase