es6高频面试题

1、es5和es6的区别，说一下你所知道的es6

ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性：

1. let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明
2. 箭头函数ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义
3. 模板字符串模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串
4. 解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
5. for of循环for...of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串
6. import、export导入导出ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用
7. set数据结构Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数
8. ... 展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量
9. async、await使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成
10. promisePromise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大
11. Proxy代理使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

2、 var、let、const之间的区别

- 	var声明变量可以重复声明，而let不可以重复声明
- 	var是不受限于块级的，而let是受限于块级 
- 	var会与window相映射（会挂一个属性），而let不与window相映射
- 	var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错
- 	const声明之后必须赋值，否则会报错
- 	const定义不可变的量，改变了就会报错
- 	const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错

3、介绍下 Set、Map的区别？

应用场景Set用于数据重组，Map用于数据储存Set：　
（1）成员不能重复
（2）只有键值没有键名，类似数组
（3）可以遍历，方法有add, delete,has
Map:
（1）本质上是健值对的集合，类似集合
（2）可以遍历，可以跟各种数据格式转换

4、setTimeout、Promise、Async/Await 的区别

事件循环中分为宏任务队列和微任务队列其中setTimeout的回调函数放到宏任务队列里，
等到执行栈清空以后执行promise.then里的回调函数会放到相应宏任务的微任务队列里，
等宏任务里面的同步代码执行完再执行async函数表示函数里面可能会有异步方法，
await后面跟一个表达式async方法执行时，遇到await会立即执行表达式，
然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行

5、 使用class 手写一个promise

//创建一个Promise的类
  class Promise{
    constructor(executer){//构造函数constructor里面是个执行器
      this.status = 'pending';//默认的状态 pending
      this.value = undefined//成功的值默认undefined
      this.reason = undefined//失败的值默认undefined
      //状态只有在pending时候才能改变
      let resolveFn = value =>{
        //判断只有等待时才能resolve成功
        if(this.status == pending){
          this.status = 'resolve';
          this.value = value;
        }
      }
      //判断只有等待时才能reject失败
      let rejectFn = reason =>{
        if(this.status == pending){
          this.status = 'reject';
          this.reason = reason;
        }
      }    
      try{
        //把resolve和reject两个函数传给执行器executer
        executer(resolve,reject);
      }catch(e){
        reject(e);//失败的话进catch
      }
    }
    then(onFufilled,onReject){
      //如果状态成功调用onFufilled
      if(this.status = 'resolve'){
        onFufilled(this.value);
      }
      //如果状态失败调用onReject
      if(this.status = 'reject'){
        onReject(this.reason);
      }
    }
  }

6、forEach、for in、for of三者区别

	- forEach更多的用来遍历数组
	- for in 一般常用来遍历对象或json
	- for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
	- for in循环出的是key，for of循环出的是value

7、说一下es6的导入导出模块

	// 只导入一个
	import {sum} from "./example.js"
	// 导入多个
	import {sum,multiply,time} from "./exportExample.js"
	// 导入一整个模块
	import * as example from "./exportExample.js"

8、普通函数 箭头函数的区别

	- 箭头函数没有原型 原型是undefined
	- 箭头函数this指向全局对象 而函数指向引用对象
	- call，apply，bind方法改变不了箭头函数的指向

9、JS为什么要区分微任务和宏任务

	（1）js是单线程的，但是分同步异步
	（2）微任务和宏任务皆为异步任务，它们都属于一个队列
	（3）宏任务一般是：script，setTimeout，setInterval、setImmediate
	（4）微任务：原生Promise
	（5）遇到微任务，先执行微任务，执行完后如果没有微任务，就执行下一个宏任务，如果有微任务，就按顺序一个一个执行微任务

10、常见的HTTP状态码

	2开头 （请求成功）表示成功处理了请求的状态代码。
	200   （成功）  服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
	201   （已创建）  请求成功并且服务器创建了新的资源。
	202   （已接受）  服务器已接受请求，但尚未处理。
	203   （非授权信息）  服务器已成功处理了请求，但返回的信息可能来自另一来源。
	204   （无内容）  服务器成功处理了请求，但没有返回任何内容。
	205   （重置内容） 服务器成功处理了请求，但没有返回任何内容。
	206   （部分内容）  服务器成功处理了部分 GET 请求。
	
	3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
	300   （多种选择）  针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
	301   （永久移动）  请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
	302   （临时移动）  服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
	303   （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
	304   （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
	305   （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
	307   （临时重定向）  服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
	
	4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
	400   （错误请求） 服务器不理解请求的语法。
	401   （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
	403   （禁止） 服务器拒绝请求。
	404   （未找到） 服务器找不到请求的网页。
	405   （方法禁用） 禁用请求中指定的方法。
	406   （不接受） 无法使用请求的内容特性响应请求的网页。
	407   （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
	408   （请求超时）  服务器等候请求时发生超时。
	409   （冲突）  服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
	410   （已删除）  如果请求的资源已永久删除，服务器就会返回此响应。
	411   （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
	412   （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
	413   （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
	414   （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
	415   （不支持的媒体类型） 请求的格式不受请求页面的支持。
	416   （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。
	417   （未满足期望值） 服务器未满足"期望"请求标头字段的要求。
	
	5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
	500   （服务器内部错误）  服务器遇到错误，无法完成请求。
	501   （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
	502   （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
	503   （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
	504   （网关超时）  服务器作为网关或代理，但是没有及时从上游服务器收到请求。
	505   （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

11、从输入url到显示页面，都经历了什么？

	1、首先，在浏览器地址栏中输入url。
	2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
	3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。
	4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）
	5、握手成功后，浏览器向服务器发送http请求，请求数据包。
	6、服务器处理收到的请求，将数据返回至浏览器。
	7、浏览器收到HTTP响应。
	8、读取页面内容，浏览器渲染，解析html源码。
	9、生成Dom树、解析css样式、js交互。
	10、客户端和服务器交互。
	11、ajax查询。

12、原型链和作用域链的区别

	（1）原型链
		当访问一个对象的某个属性时，会先在这个对象本身的属性上找，如果没有找到，会去这个属性的__proto__属性上找，即这个构造函数的prototype，如果还没找到，就会继续在__proto__上查找，
		直到最顶层，找不到即为undefined。这样一层一层往上找，彷佛是一条链子串起来，所以叫做原型链。
		
	（2）作用域链
		变量取值会到创建这个变量的函数的作用域中取值，如果找不到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。
		
	（3）区别
		作用域是对变量而言，原型链是对于对象的属性而言
		作用域链的顶层是window，原型链的顶层是Object

13、JS哪些操作会造成内存泄露

	内存泄漏是指一块被分配的内存既不能使用，也不能回收，直到浏览器进程结束。
	1、意外的全局变量
	2、闭包
	3、没有清理的dom元素
	dom元素赋值给变量，又通过removeChild移除dom元素。但是dom元素的引用还在内存中
	4、被遗忘的定时器或者回调

14、bind、call、apply的区别

	var a = {
	    user:"测试题",
	    fn: function(arg1, arg2) {
	        console.log(this.user)  // 测试题
	        console.log(arg1+ arg2) // 2
	    }
	}
	var b = a.fn
	
	1、bind
	var c = b.bind(a) // 返回一个已经切换this指向的新函数
	c(1,1)
	
	2、apply
	b.apply(a, [1, 1])  // 将b添加到a环境中
	第一个参数是this指向的新环境
	第二个参数是要传递给新环境的参数
	注意： 第一个参数为null时表示指向window
	
	3、call
	b.call(a, 1, 1) // 将b添加到a环境中
	第一个参数是this指向的新环境
	第二、三...个参数是传递给新环境的参数
	注意： 第一个参数为null时表示指向window
	
	小结： bind方法可以让函数想什么时候调用就什么时候调用。apply、call方法只是临时改变了this指向

15、说说你对AMD和Commonjs的理解

	两者都是为了实现模块化编程而出现的
	（1）commonjs
	通常被应用于服务器，在服务器端，模块的加载和执行都在本地完成，因此，CommonJS并不要求模块加载的异步化。
	核心思想：
	一个单独文件就是一个模块，通过require方法来同步加载要依赖的模块，然后通过extports或则module.exports来导出需要暴露的接口。
	（2）AMD
	可以实现异步加载依赖模块，预加载，在并行加载js文件同时，还会解析执行该模块。虽然可以并行加载，异步处理，但是加载顺序不一定
	（3）CMD
	懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。

法来同步加载要依赖的模块，然后通过extports或则module.exports来导出需要暴露的接口。
（2）AMD
可以实现异步加载依赖模块，预加载，在并行加载js文件同时，还会解析执行该模块。虽然可以并行加载，异步处理，但是加载顺序不一定
（3）CMD
懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。

[外链图片转存中…(img-R6qeP4G3-1641304833998)]