2018年前端面试题总结

总结一下这段时间遇到过的前端笔试面试题吧。包含360，头条，腾讯，CGTN等等。简单地按试题类型分一下。

首先是问答题：

1. 什么是标签语义化？

   使标签有自己的含义。语义化标签主要有以下几点好处：
   1.在没有CSS样式表时也可以展示出很好的页面结构。
   2.有利于SEO（搜索引擎优化）
   3.方便其他设备（阅读器等）按语义解析渲染页面。
   4.合理的语义化标签有利于代码的维护。

2. 在HTML中，i/em标签的区别？b/strong标签的区别？
   从样式上看，两组标签的样式分别是一样的。（i/em倾斜，b/strong）。从语义上看，em表示强调，strong表示更强程度的强调。而i/b并没有语义。仅仅是样式。

3. ==和===有什么区别？
   对于基础类型比较。==是值比较，当两个值类型不同时先会对类型进行隐式转换，在比较值是否相等。===会进行类型比较和值比较。比较过程不会进行隐式转换。效率上讲===的效率要高一点。
   

4. 如何判断一个Object是数组类型。
   使用constructor属性。返回创建此对象的构造函数。
   
   注意 比较时比较的不是字符串'Array'

5. cookie，localstorage,sessionStorage有什么区别？
   首先生命周期不同。cookie是可以设置生命周期的，如果不设置则默认关闭浏览器就结束。localstorage需要手动销毁。sessionstorage在关闭标签页后销毁。
   第二存储大小不同。cookie一般在4K左右。HTML5的本地存储要一般在5M左右（不同浏览器有区别）。
   第三cookie是建立在与服务器通信的基础上。而后两者不参与通信。

6. CSS3中的transfrom:translateZ(0)有什么作用？
   自己动画方面的实践比较少，本以为就是个Z轴偏移。回去一查才发现原来这么设置可以提升渲染效率。贴个博客地址吧，不班门弄斧了。css动画优化（GPU）

7. 行内元素，块级元素，空元素有什么区别？
   行内元素和块级元素的主要区别有 1：行尾结束时是否换行。2：块级元素可以通过width/height设置宽高。而行内元素不可以设置宽高。3：行内元素的margin只有水平方向有效。二者可以通过display属性进行转换。
   行内元素有：span、img、a、lable、input、abbr等；
   块级元素有：div、p、h1~h6、ul、header、section、aside、footer等；
   那么，一个问题来了。为什么img\input等标签是行内元素却可以设置宽高呢。因为这些标签同时也是置换元素，置换元素是可以设置宽高的。
   空元素是指没有内容的 HTML 元素被称为空元素。例如换行标签<br/>;

8. 哪些值会在转换时转换成false;

• 使用Boolean();转换函数时 0、-0、null、""、false、undefined 或 NaN会被转换成false,其余的为true.
• 如果使用“==”作比较时 0、-0、"" 会【等于】false

编程题

9. 逻辑符判断，以下输出结果

			console.log(1 || 2);
			console.log(0 || 2);
			console.log(0 || false);
			console.log(0 && 2);
			console.log(-1 && 2);
			console.log(-1 && false);

答案是：
总结来说就是
“||” 逻辑或前的结果如果是true 那么无论后面是true还是false统统显示前面的结果（后面被短路掉了）。如果逻辑或前是false,那么无论后面的是true还是false,都显示后面的结果。
“&&”逻辑与。如果逻辑与前面的结果是true,无论后面是true还是false,都显示后面的结果；如果逻辑与前面的结果是false,无论后面是true还是false,都显示前面的结果（同样短路）；

10. 以下代码会输出什么

						var a = "ssss";
						var test = {
							a: 3333,
							b() {
								var temp = this;
								console.log(this.a);
								console.log(temp.a);
								var a = 77777;
								(function() { //闭包相当于Windows对象调用
									console.log("内部闭包    " + this.a);
									console.log("temp临时变量    " + temp.a);
								})()
							}
						};
						test.b();

输出结果是：
this指向问题，如果最外层没有定义a变量，那么闭包内的this.a应该是undefined.
同样的还有这道：

var s = 24;
;(function(){
	var s = 10;
	function fn(a){
		console.log(this.s);
	}
	var obj = {
		s:9,
		metnod : function(fn){
			fn();
		}
	}
	obj.metnod(fn);
})();

输出结果是24，也就是window对象下的s的值。