第一次前端笔试+面试

第一次参加面试，超级紧张，大牛面试官坐在那里简直闪闪发光，对自己答得不充分的地方进行补充，告诉我哪些地方需要加强，深切的感受到一个程序员的魅力。把自己遇到的一些问题进行记录。

1. js的基本数据类型
   这道题面之前是准备过的，很多博客都写的是5+1 数字、字符、布尔、undefined、null +object，面试官问我还有没别的，当时一脸懵，他说es6新增了一种数据类型，还是不知道。。。es6新增了一种Symbol,Symbol集中的值可以由程序创建和并作为属性的键来使用，也不用担心名称冲突。

2. let和Var、const的区别
   var定义的函数作用域是整个封闭函数，是全域的，通过let定义的函数作用域是块级或者子块中。

（1）变量提升：浏览器作用域运行代码之前会进行预编译，首先解析函数声明、变量定义。无论var声明的变量处于当前作用域的第几行，都会提升到作用域头部。let声明的变量在作用域未初始化，let初始化在赋值时进行。

console.log(a);//undefined
var a = 2;

console.log(a);//reference error
let a = 2;

（2）只要作用域内存在let，它声明的变量就“绑定在这个区域内”不再受外部的影响。总之在代码区域内使用let命令声明变量之前，改变了是不可用的，及时代码块外有全局变量。

var temp =  3；
if(true){
	temp = 'abc';//reference error
	let temp;
}

(3) let不允许相同作用域内重复声明

function(){
	let a = 0;
	let a = 3;//报错
}
function(){
	let a = 0;
	var a = 0;//报错
}

暂时性死区：let和const命令声明之前，该变量或者常量是不可用的。

const: (1)所声明的变量旨在代码块内有效。（2）声明的变量不能在解析的时候提升。（3）不能声明已经声明过的常量或者变量。（4）声明的时候必须赋值。（5）声明的变量如果是简单的数据类型（如string number Boolean），不能改变，如果是对象引用不能改变，对象内容可以改变。

3. typeof能够返回几种数据类型

typeof(2);      //number
typeof('aa');    //string
typeof(symbol());    //symbol
typeof(function(){});      //function
typeof(null);      //object
typeof(undefined);        //undefined
typeof([]);      //object
typeof({});       //object
typeof(NaN);     //number
typeof(true);     //boolean

4. Vue的生命周期分几个阶段

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed
  具体可看： 详解vue生命周期

5. 浏览器渲染原理及流程：
   （1）浏览器会将HTML解析成DOM树，DOM树的构建是一个深度遍历；当前节点所有子节点都构造完成后才会去绘制节点的下一个兄弟节点。
   （2）CSS解析成CSS Rule Tree
   （3）根据DOM树和CSSOM来构造Rendering Tree，在Rendering Tree并不等同于DOM树，像display：none，空标签不会放在渲染树中。
   （4）layout计算出每个节点在屏幕中的位置。
   （5）绘制遍历render树，并使用UI后端绘制每个节点。
   5 双飞翼布局，即左右边距固定，中间内容自适应。

	<div class="main">
		<div class="mainin"></div>
	</div>
	<div class="left"></div>
	<div class="right"></div>
	<style type="text/css">
		.left,.main,.right{
			float:left;
			height: 200px;
		}
		.main{
			width: 100%;
			
			background-color: #444;
		}
		.right{
			width: 30%;
			margin-left:-30%;
			background-color: #666;
		}
		.left{
			width: 20%;
			margin-left:-100%;
			background-color: #999;
		}
		.mainin{
			margin:0 30% 0 20%;
		}
	</style>

利用负margin的形式。
首先.main宽度设置为100%，.left宽度设置为20%，.right宽度设置为30%，这三个div会显示成三行，将他们同时设置为float：left，然后.main会在第一行，.left,.right显示在第二行。将.left margin-left:-100%，.left现移动到屏幕最左侧，将.right margin-left：-30%，此时left、right分别遮挡左侧和右侧的mian，在main中添加mainin即可实现自适应。