WEB前端面试题-2021 不定期更新

鄙人不才,小小萌新,最近也是在忙面试,我把遇到的面试题给大家分享一下,希望会用得到(大佬可以直接右上角×掉了)
佛系更新,空闲时间会把答案一一补上,或者可根据题目自行搜索答案(第一次写,更新肯定不会及时,哈哈哈哈哈)
绝大部分内容摘自网络,仅做搜集用处,部分已获作者同意,若有侵权,联系我将立即删除.
仅做搜集,复习使用.

自我介绍

其实这部分我自己刚开始遇到的就很尴尬,英文刚开始的面试的时候,发现自我介绍就是介绍完自己什么姓名,年龄啊之类的就尬住了,不知道还可以说什么,所以以下,总结了一部分

1. 自我介绍,姓名,年龄,籍贯就好, ps:爱好什么的其实不重要,人家关心你爱好吗? (当然可以算是介绍自己个性的一部分,纯属个人意见)
2. 个人技能部分
3. 其次就是工作经验了,项目经验了,比起其他来说,面试官/经理比较关心的问题
4. 遇到的问题和解决方案

VUE生命周期

官方图解
大致分为四个阶段
创建,挂载,更新,销毁
每个阶段又有前后两个小阶段
一般来说, created，mounted中都可以发送数据请求，但是，大部分时候，会在created发送请求

promise及回调地狱

可参见这篇文章
也是我自己总结的 对新手来说看起来简单易懂
前端高频面试题 promise

元素 ,垂直水平居中

这个怎么说呢, 网上类似的方法真是一大堆,我在某站上看过类似的视频,老师讲了8种,我个人觉得常用的无非也就是使用

1. vertical-align：middle

当前元素水平居中 如果当前元素是img以外的其他类型必须先转成行内块元素
1、给目标元素设置一个参照物（为该目标元素的同级元素）
2、将参照物转成行内块元素，参照物与父元素一样高 height：100%
3、给目标元素和参照物均设置vertical-align：middle；(这一句可以解决图片间隙问题)

2. 子元素绝对定位 父元素相对定位 四各方向外边距

1、子元素设置绝对定位，父元素设置相对定位
2、上下左右四个方向都给0
3、margin：auto；

3. 子元素绝对定位 父元素相对定位 采用margin负值

1、子元素设置绝对定位，父元素设置相对定位
2、上左两个方向都给50%
3、margin-top:子元素高度的一半
margin-left:子元素宽度的一半
注意：有限制情况：当元素的宽或高为奇数时不能用

4. 子元素绝对定位 父元素相对定位 采用平移的方法

1、子元素设置绝对定位，父元素设置相对定位
2、上左两个方向都给50%
3、然后transform给-50%
注意：有限制情况：当元素的宽或高为奇数时不能用

5. 弹性盒子

1、父元素设置为弹性盒
2、给父元素加属性justify-content: center;
3、给父元素加属性align-items: center;

摘自 高先生的猫 原文链接

缓存

mvvm

1. 什么是mvvm

视图（View）：用户界面。（传送指令到 Controller）
控制器（Controller）：业务逻辑（完成业务逻辑后，要求 Model 改变状态）
模型（Model）：数据保存（将新的数据发送到 View，用户得到反）
MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。

2. 定义

前后端分离：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 => 模块化Vuex
 
2、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) 如果一个状态只在一个组件内使用，是可以不用 getters
 
4、vuex 的 mutation 特性是什么
 
action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态
 
action 可以包含任意异步操作
 
5、vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中
 
如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里
 
如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回
 
6、不用 vuex 会带来什么问题
 
可维护性会下降，你要修改数据，你得维护3个地方
 
可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的
 
增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背
复制代码

摘自桀呐！ 原文链接

响应式/兼容

1. 对响应式布局的看法

 响应式布局有缺点也有优点。

     优点：面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。

     缺点：兼容各种设备时所需工作量大、效率低下、代码累赘，会隐藏无用的元素，加载时间延长，
     其实这是一种折中性质的十设计解决方案，由于多方面元素影响而达不到最佳效果，
     在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

2. 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区别

1. 当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display)
2. v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；
3. v-show 则适用于需要非常频繁切换条件的场景。

为什么 v-for 和 v-if 不建议用在一起

当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费

虚拟DOM树

组件中的data为什么是一个函数

1. 一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。
2. 如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

事件 事件冒泡

性能优化

vue和小程序区别

null和undefined

1.null 表示一个值被定义了，定义为“空值”；undefined 表示根本不存在定义。
2.设置一个值为 null 是合理的；设置一个值为 null 是合理的。

Vue事件绑定原理是什么

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。

route 和router的区别

1. router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样
2. route相当于当前正在跳转的路由对象，可以从里面获取name,path,params,query等

父子传参的方式

1. 父向子传值props
2. 子向父传参 $emit $on

v-model 双向数据绑定原理

1. v-model是用来在表单控件或者组件上创建双向绑定的
2. 他的本质是v-bind和v-on的语法糖
3. 在一个组件上使用v-model，默认会为组件绑定名为value的prop和名为input的事件

cookies，sessionStorage和localStorage的区别？

1. 共同点：都是保存在浏览器端，且是同源的。
2. 区别：cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
   存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
   数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
   作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享.

详见
sessionstorage和localsotrage详解

git基本命令

1. git是什么:git是目前世界上最先进的分布式管理系统。
2. 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 [email protected]:wangjiax9/practice.git //关联远程仓库 
	6、 git push -u origin master //把本地库的所有内容推送到远程库上

原文摘自:一根倔强的头发

Git项目如何配置，如何上传至GitHub。描述其详细步骤

	1、 注册登录github
	2、 创建github仓库
	3、 安装git客户端
	4、 绑定用户信息
	5、 设置ssh key
	6、 创建本地项目以及仓库
	7、 关联github仓库
	8、 推送项目到github仓库

原文摘自:一根倔强的头发

UNIAPP

1. uniapp进行条件编译的两种方法？小程序端和H5的代表值是什么？

	通过 #ifdef、#ifndef 的方式
	H5 ： H5
	MP-WEIXIN ： 微信小程序

2. uniapp的配置文件、入口文件、主组件、页面管理部分

	pages.json	配置文件
	main.js		入口文件
	App.vue		主组件
	pages		页面管理部分

3. uniapp上传文件时用到的api是什么？格式是什么？

	uni.uploadFile({
   		url: '要上传的地址',
       		fileType:'image',
        		filePath:'图片路径',
        		name:'文件对应的key',
        		success: function(res){
			console.log(res)
		},
    })

4. uniapp获取地理位置的API是什么？

	uni.getLocation

5. 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份就是1rpx
	px	绝对单位，页面按精确像素展示
	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(任意精度整数)七类。