前端面试常见的问题（呕心沥血的总结）

1. JS的数据类型哪些?

1. 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
2. 引用数据类型：对象(Object)、数组(Array)、函数(Function)。
3. symbol()  唯一标识符.做标识
4. bigInt()    var num=100n
注：原始类型（Primitives）Null Undefined Boolean Number String Symbol  6种 （object不是）
约定：基本数据类型与原始数据类型等意。
	 Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

2. 变量的命名规则

 1.只能数字,字母,下划线_,$
 2.不能以数字开头
 3.不能是关键字保留字
 4.严格区分大小写
 5.语义化
 6.驼峰命名法

3.转换规则

其他类型转bool

1. 非空字符串,就是true
2. 非0数字 true,0则false
3. null和undefined 是fasle
4. 对象与数组 为true
5. NaN 为false

4. this的指向

1. 在对象的函数里,this指向当前对象
2. 事件里,this指向当前的事件挂载者
3. 函数里, this 指向window
4. 在箭头函数里,this指向上下文 环境变量
5. 定时器,延时器里this 始终是window

5.改变this指向的方式

 bind() 改变this指向
 call()
 aplly()
 new 

6.new操作符做什么?

 1.在构造函数内部,创建一个空对象
 2.空对象的__proto__ 指向该构造函数的prototype
 3. this指向空对象
 4. 将构造函数里的属性和方法挂载到this
 5. 隐式的返回this 

7.什么ajax,它的5个步骤

 1.与服务器进行通信的一种技术,它能够实现同步或异步的局部刷新

 2.ajax的5个步骤
 2.1 创建 ajax的核心对象 XMLHTTPRequest
 2.2  调用open方法,准备请求参数
 2.3  调用send方法,发送请求
 2.4  异步使用 onreadystatechange和readyState 的状态,去读数据
      同步直接判断status状态为200
 2.5  xhr.response响应回数据
 
 6个参数(url,type,data,async,success,dataType返回的数据类型)

8. get与post请求的区别?

 1. get比post块
 2. post比get安全
 3. get通过url地址传值,长度受限制
 4. post传输格式比较多,raw,xml,text,流
 5. get容易被缓存
 6. post传输的内容比较多,传输的大小由服务型控制

9. 什么cookie?

浏览器与服务器进行会话时,产生一种本地存储技术
1. 只能存储4k左右数据
2. 不安全,容易被伪造
3. 不能直接跨域, 需要跨域设置domian
4. 会随着请求携带到服务器上
5. 它只能存储字符串格式

6.属性 name,value,expires,domain,path,secure

10. cookie localStorage,sessionStorage 的区别? session和sessionStorage?

 cookie localStorage,sessionStorage
 
 相同点: 都是在浏览器的进行数据的存储
         都是只能存储字符串类型
 不同点: cookie 能携带到服务器,只能存4k
		 localStorage: 它能存储5M,它是真正的永久存储(不手动删除,永远存在),
 					   它不会被百度爬虫抓取
		 sessionStorage:会话级别,浏览器关闭,就存储的数据失效
		 cookie和sessionStorage都会依赖服务器
		 
session和sessionStorage

1.session存储于服务器，也就是后端那；而sessionStorage存储于本地，也就是你一按F12就能看到。
2.session主要的作用是维持会话状态的key，而sessionStorage则是存储会话期间的数据。（有些人经常认为是sessionStorage中存session，这个理解也对，也不对。可以说成是：浏览器的window对象中的sessionStorage中存贮着后台的session。）

11. 闭包?

函数嵌套函数,内部函数可以访问外部函数的变量和参数,变量和参数不会被垃圾回收机制,所回收
	优点: 避免全局污染
	缺点: 不会被释放,长期驻扎在内存中,容易造成内存溢出(因为闭包是在内存中的)
	使用场景: 封装一些高阶函数的时候能用到,例如 	柯里化 

	10 + 50
	10 + 20
	function fn(a,b){
		return a+b;
	}
	fn(10,50)
	fn(10,20)
	//柯里化 
	function fn(a){
			return function(b){
					retrun a+b;
			}
	}
	var f=fn(10);
	f(50) //10+50
	f(20) //10+20

垃圾回收机制：
	1.标记清除法：每个变量都会被添加上一个标记，在之后使用到这个变量的时候就把该标记清除，最后去掉带有标记即从未使用过的变量。
	2.引用计数法：引用计数策略相对而言不常用，因为弊端较多。其思路是对每个值记录它被引用的次数，通过最后对次数的判断(引用数为0)来决定是否保留，具体的规则有
	声明一个变量，赋予它一个引用值时，计数+1；
	同一个值被赋予另外一个变量时，引用+1；
	保存对该值引用的变量被其他值覆盖，引用-1；
	引用为0，回收内存；

12. 原型和原型链

原型 : 每一个函数都会自带一个属性 prototype,它的值是一个对象
好处: 让函数的属性和方法 共享,减少内存的开销
缺点: 属性共享,所有的内容是相同的,不建议把属性放到原型上
constructor:它是构造函数初始化的时候,去初始化构造函数的属性和方法
原型链: 每个实例对象上会存在一个 __proto__(指针),它指向了构造函数的原型,那么在使用实例对象属性的时候,会通过 __proto__(指针)去找构造函数的属性和方法,如果构造函数的属性和方法不存在,就会去原型上
那么这个查找的过程,就是原型链,
原型链的顶级是 null

13. ES5 新增了哪些特性?

 ES5 是对数组增强了
	 高阶函数
   	forEach,map,filter,some,every,reduce
	map:返回数组，返回的个数与原来数组的个数是相同的
	forEach:遍历，没有返回值
	filter:创建一个新数组，返回符合条件的所有元素
	some:返回某一个条件满足就返回true
	every:所有条件都满足某一个条件才返回true
	
	bind 属性 ,改变this的指向

14.es6有哪些新特性,你喜欢哪些特性? (重点的重点)

 String 增强什么?
 Array  增强了什么?
 Object 增强了什么?
 数据结构 加哪些?
 运算符 
 箭头函数,
 函数的默认参数
 数据类型
 class,extends
 
 变量声明：由var变为let和const
 模板字符串：使用反引号``，在模板字符串里面支持换行，并可以在里面使用${}来包裹一个变量或者表达式
 解构赋值：有数组解构和对象解构
 展开运算符：...
 箭头函数
 对象的简化赋值：对象赋值时如果属性名和变量名一致可以简写
 类的支持：ES6种添加了对类的支持，引入了class关键字
 函数的参数默认值

15.什么是回调函数

  把一个函数当前另外一个函数的参数,在另外一个函数内部,被执行和传递参数
	好处：
	1. 解决异步
	2. 对函数的功能扩展
    缺点：
	  容易造成回调地狱, 回调函数调用回调函数
	如何解决呢?
      使用promise,它是一个构造函数,它需要传入一个函数，函数里有成功和失败的回调函数
	 promise有3个状态
	 等待 pending
	 成功 resolve
	 失败 reject  
	 等待-->成功
	 等待-->失败  不可逆

	 原型方法
 	 then()
	 catch()
	 finally()

	 静态方法
	 all() 并发
	 rece() 谁先完成,取谁的结果
	 reoslve() 返回是一个promsie对象 所有成功的
	 reject()  返回是一个promsie对象所有失败的

 promsie能结束回调地狱,但是代码量有冗余,就结合ES7 async+await
 await后面必须接promise对象
 有await的地方,一定是一个 异步函数

16.面向对象

   面向对象,主角是对象,对象怎么来? 
	 创建对象的方式有哪些?
	 var obj=new Object()
	 var obj={};
	 声明一个对象张三和另一个对象李四
   构造函数来代替类, 
	 类: 将相同的属性和方法,提取成为 模板,就是类
	    类是抽象,类是模板
	 对象:    对象是类的实例 (new)

	面向对象三大特性
	继承
	    子类拥有父类的属性和方法
	     代码复用
			 灵活性
	封装   将相同的属性和方法,提取成为 模板,就是类
	       函数的封装 

	多态 继承
	    重写
			   子类重写父类的属性和方法
	    重载 
			   同一个类中,同名不同参,  js没有重载

16.设计模式 GoF

 设计模式
  前人做软件的时候,总结的一种方案

 单例模式
  每个人都是独一无二,拿你就是单例
		 var obj1={};
		类实现单例默认,静态方法中new实例
 工厂模式
 订阅者模式

17.解决跨域的方式有哪些?

1. nodejs使用CORS /后端设置  access-control-allow-origin
2. 使用非官方解决方法 JSONP
3. nginx proxy 服务器代理

18.JSONP和JSON的区别?

 JSONP是一种非官方跨域解决方案,它利用带有src属性的script,不受限制
 访问外部资源,并结合callback拿到数据
 1.它只能做get请求,算不上真正的ajax
 2.也只能做查询
 3.回调函数名称要与后端配置使用,一般叫做 callback或cb
 JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。
 将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义吧。


 JSON 是一种轻量级数据格式
 1.能跨平台进行网络传输
 2.能做配置文件

彻底弄懂jsonp原理及实现方法

19.对象的深拷贝和浅拷贝?

 浅拷贝除了第一层第地址不共享,第2层地址共享,就是浅拷贝
 深拷贝 是2个对象完全没有任何的共享,

 浅拷贝的方式有哪些?
	原生js Object.assign(), Array.concat()
	  jq	$.extend(false, obj1);
	 lodash _.clone(obj1);//浅拷贝

 深拷贝 
  原生js	JSON.parse(JSON.stringify(obj1)) 缺点,丢失方法
  自己封装一个,判断类型,创建新对象,再使用递归
  lodash	_.cloneDeep(obj1);//深拷贝
  jq $.extend(true, temp, obj1);

21.JavaScript RegExp(正则表达式)

JavaScript RegExp 对象有3个方法：test()、exec()、compile()

test()：检测一个字符串是否匹配某个正则表达式，如果匹配成功，返回true，否则返回false；
exec()：检索字符串中与正则表达式匹配的值，返回一个数组，存放匹配的结果；如果未找到，返回null；
compile():可以在脚本执行过程中编译正则表达式，也可以改变已有表达式。

22.reflow(回流)和repaint(重绘)

简要：整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。

什么是reflow和repaint

reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。

reflow：几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint：如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow

下面情况会导致reflow发生

1：改变窗口大小
2：改变文字大小
3：内容的改变，如用户在输入框中敲字
4：激活伪类，如:hover
5：操作class属性
6：脚本操作DOM
7：计算offsetWidth和offsetHeight
8：设置style属性

23.mouseover、mouseenter、mouseout、mouseleave

mouseenter、mouseleave不能冒泡
mosueover、mouseout能冒泡

24.什么是同源策略

它是js为了浏览器的数据安全，而推出的一种安全机制
如果两个url的协议，端口号和主机都相同的话那么这两个url同源

25.如何解决跨域

1.cors 在后端的请求头里，加上一句 Access-Control-Allow-Origin: 请求头
2.使用jsonp,他是一种非官方的解决跨域的方案
    利用一些带有src属性的标签(script,iframe)不受限制的去访问外部资源&