2019前端面试总结

1. 什么是dom树？
   1. 个人理解：因为dom结构就像大树一样分支，有树根（根节点），树枝（head，body），树叶（各种标签）  
2. 什么是虚拟dom？
   1. 虚拟dom是js对象。
   2. 首先为什么要用虚拟dom。例如react中数据发生变化时，如果全部创建dom，再全部重新渲染的话，这样非常消耗性能（主要在俩个方面：1.创建的时候消耗性能。2.替换的时候消耗）
   3. 虚拟dom就被提出来了。第一次创建的时候，都一样没什么区别，但是虚拟dom创建也保存了下来。第二次的时候，正常是创建替换，但是虚拟dom的话，在js中创建元素对象，跟第一次的元素对象进行比较，然后替换。（这里就会问了，都是创建替换，有什么不一样吗？不一样的是一个在js中创建替换，一个在dom中创建替换，网页上的操作是非常耗性能的，而js就不会。）
3. 事件委托
   1. 事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
4. 什么是闭包
   1. 闭包可以简单理解成“定义在一个函数内部的函数“。（闭包是这样一种机制: 函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制所收回。）
   2. 在本质上，闭包是将函数内部和函数外部连接起来的桥梁。（就是内部调用外部的变量）
      1. 希望一个变量长期驻存在内存中。 2.避免全局变量的污染。3.私有化成员
   3. 一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。
   4. 优点也是缺点，（1）.会造成内存泄漏。（2）闭包会在父函数外部，改变父函数内部变量的值。
   5. 应用在哪里？    
      1. 模块化代码  
      2. 在循环中直接找到对应元素的索引。 
      3. for循环中有延时操作但是又需要使用下标的情况。
5. This的理解？答：this其实是js的一个对象，至于是什么对象呢？很简单，this这个对象就是：谁调用它它就指向谁。
6. New的理解？
   1. 创建一个空对象
   2. 将这个空对象的__proto__成员指向了所需函数对象prototype成员对象
   3. 将所需函数对象的this指针替换成obj
7. apply，bind，call的区别？(彻底明白call)
   1. apply和call都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部this的指向）
   2. 如果使用apply或call方法，那么this指向他们的第一个参数，apply的第二个参数是一个参数数组，call的第二个及其以后的参数都是数组里面的元素
   3. 也是改变函数体内this的指向;
   4. bind会创建一个新函数，称为绑定函数，当调用这个函数的时候，绑定函数会以创建它时传入bind（）方法的第一个参数作为this，传入bind（）方法的第二个及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数
   5. bind与apply、call最大的区别就是：bind不会立即调用，其他两个会立即调用
8. 请将代码执行起来

const a = [1, 2, 3, 4, 5];
//	Array.prototype.multiply = function (){
//		let val = this.map(x => x*x)
//		this.push(...val)
//	}
	a.multiply()
	console.log(a)

 

1. JS判断数组或者一个字符串中出现次数最多的元素及其出现的次数

var arr = [1,2,2,3,2,1,2];
	var obj = {};
	for(var i = 0;i<arr.length;i++){
		var key = arr[i]
		if(obj[key]){
			obj[key]++;
		}else{
			obj[key] = 1;
		}
	}
	var num = 0;
	var max = 0;
	for(var n in obj){
		console.log(n)
		if(max < obj[key]){
			max = obj[key];
			num = key;
		}
	}
	console.log(num,max)

1. bootstrap的原理？
   1. 网格系统的实现原理，是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统
2. bootstrap3和4的区别？
   1. 3是px为单位，4是使用rem和em为单位（除部分margin和padding使用px）
   2. 3是使用float的布局方式，4是偏移列通过offset-类设置
   3. 3是使用push和pull向左右移动，4是选择弹性盒模型（flexbox）
   4. 栅格类增加
3. 关于event loop（事件循环机制）
   1. 简单说，就是在程序中设置两个线程：一个负责程序本身的运行，称为"主线程"；另一个负责主线程与其他进程（主要是各种I/O操作）的通信，被称为"Event Loop线程"（可以译为"消息线程"）。

   2. 同一次事件循环中，微任务永远在宏任务之前执行

      1. 以下事件属于宏任务：

         1. setInterval()
         2. setTimeout()

      2. 以下事件属于微任务

         1. new Promise()
         2. new MutaionObserver()
4. Sass和less的区别？
   1. 编译环境不一样。Sass需要ruby环境，是在服务端处理的。而less是基本JavaScript的客户端处理。
   2. 变量赋不一样，less是@，而Scss是$,而且变量的作用域也不一样。
   3. sass支持条件语句，而less不支持。
5. 水平垂直居中五种方式
6. vue框架的优缺点
   1. 优点
      1. 轻量级的框架
      2. 数据双向绑定
   2. 缺点
      1. 不能按需加载
7. promise详解
   1. 状态的变化
      1. 初始状态为pending，既不是成功也不是失败
      2. fulfilled意味着操作成功
      3. rejected意味着操作失败
   2. 使用案例
8. 怎么图片是否加载完成？（原生使用，onload方法回调）
9. 深浅拷贝的区别，写一个万能拷贝的函数。
10. px,em,rem的区别
11. es5和es6有什么区别，常用的es6又有哪些。