前端面试

英莱特Web全栈项目部月考测评
一、简答题（60分）
1、清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法（2分）
答：浮动的父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0)。
清除浮动的方法：
（1） clear:both就是在浮动元素下面添加一个元素给他添加这个属性即可,clear是闭合浮动是闭合left和right
如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。优点：通俗易懂，方便
缺点：添加无意义标签，语义化差
不建议使用
（2） 给浮动的父元素添加overflow:hidden
通过触发BFC方式，实现清除浮动
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
不推荐使用
（3） 使用after伪元素
代码：然后给父元素添加clearfix类选择器
.clearfix:after{/伪元素是行内元素 正常浏览器清除浮动方法/
content: “”;
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 号只有IE6-IE7执行，其他浏览器不执行/
}
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
推荐使用
（4） 使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
content: “”;
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}优点：代码更简洁
缺点：用zoom:1触发hasLayout.
推荐使用
2、position 和 display 的取值和各自的意思和用法（2分）
答：position是css中定位的，取值有四种
（1） static:默认值，元素出现在正常的文档流，不会受left、top、bottom的影响
（2） relative:相对定位，相对自身位置定位，可以设置left、top、bottom,并且它原来所占的空间不变，即不会影响其它元素布局，经常被用来作绝对元素的容器块
（3） absolute：绝对定位，相对于和它最近的定位元素定位除过static定位元素以外，若没有，则相对于html页面定位，用此定位，元素脱离了文档流，不占据文档空间；若设置absolute，但没有设置top和left等值，其位置不变 若设置absolute，会影响未定义宽度的块级元素，使其变为包裹元素内容的宽度。
（4） fixed:固定定位，相对于浏览器窗口定位，脱离文档流，不会随页面滚动而变化。
Display属性规定元素应该生成的框的类型值常见有
（1） block：块元素
（2） inline：行内元素
（3） inline-block：内敛元素
（4） none：不显示
（5） inherit继承上一个元素的display
3、css3动画效果属性，canvas、svg的区别，CSS3中新增伪类举例（2分）
答：css3动画效果属性：
（1） transition:过渡属性
（2） animation：动画，@keyframes 名字{}来定义动画的里面有from{}to{}还有百分比来定义动画
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画(infinite无线循环)
Canvas和SVG的不同：
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
是新出的html5标签
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
是xml标签，很早就已经有了
新增伪类选择器：p:first-of-type选择属于其父元素的首个

元素的每个

元素。
P:nth-child(n) 选择属于其父元素的第n个子元素的每个

元素。
4、px和em和rem的区别，CSS中link 和@import的区别是?（2分）
答：px实际上就是像素，用px设置字体大小时比较准确
em 是相对长度的单位，相对于当前对象内文本的字体尺寸1em=16px
rem相对于根元素需要给根元素设置一个参照值
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
5、prototype 是什么东西，原型链的理解，什么时候用 prototype（2分）
对象中都存在一个prototype属性，通过构造函数生成对象实例时，会将对象实例的原型指向构造函数的prototype属性。每一个构造函数都有一个prototype
属性。一般prototype中存在此对象的方法，且继承一般也是通过这个属性来继承的，原型链就是继承中父子关系之间，通过不断继承形成了一个原型链
，当你要访问对象的方法或者继承的值是可以通过构造函数.prototype来获取
6、函数里的this什么含义，什么情况下，怎么用（2分）
1、普通函数中的this：一个普通函数直接调用的时候，属于全局调用，这时候它的this是window全局的this
2、如果在严格模式的情况下执行纯粹的函数调用，那么这里的的 this 并不会指向全局，而是 undefined，这样的做法是为了消除 js 中一些不严谨的行为
3、构造函数中的this指的是当前对象而不是全局window
7、前后分离的思想了解吗?（2分）
答：了解一点点，前后端分离，两者分开互不影响，通过接口来进行前后端数据交互，两边有问题不会影响，各自完成各自的职责
8、说一下你对vue和vuex的使用方法，vue的组件复用机制（2分）
答：不会
9、var、let、const的区别（2分）
三个都是用来定义变量的但是三者有区别：
答：Var:是定义变量的，没有块级作用域，没有那么严格要求，不管是先定义还是先使用后定义都不会报错，因为他会变量提升，可以重复定义一个变量
Let：它增加了定义变量的一个就是增加了块级作用域，{}中的变量不会和外界污染，避免变量冲突，它严格，必须是先定义后使用，不可重复定义同一个变量
Const：定义常变量，也是先定义后使用并且定义必须给赋值，且后面不可更改
10、从输入URL到浏览器显示页面发生了什么?（2分）
答：（1）浏览器向DNS服务器请求解析该URL中的域名所对应的IP地址
（2）解析出IP地址后，根据该IP地址和默认端口80，和服务器建立TCP连接
（3）浏览器发出读取文件（URL中域名后面部分对应的文件HTTP请求，该请求报文作为TCP三次握手的第三个报文的数据发送给服务端）
（4）服务端对浏览器请求做出响应，并把对应的html文本发送给浏览器
(5)释放TCP连接
（6）浏览器将该html文本显示
11、JS遍历对象的方式有哪些?(2分)
for of、for in、object.keys(obj)返回一个数组遍历的是key
，Object.getOwnPropertyNames(obj)、Object.getOwn
PropertySymbols(obj)、Reflect.ownKesy(obj)
12、前端如何优化网站性能？(2分)

13、Vue的双向数据绑定原理是什么？(2分)
答：Observer 监听器：用来监听属性的变化通知订阅者
Watcher 订阅者：收到属性的变化，然后更新视图
Compile 解析器：解析指令，初始化模版，绑定订阅者
14、导航钩子有哪些？它们有哪些参数？(2分)
答：1、全局守卫： router.beforeEach
2、全局解析守卫： router.beforeResolve
3、全局后置钩子： router.afterEach
4、路由独享的守卫： beforeEnter
5、组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave
参数：to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来resolve这个钩子。执行效果依赖 next 方法的调用参数。

15、如何用Node监听80端口(2分)
答：node直接监听80会报错，解决：sudo node server.js
这时候你在终端可以看到要你输入Password， 输入完Mac电脑密码就成功了！
16、数字计算：请问在js中，输入表达式 0.1 + 0.2 的结果是什么（2分）
答：0.3
17、构造函数是什么？有什么样的作用（阐述）？（2分）
答：构造函数也时函数，但是用构造函数来定义一个对象的可以new一个实例化的对象，首字母大写，当你需要大批量的写对象的时候，就需要用到构造函数，它可以方便创建多个对象的实例，并且创建的对象可以被标识为特定的类型，可以通过继承扩展代码
18、ajax 跨域有哪些方法，jsonp 的原理是什么，如果页面编码和被请求的资源编码不一致如何处理?（3分）
答：JSONP方式解决跨域问题JSONP之所以能够用来解决跨域方案,主要是因为

19、做项目有没有遇到哪些印象深刻的技术攻关，具体遇到什么问题，怎么找答案的，最后怎么解的?（3分）
20、async、await 的使用场景是什么？（3分）
答：适用于异步处理的时候，例如ajax,定时器，事件等
1、 async（异步）和await（async wait）是用来处理异步的。即你需要异步如同同步一样执行（实现单线程），需要异步返回结果之后，再往下依据结果继续执行（但是前提是await后面跟的是promise对象—且Promise对象中有异步操作例如定时器返回的值用resolve返回）
2、await只能放在async函数内部使用
3、await 用于一个异步操作之前，表示要“等待”这个异步操作的返回值。

21、get和post的区别?（3分）
答：Get是前端的get请求后端数据，他的数据在url中，所以并不安全，get传送的数据量较少，因为url的限制
Post是post请求，对用户时不可见的，所以安全，post传送的数据量比较大，一般被默认不受限制
22、为什么要选vue？与其它框架对比的优势和劣势？(3分)
答：Vue.js 是一个用来构建网页界面的 JavaScript 库。同其它的一些工具结合在一起，它也可以成为一个新“框架”，它轻量级、易上手，易学习
很灵活，组件时Vue最强大的功能，组件可以扩展HTML元素，封装可重用代码
23、vue如何实现父子组件通信，以及非父子组件通信？(3分)
答：vue父子组件通讯的方法：
儿子获取父亲的数据：（1）通过props实现方法，通过1、给组件设置属性v-bind:数据新名字=”父亲新数据的名字”,2、子组件通过props接收这个数据，然后就可以使用.（2）还可以在子组件中通过this.$attrs.数据名字也可以获取，获取的是props没有接收的数据。（3）$emit和$on也可以实现父子通信（4）通过provide(父亲中注册数据)和reject（接收数据）也可以父组件接收子组件通过$emit(方法名字，参数)用v-on来注册
非父子组件可以通过$emit $on来实现，中央事件总线

24、请详细说下你对vue生命周期的理解？(4分)
答：创建期间的生命周期函数：1、beforeCreat对象和methods平级：实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性2、created：实例已将在内存中创建ok，此时data和methods已经创建ok，此时还没有开始编译模板3、beforeMount：其实已经完成模板的编译，但是还没有挂载到页面中4、mounted：此时已经将编译好的模板，挂载到页面指定的容器中显示
运行期间的生命周期函数
1、 beforeUpdate()当执行beforeUpdate的时候，页面中的显示的数还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
2、 updated当data数据被更新时候触发此函数
销毁期间的生命周期
----当执行beforeDestory钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段；
–当执行beforeDestory的时候，实例身上所有的data和所有的methods，一及过滤器、指令……都处于可用状态，此时，还没有真正执行销毁过程
destoryed：Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会接绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

25、对 MVC、MVVM的理解（4分）
MVC是后端设计模式Model(数据) View(视图) C是(colltral逻辑)
MVVM是前端设计模式 V（视图） VM(桥梁) M(前端数据)
二、算法题(20分)
1、冒泡排序（从大到小）相邻交换
function maopao(array)
{

			for(let i=0;i<array.length-1;i++)
			{
			
				for(let j=0;j<array.length-1;j++)
				{
					if(array[j]<array[j+1])
					{
						let change=array[j+1];
						array[j+1]=array[j];
						array[j]=change;
					}
				}
			}
			console.log(array)
		}
		let a=[1,90,1,32,6,7,87,12,34,12];
		maopao(a);
		console.log(a);

2、有一组数据： 1、1、2、3、5、8、13…(n),那么第30个位置的数字是多少?(用一种方式实现, 其他的方式写出思路即可)
function feiqie(n){
if(n1 || n2)
{
return 1;
}
return feiqie(n-1)+feiqie(n-2)
}
var a=feiqie(30)
console.log(a); //832040
三、机试题(20分)
1、使用nodejs实现用户信息数据的增删改查（要求如下）
（1）、自行设计数据库，用户表名为t_userinfo，表字段不少于8个
（2）、前台页面使用bootstrap框架设计
（3）、前端JS框架使用VUE框架