WEB前端面试题-2021 不定期更新
前端面试题
- 自我介绍
- VUE生命周期
- promise及回调地狱
- 元素 ,垂直水平居中
- 缓存
- mvvm
- vuex
- 响应式/兼容
- rem em
- v-if和v-show区别
- 为什么 v-for 和 v-if 不建议用在一起
- 虚拟DOM树
- 组件中的data为什么是一个函数
- 事件 事件冒泡
- 性能优化
- vue和小程序区别
- null和undefined
- Vue事件绑定原理是什么
- route 和router的区别
- 父子传参的方式
- v-model 双向数据绑定原理
- cookies，sessionStorage和localStorage的区别？
- git基本命令
- Git项目如何配置，如何上传至GitHub。描述其详细步骤
- UNIAPP
- px,rem,rpx,%区别
- 深拷贝，浅拷贝
- B复制A
- 数组方法
- 数据类型
鄙人不才,小小萌新,最近也是在忙面试,我把遇到的面试题给大家分享一下,希望会用得到(大佬可以直接右上角×掉了)
佛系更新,空闲时间会把答案一一补上,或者可根据题目自行搜索答案(第一次写,更新肯定不会及时,哈哈哈哈哈)
绝大部分内容摘自网络,仅做搜集用处,部分已获作者同意,若有侵权,联系我将立即删除.
仅做搜集,复习使用.
自我介绍
其实这部分我自己刚开始遇到的就很尴尬,英文刚开始的面试的时候,发现自我介绍就是介绍完自己什么姓名,年龄啊之类的就尬住了,不知道还可以说什么,所以以下,总结了一部分
- 自我介绍,姓名,年龄,籍贯就好, ps:爱好什么的其实不重要,人家关心你爱好吗? (当然可以算是介绍自己个性的一部分,纯属个人意见)
- 个人技能部分
- 其次就是工作经验了,项目经验了,比起其他来说,面试官/经理比较关心的问题
- 遇到的问题和解决方案
VUE生命周期
官方图解
大致分为四个阶段
创建,挂载,更新,销毁
每个阶段又有前后两个小阶段
一般来说, created，mounted中都可以发送数据请求，但是，大部分时候，会在created发送请求
promise及回调地狱
可参见这篇文章
也是我自己总结的 对新手来说看起来简单易懂
前端高频面试题 promise
元素 ,垂直水平居中
这个怎么说呢, 网上类似的方法真是一大堆,我在某站上看过类似的视频,老师讲了8种,我个人觉得常用的无非也就是使用
- vertical-align：middle
当前元素水平居中 如果当前元素是img以外的其他类型必须先转成行内块元素
1、给目标元素设置一个参照物（为该目标元素的同级元素）
2、将参照物转成行内块元素，参照物与父元素一样高 height：100%
3、给目标元素和参照物均设置vertical-align：middle；(这一句可以解决图片间隙问题)
- 子元素绝对定位 父元素相对定位 四各方向外边距
1、子元素设置绝对定位，父元素设置相对定位
2、上下左右四个方向都给0
3、margin：auto；
- 子元素绝对定位 父元素相对定位 采用margin负值
1、子元素设置绝对定位，父元素设置相对定位
2、上左两个方向都给50%
3、margin-top:子元素高度的一半
margin-left:子元素宽度的一半
注意：有限制情况：当元素的宽或高为奇数时不能用
- 子元素绝对定位 父元素相对定位 采用平移的方法
1、子元素设置绝对定位，父元素设置相对定位
2、上左两个方向都给50%
3、然后transform给-50%
注意：有限制情况：当元素的宽或高为奇数时不能用
- 弹性盒子
1、父元素设置为弹性盒
2、给父元素加属性justify-content: center;
3、给父元素加属性align-items: center;
摘自 高先生的猫 原文链接
缓存
mvvm
- 什么是mvvm
视图（View）：用户界面。（传送指令到 Controller）
控制器（Controller）：业务逻辑（完成业务逻辑后，要求 Model 改变状态）
模型（Model）：数据保存（将新的数据发送到 View，用户得到反）
MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。
- 定义
前后端分离：Model用纯JavaScript对象表示，View负责显示。model：服务器的业务逻辑操作view：用户界面ViewModel：核心枢纽
过程：把view和model关联起来的就是View Model。ViewModel负责吧Model的数据同步到view显出来，还负责吧view修改同步到Model。1. 各部分之间的通信，都是双向的。2. View 与 Model 不发生联系，都通过ViewModel传递。
原文摘自 SHiny-jun 原文链接
vuex
关于vuex的面试题网上的比较多，仅作参考
1、有哪几种属性有 5 种，分别是 state、getter、mutation、action、module
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex2、vuex 的 store 特性是什么(1) vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data(2) state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新(3) 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性3、 vuex 的 getter 特性是什么(1) getter 可以对 state 进行计算操作，它就是 store 的计算属性(2) 虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用(3) 如果一个状态只在一个组件内使用，是可以不用 getters4、vuex 的 mutation 特性是什么action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态action 可以包含任意异步操作5、vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回6、不用 vuex 会带来什么问题可维护性会下降，你要修改数据，你得维护3个地方可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背
复制代码摘自桀呐！ 原文链接
响应式/兼容
- 对响应式布局的看法
响应式布局有缺点也有优点。优点：面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。缺点：兼容各种设备时所需工作量大、效率低下、代码累赘，会隐藏无用的元素，加载时间延长，其实这是一种折中性质的十设计解决方案，由于多方面元素影响而达不到最佳效果，在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
- PC端页面需要兼容那些浏览器
浏览器不断更新，人们所熟知所使用的浏览器已不再是电脑自带的浏览器，所以在设计并完成PC端的页面时，要尽可能考虑更多的浏览器兼容性问题。那浏览器大致可以分为IE内核浏览器和非IE内核浏览器。IE内核浏览器：360，傲游、搜狗、世界之窗、腾讯TT非IE内核浏览器：Firefox、Opera、Safari、Chrome一般情况下主要考虑兼容性问题的浏览器是：IE6、IE7、IE8、Firefox5+、Safari、Chrome等浏览器
摘自 石虎132 原文链接
rem em
v-if和v-show区别
- 当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display)
- v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；
- v-show 则适用于需要非常频繁切换条件的场景。
为什么 v-for 和 v-if 不建议用在一起
当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费
虚拟DOM树
组件中的data为什么是一个函数
- 一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。
- 如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。
事件 事件冒泡
性能优化
vue和小程序区别
null和undefined
1.null 表示一个值被定义了，定义为“空值”；undefined 表示根本不存在定义。
2.设置一个值为 null 是合理的；设置一个值为 null 是合理的。
Vue事件绑定原理是什么
原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。
route 和router的区别
- router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样
- route相当于当前正在跳转的路由对象，可以从里面获取name,path,params,query等
父子传参的方式
- 父向子传值props
- 子向父传参 $emit $on
v-model 双向数据绑定原理
- v-model是用来在表单控件或者组件上创建双向绑定的
- 他的本质是v-bind和v-on的语法糖
- 在一个组件上使用v-model，默认会为组件绑定名为value的prop和名为input的事件
cookies，sessionStorage和localStorage的区别？
- 共同点：都是保存在浏览器端，且是同源的。
- 区别：cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享.
详见
sessionstorage和localsotrage详解
git基本命令
- git是什么:git是目前世界上最先进的分布式管理系统。
- git的常用命令
1、 git init 把这个目录变成git可以管理的仓库2、 git add README.md 文件添加到仓库3、 git add 不但可以跟单一文件，也可以跟通配符，更可以跟目录。一个点就把当前目录下所有未追踪的文件全部add了4、 git commit -m ‘first commit’把文件提交到仓库5、 git remote add origin git@github.com:wangjiax9/practice.git //关联远程仓库 6、 git push -u origin master //把本地库的所有内容推送到远程库上
原文摘自:一根倔强的头发
Git项目如何配置，如何上传至GitHub。描述其详细步骤
1、 注册登录github2、 创建github仓库3、 安装git客户端4、 绑定用户信息5、 设置ssh key6、 创建本地项目以及仓库7、 关联github仓库8、 推送项目到github仓库
原文摘自:一根倔强的头发
UNIAPP
- uniapp进行条件编译的两种方法？小程序端和H5的代表值是什么？
通过 #ifdef、#ifndef 的方式H5 ： H5MP-WEIXIN ： 微信小程序
- uniapp的配置文件、入口文件、主组件、页面管理部分
pages.json 配置文件main.js 入口文件App.vue 主组件pages 页面管理部分
- uniapp上传文件时用到的api是什么？格式是什么？
uni.uploadFile({url: '要上传的地址',fileType:'image',filePath:'图片路径',name:'文件对应的key',success: function(res){console.log(res)},})
- uniapp获取地理位置的API是什么？
uni.getLocation
- uni-app的优缺点
优点:a. 一套代码可以生成多端b. 学习成本低,语法是vue的,组件是小程序的c. 拓展能力强d. 使用HBuilderX开发,支持vue语法e. 突破了系统对H5条用原生能力的限制缺点:a. 问世时间短,很多地方不完善b. 社区不大c. 官方对问题的反馈不及时d. 在Android平台上比微信小程序和iOS差e. 文件命名受限
原文摘自:一根倔强的头发
px,rem,rpx,%区别
1、px
1）px就是pixel的缩写，意为像素。
2）px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。
3）px是我们网页设计常用的单位，也是基本单位。
4）通过px可以设置固定的布局或者元素大小。
5）缺点：没有弹性。
2、rpx
1）rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。
2）rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。
3）微信小程序规定屏幕的宽度为750rpx。
4）解释：例如宽度，相当于把屏幕宽度分为750份，1份就是1rpx。高度类似~
3、em
1）参考物是父元素的font-size，具有继承的特点。
2）如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
3）特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
4）1em=1倍父元素font-size的值，2em=2倍父元素font-size的值，以此类推……
4、rem
1）rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。
2）优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。
5、%
一般来说就是相对于父元素的：
1）对于普通定位元素就是我们理解的父元素
2）对于position: absolute;的元素是相对于已定位的父元素
3）对于position: fixed;的元素是相对于ViewPort（可视窗口），
6、vw
1）css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那100vw就是1200px,10vm就是120px，以此类推……
2）举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
7、vh
和vw相似
1）css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那100vh就是1200px，10vh就是120px，以此类推……
2）举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
8、vm
1）css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度2）2）900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。
2）兼容性太差 ,不建议使用
(转自博客园-sumlen)
rpx 相当于把屏幕宽度分为750份，1份就是1rpxpx 绝对单位，页面按精确像素展示em 相对单位，相对于它的父节点字体进行计算rem 相对单位，相对根节点html的字体大小来计算% 一般来说就是相对于父元素vh 视窗高度，1vh等于视窗高度的1%vw 视窗宽度，1vw等于视窗宽度的1%深拷贝，浅拷贝
B复制A
a.深拷贝 B的值更改，A不变
b.浅拷贝 B的值更改，A变化
数组方法
末尾删除，返回删除元素
Arr.pop()末尾添加，返回数组长度
Arr.push()头部删除，返回删除元素
Arr.shift()头部添加，返回数组长度
Arr.unshift()从i开始，删除n个，返回删除元素
Arr.splice(i,n)连接两个数组，返回新数组
Arr.concat()数组遍历
Arr.forEach()
Arr.map()
Arr.filter()判断所有
Arr.every()
判断某一个
Arr.some()迭代，新旧值
Arr.reduce()数据类型
基本数据类型有哪些，number，string，boolean，null，undefined，symbol以及未来ES10新增的BigInt(任意精度整数)七类。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！