欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端面试总结——函括80%常见题目(下)

程序员文章站 2022-04-18 21:55:38
...

一、 引言

配合前面的面试总结一起观看更佳,传送门:前端面试总结——函括80%常见题目(上)

二、CSS部分

(1)什么是盒子模型?

盒子模型分为两种:IE盒子W3C盒子

  • W3C盒子包含了Content部分、padding部分、border部分、margin部分;
  • IE盒子则是把content、padding、border统一为Content部分。

(2)什么是BFC,它有什么作用?

BFC全称块级格式化上下文,它相当于页面上一个渲染区域,他规定了内部元素如何定位以及外部元素与该区域的相互作用关系。

它主要有以下特征:

  • a、内部浮动闭合;
  • b、不受外部浮动覆盖;
  • c、内部相邻子元素的垂直方向margin有重叠

(3)如何创建BFC?

  • a、根元素;
  • b、浮动;
  • c、绝对定位;
  • d、display为table-cell、table-caption、inline-block中任意一个

(4)如何清除浮动?

  • a、给父级添加overflow:hidden 清除浮动方法;
  • b、万能清除法 after伪类 清浮动(现在主流方法,推荐使用):
.float_div:after{
			content:".";
			clear:both;
			display:block;
			height:0;
			overflow:hidden;
			visibility:hidden;
		}
		.float_div{
			zoom:1
		}

(5)CSS选择器权重规则是什么?

  • a、!important的权重最高;
  • b、内联的style设置样式权重比例+1000;
  • c、id选择器+100;
  • d、类选择器+10;
  • e、标签选择器+1

(6)CSS3新特性有哪些?

  • a、新增了选择器;
  • b、新增了阴影功能;
  • c、新增了线性渐变;
  • d、新增了旋转;
  • e、新增了圆角

(7)CSS3动画(简单动画的实现,如旋转等)

  • a、依靠CSS3中提出的三个属性:transitiontransformanimation
  • b、transition:定义了元素在变化过程中是怎么样的,包含transition-property、transition-duration、transition-timing-function、transition-delay。
  • c、transform:定义元素的变化结果,包含rotatescaleskewtranslate
  • d、animation:动画定义了动作的每一帧(@keyframes)有什么效果,包括:
    • animation-name 动画名称
    • animation-duration、动画时长
    • animation-timing-function、 动画过度类型
    • animation-delay、 动画延迟
    • animation-iteration-count、 动画次数
    • animation-direction 动画方向

(8)如何进行响应式样式编写?

@media screen and (max-width:960px){
			.logo{
				color:red
			}
		}

当设备屏幕尺寸小于960px时,执行以上样式

二、JS部分

(1)什么是闭包?

利用函数嵌套的办法,把内部变量返回到外部作用域*外部访问。本质上是利用函数来保存变量。

(2)什么是作用域链?

作用域是规定当前函数或变量可以访问的范围,而作用域当中规定只有内部能访问外部,而外部无法访问内部,从内部沿着外部一层层的作用域进行访问的链式范围叫作用域链

(3)什么是原型?什么是原型链?

  • a、每个对象都会在其内部初始化一个属性,就是prototype(原型)
  • b、当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,于是就这样一直找下去,也就是我们平时所说的原型链的概念;

(4)JS的DOM事件模型是什么?

事件捕获事件目标触发事件事件冒泡

(5)什么是DOM事件流?

当一个元素触发事件时,该事件从根节点开始通过捕获到达目标节点,然后再通过冒泡传递到window对象的过程,成为DOM事件流

(6)如何阻止冒泡和默认行为?

//阻止冒泡:
			//W3C中:
				e.stopPropagation()
			//IE:
				cancelBubble = true
			
//阻止默认行为:
			//W3C:
				e.preventDefault()
			//IE:
				window.event.returnValue = false

(7)this对象有什么特点?

this始终指向它的直接调用者,如果有new关键字,则指向new出来的那个对象,另外,在setTimeout等异步事件中,始终指向全局window对象

(8)new构造函数的过程中发生了什么?

  • a、生成一个空对象;
  • b、将空对象的_proto_指向构造函数的prototype;
  • c、执行构造函数,并且this上下文指向该空对象;
  • d、如果构造函数返回了一个对象,那么就放弃空对象,否则,就返回前面创建的空对象

(9)call()和apply()的区别?

两者都是用于类的继承,第一个参数都是传入this的指向对象,关键在于后面的参数:

  • apply:接收一个数组或类数组;
  • call:传入单个参数,并且这些参数会依次传入父类中执行

(10)Ajax的原理是什么?

原理简单来说,就是在用户和服务器之间架设了一个中间层(ajax引擎),通过XMLHttpRequest对象,向服务器异步发送请求,从服务器中获取数据,然后利用JS操作DOM完成页面操作。
原生AJax:

var xhr = new XMLHttpRequest();
		xhr.open('get',url,true);
		xhr.send(null);
		xhr.onreadystatechange=function(){
			if(xhr.readyState == 4){
				if(xhr.statu == 200){
					console.log(''成功)
					}eles{
					console.log('失败')
					}
				}
			}
			

(11)Ajax中的状态值(readyState)含义:

  • 0 - (未初始化)还没有调用send()方法;
  • 1 - (载入)已调用send()方法,正在发送请求;
  • 2 - (载入完成)send()方法执行完成;
  • 3 - (交互)正在解析响应内容;
  • 4 - (完成)响应内容解析完成,可以在客户端调用了

(12)常用的字符串和数组操作方法有哪些?

数组:

			arr.length //获取数组长度
			arr.push(x1,x2,...) //将参数添加到arr数组尾部,返回它更新后的长度
			arr.unshift(x1,x2...) //与上面作用一样,但添加的位置是arr数组头部
			arr.pop() //删除数组中最后一个元素
			arr.shift() //删除数组中第一个元素
			arr.join('x') //以参数作为分隔符,把数组中的各项连接起来变成字符串返回
			arr.sort() //对数组内元素排序,一般需要传入一个函数如升序:function(a,b){return a-b}
			arr.concat(arr2,arr3) //把多个数组合并
			arr.slice(start,end) //从start索引到end之间的范围内所有元素截取出来
			arr.splice(index,count) //从index处删除count个元素,如果在count之后继续传参,那么将在删除后把这些参数插入到数组中
			arr.indexOf(value,index) //从index开始搜索有没有vaule,存在则返回,没有则返回-1。其中index非必要传递

字符串:

			str.charAt(index) //返回在字符串中index索引代表的字符
			str.charCode(index) //返回指定字符的编码
			str.substring()\str.slice() //用法和作用跟数组一样
			str.substr(start,len) //从start位置开始截取len长度的字符串
			str.split('-') //把一个字符串分割成字符串数组,参数是该字符串中存在的某字符,以此为分割
			str.replace()//将字符串中的一些字符用另一些字符替换
相关标签: 前端面试 前端