前端面试题(2020web前端经典面试题)

前端面试题

css
calc,support,media各自的含义及用法？
@support主要是用于检测浏览器是否支撑CSS的某个特点，其实就是条件判断，假如支撑某个特点，你能够写一套款式，假如不支撑某个特点，你也能够供给别的一套款式作为替补。
calc()函数用于动态计算长度值。calc()函数支撑”+”,”-“,”*”,”/”运算；
@media查询，你能够针对不同的媒体类型界说不同的款式。
css水平、笔直居中的写法，请至少写出4种？
这题考察的是css的基础知识是否全面，所以平常必定要注意多堆集
水平居中
行内元素:text-align:center
块级元素:margin:0auto
position:absolute+left:50%+transform:translateX(-50%)
display:flex+justify-content:center
笔直居中
设置line-height等于height
position：absolute+top:50%+transform:translateY(-50%)
display:flex+align-items:center
display:table+display:table-cell+vertical-align:middle;
1rem、1em、1vh、1px各自代表的含义？
rem
rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh
全称是ViewportWidth和ViewportHeight，视窗的宽度和高度，相当于屏幕宽度和高度的1%，不过，处理宽度的时候%单位更适宜，处理高度的话vh单位更好。
px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{1920*1024}等不同的分辨率
1920*1024前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
更多案例：https://zhuanlan.zhihu.com/p/84212558?from_voters_page=true

2020web前端经典面试题

问题：你对flex的了解？
解析：web应有不同设备尺和分辨率，这时需求响应式界设计来满复杂的规划需求，Flex弹性盒模型的优势在于开发员只是声明规划应该具有的为，不需求给出详细的完成式，阅读器担任完成实践规划，当规划触及到不定宽度，散布对的场景时，就要优先思索弹性盒规划
问题：解释下变量提升？
解析：JavaScript引擎的作式是，先解析代码，获取一切被声明的变量，然后再地运。这形成的结果，就是一切的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。
console.log(a)//undefined
vara=1
functionb()
{console.log(a
)
}
b()//1
上的代码实践执次第是这样的:
第步：引擎将vara=1拆解为vara=undefined和a=1，并将vara=undefined放到最顶端，a=1还在原来的位置
这样来代码就是这样:
vara=undefined
console.log(a)//undefined
a=1
functionb()
{console.log(a
)
}
b()//1
第步就是执，因而js引擎从上往下执就形成了当前的结果，这就叫变量提升。
问题：闭包是什么？
解析：MDN的解释：闭包是函数和声明该函数的词法环境的组合。
依照我的了解就是：闭包=『函数』和『函数体内可访问的变量总和』
举个简单的例:
(function(){
vara=1;
functionadd(){
varb=2
varsum=b+a
console.log(sum);//3
}
add()
})()
add函数自身，以及其内部可访问的变量，即a=1，这两个组合在起就被称为闭包，仅此已。
问题：闭包的作有哪些？
解析：闭包最的作就是躲藏变量，闭包的特性就是内部函数总是能够访问其所在的外部函数中声明的参数和变量，即便在其外部函数被返回（寿命终结）了之后
基于此特性，JavaScript能够完成私有变量、特权变量、贮存变量等
我们就以私有变量举例，私有变量的完成法很多，有靠商定的（变量名前加_）,有靠Proxy代理的，也有靠Symbol这种新数据类型的。
但是真正泛流的其实是使闭包。
function
Person(){var
name=’cxk’;
this.getName=
function(){returnname;
}
this.setName=
function(value){name=
value;
}
}
constcxk=newPerson()
console.log(cxk.getName())//cxk
cxk.setName(‘jntm’)
console.log(cxk.getName())//jntm
函数体内的varname=’cxk’只要getName和setName两个函数能够访问，外部法访问，相关于将变量私有化。