20道前端高频面试题（附答案）

ES6新特性

1.ES6引入来严格模式
    变量必须声明后在使用
    函数的参数不能有同名属性, 否则报错
    不能使用with语句 (说实话我基本没用过)
    不能对只读属性赋值, 否则报错
    不能使用前缀0表示八进制数,否则报错 (说实话我基本没用过)
    不能删除不可删除的数据, 否则报错
    不能删除变量delete prop, 会报错, 只能删除属性delete global[prop]
    eval不会在它的外层作用域引入变量
    eval和arguments不能被重新赋值
    arguments不会自动反映函数参数的变化
    不能使用arguments.caller (说实话我基本没用过)
    不能使用arguments.callee (说实话我基本没用过)
    禁止this指向全局对象
    不能使用fn.caller和fn.arguments获取函数调用的堆栈 (说实话我基本没用过)
    增加了保留字（比如protected、static和interface）

2.关于let和const新增的变量声明

3.变量的解构赋值

4.字符串的扩展
    includes()：返回布尔值，表示是否找到了参数字符串。
    startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
    endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
5.数值的扩展
    Number.isFinite()用来检查一个数值是否为有限的（finite）。
    Number.isNaN()用来检查一个值是否为NaN。
6.函数的扩展
    函数参数指定默认值
7.数组的扩展
    扩展运算符
8.对象的扩展
    对象的解构
9.新增symbol数据类型

10.Set 和 Map 数据结构 
    ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。

    Map它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
11.Proxy
    Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问
    都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
    Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
    Vue3.0使用了proxy
12.Promise
    Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
    特点是：
        对象的状态不受外界影响。
        一旦状态改变，就不会再变，任何时候都可以得到这个结果。
13.async 函数 
    async函数对 Generator 函数的区别：
    （1）内置执行器。
    Generator 函数的执行必须靠执行器，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。
    （2）更好的语义。
    async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
    （3）正常情况下，await命令后面是一个 Promise 对象。如果不是，会被转成一个立即resolve的 Promise 对象。
    （4）返回值是 Promise。
    async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。
14.Class 
    class跟let、const一样：不存在变量提升、不能重复声明...
    ES6 的class可以看作只是一个语法糖，它的绝大部分功能
    ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
15.Module
    ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
    import和export命令以及export和export default的区别

常见的HTTP请求方法

• GET: 向服务器获取数据；
• POST：将实体提交到指定的资源，通常会造成服务器资源的修改；
• PUT：上传文件，更新数据；
• DELETE：删除服务器上的对象；
• HEAD：获取报文首部，与GET相比，不返回报文主体部分；
• OPTIONS：询问支持的请求方法，用来跨域请求；
• CONNECT：要求在与代理服务器通信时建立隧道，使用隧道进行TCP通信；
• TRACE: 回显服务器收到的请求，主要⽤于测试或诊断。

介绍下 promise 的特性、优缺点，内部是如何实现的，动手实现 Promise

1）Promise基本特性

• 1、Promise有三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)
• 2、Promise对象接受一个回调函数作为参数, 该回调函数接受两个参数，分别是成功时的回调resolve和失败时的回调reject；另外resolve的参数除了正常值以外， 还可能是一个Promise对象的实例；reject的参数通常是一个Error对象的实例。
• 3、then方法返回一个新的Promise实例，并接收两个参数onResolved(fulfilled状态的回调)；onRejected(rejected状态的回调，该参数可选)
• 4、catch方法返回一个新的Promise实例
• 5、finally方法不管Promise状态如何都会执行，该方法的回调函数不接受任何参数
• 6、Promise.all()方法将多个多个Promise实例，包装成一个新的Promise实例，该方法接受一个由Promise对象组成的数组作为参数(Promise.all()方法的参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例)，注意参数中只要有一个实例触发catch方法，都会触发Promise.all()方法返回的新的实例的catch方法，如果参数中的某个实例本身调用了catch方法，将不会触发Promise.all()方法返回的新实例的catch方法
• 7、Promise.race()方法的参数与Promise.all方法一样，参数中的实例只要有一个率先改变状态就会将该实例的状态传给Promise.race()方法，并将返回值作为Promise.race()方法产生的Promise实例的返回值
• 8、Promise.resolve()将现有对象转为Promise对象，如果该方法的参数为一个Promise对象，Promise.resolve()将不做任何处理；如果参数thenable对象(即具有then方法)，Promise.resolve()将该对象转为Promise对象并立即执行then方法；如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为fulfilled，其参数将会作为then方法中onResolved回调函数的参数，如果Promise.resolve方法不带参数，会直接返回一个fulfilled状态的 Promise 对象。需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。
• 9、Promise.reject()同样返回一个新的Promise对象，状态为rejected，无论传入任何参数都将作为reject()的参数

2）Promise优点

• ①统一异步 API
  • Promise 的一个重要优点是它将逐渐被用作浏览器的异步 API ，统一现在各种各样的 API ，以及不兼容的模式和手法。
• ②Promise 与事件对比
  • 和事件相比较， Promise 更适合处理一次性的结果。在结果计算出来之前或之后注册回调函数都是可以的，都可以拿到正确的值。 Promise 的这个优点很自然。但是，不能使用 Promise 处理多次触发的事件。链式处理是 Promise 的又一优点，但是事件却不能这样链式处理。
• ③Promise 与回调对比
  • 解决了回调地狱的问题，将异步操作以同步操作的流程表达出来。
• ④Promise 带来的额外好处是包含了更好的错误处理方式（包含了异常处理），并且写起来很轻松（因为可以重用一些同步的工具，比如 Array.prototype.map() ）。

3）Promise缺点

• 1、无法取消Promise，一旦新建它就会立即执行，无法中途取消。
• 2、如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
• 3、当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
• 4、Promise 真正执行回调的时候，定义 Promise 那部分实际上已经走完了，所以 Promise 的报错堆栈上下文不太友好。

4）简单代码实现
最简单的Promise实现有7个主要属性, state(状态), value(成功返回值), reason(错误信息), resolve方法, reject方法, then方法

class Promise{
   
  constructor(executor) {
   
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    let resolve = value => {
   
      if (this.state === 'pending') {
   
        this.state = 'fulfilled';
        this.value = value;
      }
    };
    let reject = reason => {
   
      if (this.state === 'pending') {
   
        this.state = 'rejected';
        this.reason = reason;
      }
    };
    try {
   
      // 立即执行函数
      executor(resolve, reject);
    } catch (err) {
   
      reject(err);
    }
  }
  then(onFulfilled, onRejected) {
   
    if (this.state === 'fulfilled') {
   
      let x = onFulfilled(this.value);
    };
    if (this.state === 'rejected') {
   
      let x = onRejected(this.reason);
    };
  }
}

5）面试够用版

function myPromise(constructor){
    let self=this;
  self.status="pending" //定义状态改变前的初始状态 
  self.value=undefined;//定义状态为resolved的时候的状态 
  self.reason=undefined;//定义状态为rejected的时候的状态 
  function resolve(value){
   
    //两个==="pending"，保证了了状态的改变是不不可逆的 
    if(self.status==="pending"){
   
      self.value=value;
      self.status="resolved"; 
    }
  }
  function reject(reason){
   
     //两个==="pending"，保证了了状态的改变是不不可逆的
     if(self.status==="pending"){
   
        self.reason=reason;
        self.status="rejected"; 
      }
  }
  //捕获构造异常 
  try{
   
      constructor(resolve,reject);
  }catch(e){
   
    reject(e);
    } 
}
myPromise.prototype.then=function(onFullfilled,onRejected){
    
  let self=this;
  switch(self.status){
   
    case "resolved": onFullfilled(self.value); break;
    case "rejected": onRejected(self.reason); break;
    default: 
  }
}

// 测试
var p=new myPromise(function(resolve,reject){
   resolve(1)}); 
p.then(function(x){
   console.log(x)})
//输出1

6）大厂专供版

const