迅闻网
让更多人看到你

前端面试题2022(前端基础面试题)

  前端面试题2022

CSS部分
什么是外边距堆叠?堆叠的成果是什么?
外边距堆叠便是margin-collapse。
在CSS当中,相邻的两个盒子(可能是兄弟联系也可能是先人联系)的外边距可以结组成一个单独的外边距。这种兼并外边距的方式被称为折叠,而且因此结组成的外边距称为折叠外边距。
折叠成果遵从下列核算规则:
两个相邻的外边距都是正数时,折叠成果是它们两者之间较大的值。
两个相邻的外边距都是负数时,折叠成果是两者绝对值的较大值。
两个外边距一正一负时,折叠成果是两者的相加的和。
rgba()和opacity的通明作用有什么不同?
两者都能实现通明的作用。
不同的是opacity作用于元素,以及元素内一切内容的通明度。
而rgba()只作用于元素的色彩或其背景色。(设置rgba通明的元素的子元素不会继承通明作用!)
display:none与visibility:hidden的差异是什么?
display:隐藏对应的元素但不挤占该元素原来的空间。
visibility:隐藏对应的元素而且挤占该元素原来的空间。
运用CSSdisplay:none特点后,HTML元素(目标)的宽度、高度等各种特点值都将“丢掉”;
而运用visibility:hidden特点后,HTML元素(目标)仅仅是在视觉上看不见(完全通明),而它所占据的空间方位仍然存在。
JS部分
对于应届生来说,不会考一些十分深邃的JS,更多的是注重根底部分,看看是否能够把握透彻根底知识。所以JS根底要求会比较高。
怎样增加、移除、移动、仿制、创建和查找节点
1)创建新节点
createElement()//创建一个具体的元素
createTextNode()//创建一个文本节点
2)增加、移除、替换、刺进
appendChild()//增加
removeChild()//移除
replaceChild()//替换
insertBefore()//刺进
3)查找
getElementsByTagName()//经过标签查找
getElementsByName()//经过元素Name特点查找
getElementById()//经过元素Id特点查找
querySelector()//匹配元素的CSS选择器(id,类,类型,特点,特点值等)
希望获取到页面中一切的checkbox怎么做?(不运用第三方结构)
letdomList=document.getElementsByTagName(‘input’)
letcheckBoxList=[]//一切checkbox
letlen=domList.length
while(len–){//while效率比for高
if(domList[len].type==’checkbox’){
checkBoxList.push(domList[len])
}
}
设置一个已知ID的DIV的html内容为xxxx,字体色彩设置为黑色
letdom=document.getElementById(‘ID’)
dom.innerHTML=’xxxx’
dom.style.color=’#000′
已有字符串foo=’get-element-by-id’,写一个function将其转换为驼峰表示法,即getElmentById
functionswitchToHump(str){
letarr=str.split(‘-‘)//[get,element,by,id]
for(leti=1;i<arr.length;i++){
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1)
}
str=arr.join(“”)
returnstr
}
略微分析一下这里面最难的那一串啥意思
arr[i].charAt(0).toUpperCase()意思便是获取该字符串第0个字符,并将其转换为大写
arr[i].substr(1,arr[i].length-1)意思便是提取从第1个字符开始到最后一个字符
将其用“+”来连接,就得到了驼峰字符串啦~
输出今天的日期,以YYYY-MM-DD的方式
我知道百度有,但是面试的时候可不会让你百度,这个东西会经常用到的,比方用户操作之后需要将操作时刻依照格局传给后端等等。假如这个都不会,那但是很糟糕的。
letd=newDate()
letyear=d.getFullYear()//是FullYear
letmonth=d.getMonth()+1//月份0代表1月所以+1
letday=d.getDate()//是Date不是day
//留意了,标题要求的是MM的格局,假如是1月要变成01月
month=month<10?’0’+month:month
day=day<10?’0’+day:day
alert(year+’-‘+month+’-‘+day)

前端

前端基础面试题

 

前端初级工程师面试中常见的问题有许多,下面总结一下常见的问题,先给问题,咱们思考一下再看答案。
1.常用的浏览器内核有哪些?
2.行内元素与块元素有什么差异?
3.清除起浮有哪些办法?
4.怎么了解JavaScript中的this?
5.原始类型与引证类型有什么差异?
6.怎么深度克隆一个目标?
7.数组去除重复元素有哪些办法?
8.同步与异步的差异?
9.get恳求与post恳求的差异?
10.跨域恳求有哪些计划?
下面只做简短的重点回答。
答案:
1.常用的浏览器内核有哪些?
答:
Trident内核:IE,MaxThon,TT,TheWorld,360,搜狗浏览器等。[又称MSHTML]
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核:Opera7及以上。[Opera内核原为:Presto,现为:Blink;]
Webkit内核:Safari,Chrome等。[Chrome的:Blink(WebKit的分支)]
2.行内元素与块元素有什么差异?
答:
行内元素会在一条直线上摆放(默许宽度只与内容有关),都是同一行的,水平方向摆放。块级元素各占有一行块级元素能够包含行内元素和块级元素。行内元素不能包含块级元素,只能包含文本或许其它行内元素。行内元素与块级元素特点的不同,主要是盒模型特点上:行内元素设置width无效,height无效(能够设置line-height),margin上下无效,padding上下无效
3.清除起浮有哪些办法?
答:
给父级元素设置宽高,或许给父元素设置overflow款式,不管是overflow:hidden或overflow:auto
.clear:after{content:”;display:block;clear:both}
4.怎么了解JavaScript中的this?
答:
this是JavaScript语言的一个关键字。
它是函数运行时,在函数体内主动生成的一个目标,只能在函数体内运用。
函数的不同运用场合,this有不同的值。总的来说,this便是函数运行时所在的环境目标。下面分四种状况,详细讨论this的用法。
作为目标的办法调用当函数作为目标的办法被调用时,this指向该目标
作为一般函数调用当函数作为一般函数被调用时,this指向全局目标(在浏览器的JavaScript里指向window)
结构器调用当函数作为结构函数被运用时,this指向回来的这个目标
call或apply调用
具体内容自己阐述。
5.原始类型与引证类型有什么差异?
答:
根本数据类型:
根本数据类型的值是不行变的根本数据类型不能够增加特点和办法根本数据类型的赋值是简略赋值。(假如从一个变量向另一个变量赋值根本类型的值,会在变量目标上创立一个新值,然后把该值复制到为新变量分配的方位上)
根本数据类型的比较是值的比较根本数据类型是存放在栈区的引证类型
引证类型的值是能够改动的引证类型能够增加特点和办法引证类型的赋值是目标引证(与根本数据类型的简略赋值不同,这个值的副本实际上是一个指针,而这个指针指向存储在堆内存的一个目标。那么赋值操作后,两个变量都保存了同一个目标地址,而这两个地址指向了同一个目标。因此,改动其中任何一个变量,都会互相影响)
引证类型的比较是引证的比较引证类型是一起保存在栈区和堆区中的
6.怎么深度克隆一个目标?
答:
克隆的概念:
浅度克隆:原始类型为值传递,目标类型仍为引证传递。
深度克隆:一切元素或特点均完全复制,与原目标完全脱离,也便是说一切对于新目标的修正都不会反映到原目标中。
functionclone(obj){if(!obj||typeof(obj)!=’object’)returnobj;varr=Array.prototype.splice===obj.splice?[]:{};for(variinobj){if(obj.hasOwnProperty(i)){r[i]=clone(obj[i]);}}returnr;}//数组、目标都能够forin,一起针对目标有必要需求判别hasOwnProperty特点,以防克隆原型链上的特点
7.数组去除重复元素有哪些办法?
答:
//办法1:Array.prototype.method1=function(){vararr=[];//界说一个暂时数组for(vari=0;i<this.length;i++){//循环遍历当时数组//判别当时数组下标为i的元素是否已经保存光暂时数组//假如已保存,则越过,不然将此元素保存光暂时数组中if(arr.indexOf(this[i])==-1){arr.push(this[i]);}}returnarr;}//办法2Array.prototype.method2=function(){varh={};//界说一个hash表vararr=[];//界说一个暂时数组for(vari=0;i<this.length;i++){//循环遍历当时数组//对元素进行判别,看是否已经存在表中,假如存在则越过,不然存入暂时数组if(!h[this[i]]){//存入hash表h[this[i]]=true;//把当时数组元素存入光暂时数组中arr.push(this[i]);}}returnarr;}//办法3Array.prototype.method3=function(){//直接界说成果数组vararr=[];for(vari=1;i<this.length;i++){//从数组第二项开始循环遍历此数组//对元素进行判别://假如数组当时元素在此数组中第一次呈现的方位不是i//那么咱们能够判别第i项元素是重复的,不然直接存入成果数组if(this.indexOf(this[i])==i){arr.push(this[i]);}}returnarr;}//办法4Array.prototype.method4=function(){//将数组进行排序this.sort();//界说成果数组vararr=[];for(vari=1;i<this.length;i++){//从数组第二项开始循环遍历数组//判别相邻两个元素是否持平,假如持平说明数据重复,不然将元素写入成果数组if(this[i]!==arr[arr.length-1]){arr.push(this[i]);}}returnarr;}//办法5constset=newSet([1,2,3,4,4]);console.log([…set]);//[1,2,3,4];//[…set]是一个扩展运算符,将一个数组转为用逗号分隔的参数列表。//办法6functiondedupe(array){returnArray.from(newSet(array));//这里的Array.from()办法是将两类目标转为真实的数组:类似数组的目标和可遍历的目标(包含es6新增的数据结构Set和Map)}
8.同步与异步的差异?
答:
同步:依照使命的顺序履行使命,前一个使命没有履行完毕,下一个使命不会履行,要等候上一个使命履行完毕.
异步:履行顺序是不确定的,由触发条件决议,什么时刻履行也是不确定的,异步处理能够一起履行多个。
长处:
//同步好处1、同步流程对成果处理一般更为简略,能够就近处理。2、同步流程对成果的处理始终和前文保持在一个上下文内。3、同步流程能够很简单捕获、处理异常。4、同步流程是最天然的操控进程顺序履行的办法。
//异步的好处1、异步流程能够当即给调用方回来初步的成果。2、异步流程能够延迟给调用方终究的成果数据,在此期间能够做更多额外的工作,例如成果记载等等。3、异步流程在履行的进程中,能够释放占用的线程等资源,防止堵塞,比及成果发生再从头获取线程处理。4、异步流程能够等多次调用的成果出来后,再统一回来一次成果调集,提高呼应效率。
运用场景:
//异步的运用场景:1、*不涉及共享资源,或对共享资源只读,即非互斥操作2、*没有时序上的严格联系3、不需求原子操作,或能够经过其他办法操控原子性4、*常用于IO操作等耗时操作,由于比较影响客户体验和运用性能5、*不影响主线程逻辑
//同步的运用场景:不运用异步的时候
总结:
同步的履行效率会比较低,耗费时刻,但有利于咱们对流程进行操控,防止许多不行掌控的意外状况;
异步的履行效率高,节省时刻,可是会占用更多的资源,也不利于咱们对进程进行操控
9.get恳求与post恳求的差异?
答:
FORM中的getpost办法差异Form中的get和post办法,在数据传输进程中分别对应了HTTP协议中的GET和POST办法。二者主要差异如下:
Get是用来从服务器上取得数据,而Post是用来向服务器上传递数据。Get将表单中数据的依照variable=value的方法,增加到action所指向的URL后面,并且两者运用“?”衔接,而各个变量之间运用“&”衔接;Post是将表单中的数据放在form的数据体中,依照变量和值相对应的办法,传递到action所指向URL。Get是不安全的,由于在传输进程,数据被放在恳求的URL中,而如今现有的许多服务器、署理服务器或许用户署理都会将恳求URL记载到日志文件中,然后放在某个地方,这样就可能会有一些隐私的信息被第三方看到。另外,用户也能够在浏览器上直接看到提交的数据,一些系统内部消息将会一同显现在用户面前。Post的一切操作对用户来说都是不行见的。Get传输的数据量小,这主要是由于受URL长度约束;而Post能够传输很多的数据,所以在上传文件只能运用Post(当然还有一个原因,将在后面的说到)。Get约束Form表单的数据集的值有必要为ASCII字符;而Post支持整个ISO10646字符集。Get是Form的默许办法。
10.跨域恳求有哪些计划?
答:
过滤器思路便是设置恳求头,具体代码能够网上查一下
注解办法在后台代码办法体上面增加@crossorigin
JSONP界说和用法:经过动态刺进一个script标签。浏览器对script的资源引证没有同源约束,一起资源加载到页面后会当即履行(没有堵塞的状况下)。
特点:经过动态创立script来读取他域的动态资源,获取的数据一般为JSON格式。
留意:只对get恳求有效
装备nginx实现location增加如下代码:
add_header’Access-Control-Allow-Origin’$http_origin;add_header’Access-Control-Allow-Credentials”true’;add_header’Access-Control-Allow-Methods”GET,POST,OPTIONS’;add_header’Access-Control-Allow-Headers”DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range’;add_header’Access-Control-Expose-Headers”Content-Length,Content-Range’;if($request_method=’OPTIONS’){add_header’Access-Control-Max-Age’1728000;add_header’Content-Type”text/plain;charset=utf-8′;add_header’Content-Length’0;return204;

未经允许不得转载:迅闻网 » 前端面试题2022(前端基础面试题)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

迅闻网-让更多人看到你

登录/注册返回首页