前端面试题总结

前端面试题总结

1. CSS中进行水平居中和垂直居中的方法，至少四种？

	水平居中:
		行内元素：text-align:center
		块级元素：margin:0 auto
		position:absolute + left:50% + transform:translateX(-50%)
		display:flex + justify-content:center
	垂直居中：
		设置line-height等于height
		posion:absolute + top:50% + transform:translateY(-50%)
		display:flex + align-item:center
		display:table-cell + vertical-align:middle

2. JS操作操作数组的变异方法和非变异方法有哪些？作用分别是什么？

	变异方法：操作的是原数组，不会产生新的数组
	push():在数组的结尾处添加一项新的元素，返回新数组的长度
	pop():从数组的结尾处删除一项新的元素，返回被删除的值
	shift():删除数组中的首个元素，返回被删除的值
	unshift():在数组的开头添加一个新的元素，返回新数组的长度
	splice():可以用来添加或删除指定位置的元素，返回被删除的值。
	第一个参数是需要操作位置的索引，第二个参数是需要删除元素的数量,后面的参数就是需要添加的元素
	soft():对原数组进行排序，返回排序后的数组，不会产生新的数组
	reverse():对原数组进行反转，返回反转后的数组，不会产生新的数组
	
	非变异方法：不会改变原数组，会产生新的数组
	slice():截取数组，返回一个截取的新数组。第一个参数是规定从何处开始选取（不是索引）不包含，
	第二个参数是规定从何处结束选取，包含
	concat():用于连接两个或多个数组,返回一个连接后的新数组。
	filter():用一个函数来筛选符合条件的元素，返回一个筛选后的新数组。参数是一个函数
	
	拓展：
	split():用于把一个字符串分割成字符串数组，返回一个分割后的新数组。
	第一个参数是分割的条件，可以是字符串或正则表达式
	第二个参数是指定返回的数组的最大长度
	join():用于把数组中的所有元素放入一个字符串,返回一个字符串
	第一个参数是指定要使用的分隔符

3. 1rem、1em、1vh \ 1vw 、1px所代表的含义？

	1rem:rem单位大小是由根元素(根元素=浏览器=html)的font-size所决定的。
	如果根元素的font-size:16px,那么1rem=16px
	如果根元素的font-size:32px,那么1rem=32px
	以此类推
	
	1em:em单位大小是由它的父元素的font-size决定的。
	如果父元素的font-size:16px,那么1em=16px
	如果父元素的font-size:32px,那么1em=32px
	以此类推

	1vw \ 1vw :vw单位一般是用来设置页面视口大小布局。
	1vw = 视窗宽度的1%
	1vh = 视窗高度的1%

	1px:绝对单位，页面按精确像素展示。

4. 怎么画一条0.5px的直线？

	考查的的CSS3的 transform
	height:1px;
	background-color:black;
	transform:scale(0.5)

5. 说一下盒子模型？

	盒子模型的组成，由里向外依次是content->padding->border->margin
	在IE盒子模型中，width指的是content+padding+border的宽度
	在W3C盒子模型中，width指的就是content的宽度
	box-sizing的使用：
	box-sizing:content-box (W3C盒子模型)
	box-sizing:border-box （IE盒子模型）
	box-sizing的默认值为content-box

6. 画一个三角形？

	div{
		width:0;
		height:0;
		border-width:100px;
		border-style:soild;
		border-color:transparent transparent red transparent;
	}

7.清除浮动的几种方式以及原理？

1.在需要被清除浮动的元素中添加clear:both
2.在浮动元素的父元素结尾处添加一个空白块级元素，CSS样式添加clear:both
3.在父元素中添加一个伪类:after CSS中添加
	content:'';
	height:0;
	display:block;
	clear:both;
这三种清除浮动的方式原理是一样的，即：
通过clear属性来控制元素周围是否允许浮动元素的存在
4.在父元素CSS中添加overflow属性，值除了visible以为的都行
或者display:inline-block
这种方式清除浮动的原理：通过overflow属性或者display:inline-block
创造出了一个BFC，BFC是就像一道屏障，隔离出了BFC内部和外部，内部和外部区域
的渲染相互之间不影响。BFC有自己的一套内部子元素渲染的规则，不影响外部渲染，
也不受外部渲染影响。

8.常用循环对象的方法？

1.使用Object.keys()遍历 
实例：
var obj = {'0':'a','1':'b','2':'c'};
Object.keys(obj).forEach(key => {
	console.log(key,obj[key]);
});

2.使用for..in..遍历
实例:
var obj = {'0':'a','1':'b','2':'c'};
for(var key in obj) {
	console.log(key ,":",obj[key]);
}

9.说一下label标签的作用？

扩大可点击范围，方便鼠标点击，增强用户操作体验

10.怎么遍历A节点的父节点下的所有子节点？

<script>
	var b = document.getElementById('a').parentNode.children
	console.log(b)
</script>

11.JS使用递归求1-100和？

<script>
	function sum(start,end) {
    	if (end === start){
        	return start
    	}else {
        	return sum(start,end-1)*end
    	}
	}
console.log(sum(1,100))
</script>

12.页面渲染html的过程？

1.浏览器解析html代码，构建Dom树
2.浏览器解析CSS代码，计算出最终样式，构建出CSSOM树
3.根据DOM树和CSSOM树构建出渲染树
4.渲染树一构建完成，浏览器就可以根据渲染树将页面绘制到屏幕上

13.说一下CORS?

CORS是一种新标准，既支持同源通信也支持跨域通信。像fetch就是实现CORS通信的

14.如何中断ajax请求？

1.设置超时时间，让它自动断开
2.调用ajax.abort()方法主动断开

15.什么是事件代理？

事件代理就是将事件绑定到目标元素的父元素上，利用冒泡机制触发该事件
var ul=document.getElementById('ul');
ul.addEventListener('click',function (e) {
    var target=e.target || e.srcElement;
    if (target && target.nodeName.toUpperCase() === 'LI'){
        console.log(target.innerHTML)
    }
})

16.target、currentTarget的区别？

target:指当前被点击的元素
currentTarget:指当前被绑定事件的元素

17.说一下宏任务和微任务？

宏任务：当前调用栈中执行的任务，比如主代码块、定时器等等。
微任务：当前宏任务执行完之后，在下一个宏任务执行前执行的任务称作微任务，
比如回调事件等等。
宏任务的事件放在回调队列中，由事件触发线程维护。
微任务的事件放在微任务队列中，由JS引擎线程维护。

18.JS实现继承的几种方式及优缺点？

1.原型链继承：将父类的实例作为子类的原型
	优点：可以实现继承原型属性和方法
	缺点：所有实例共享原型对象、创造子类实例时无法为父类构造函数传参
	
2.构造继承：调用call或apply方法，将父对象的构造函数绑定到子对象上
	优点：解决了所有实例共享原型对象的问题、创建子类实例时可以向父类传参
	缺点：只能继承实例属性和方法不能继承原型属性和方法、无法实现函数复用

3.组合继承：通过调用父类构造，继承父类的属性并保留传参的优点，
然后通过将父类实例作为子类的原型，实现函数复用
	优点：既可以继承实例属性和方法也可以继承原型属性和方法、函数可复用
	缺点：调用了两次父类构造函数，生成了两份实例

19.说一下闭包？

闭包的实质是函数嵌套而形成的作用域链
闭包的定义是函数A中有一个函数B，函数B可以访问到函数A的变量，那么函数B就是闭包

20.说一下export和export default的区别？

1.export default在一个模块内只能出现一次，而export能出现多次
2.export default只能直接输出，而export不仅能直接输出还能先定义在输出
3.使用上的区别：
	export xxx
	import {xxx} from './'
	
	export default xxx
	import xxx from './'
	对于export default而言，其本来输出只有一个接口所以import的时候不需要加{}

21.说一下自己常用的ES6的功能？

箭头函数、Promise、解构表达式、展开运算符等等

22.什么是会话Cookie、什么是持久Cookie?

Cookie是服务器返回的，指定了有效期的是持久Cookie，没有指定的是会话Cookie