前端面试题汇总1、Promise有几种状态以及解决回调地狱 promise对象有三个状态：pending（进行中），fu

1、Promise有几种状态以及解决回调地狱

promise对象有三个状态：pending（进行中），fulfilled（已成功），rejected（已失败）

Promise对象的状态改变，只有两种可能：

从pending变为fulfilled* 此时应该执行 resolve();
从pending变为rejected。* 此时应该执行 reject();

promise在创建对象的时候,里面的代码会立即执行.

promise创建时，里面的代码还是异步无序操作
promise的原理是，利用then方法将异步操作的结果，按照顺序执行，catch方法用来接收处理失败时相应的数据

promise解决回调地狱原理 ： 在then方法中返回一个promise对象
//1.封装一个函数 ：  根据文件名生成  文件读取的promise
function getPromise(fileName) {
    let p = new Promise((resolve, reject) => {
        //读文件
        fs.readFile(`./data/${fileName}.txt`, 'utf-8', (err, data) => {
            if (err == null) {
                //成功
                resolve(data);
            } else {
                //失败
                reject(err);
            }
        });
    });
    return p;
};
 
//2.解决需求： 要先读a, 读完a后读b, 读完b后读c.
 
//开始读取a
getPromise('a').then((data)=>{
    console.log(data);
    //继续读取b
    return getPromise('b');
}).then((data)=>{
    console.log(data);
    //继续读取c
    return getPromise('c');
}).then((data)=>{
    console.log(data);
}).catch((err)=>{
    //以上三个异步操作，只要有任何一个出错，都会执行err
    console.log(err);
});

2、async/await

async语法如下

函数前面使用async修饰
函数内部，promise操作使用await修饰

async函数在遇到await后会立即返回Promise对象，继续执行async函数外部逻辑;
async函数内部会被await阻塞并按顺序执行代码逻辑,同步的方式。
可以使用try...catch或.catch对async函数进行异常处理。

3、对闭包的看法，为什么要用闭包(优缺点)

4、事件循环

遇到同步代码，依次推入同步队列并执行当遇到setTimeout、setInterval,会被推到宏任务队列如果遇到.then，会被当作微任务，被推入微任务队列同步队列执行完毕，然后会去微队列取任务，直到微队列清空。然后检查宏队列，去宏队列取任务，并且每一个宏任务执行完毕都会去微队列跑一遍，看看有没有新的微任务，有的话再把微任务清空。这样依次循环

宏：setTimeout, setInterval, DOM渲染, AJAX请求微:Promise、async/await nextTick 微任务比宏任务执行要早。宏任务里如果有宏任务，不会执行里面的那个宏任务，而是被丢进任务队列后面，所以会最后执行。同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。当指定的事情完成时，Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。上述过程会不断重复，也就是常说的Event Loop(事件循环)。

5、简单说下了解的设计模式以及相应的应用场景

发布订阅模式：
    场景：比如vue的事件总线 $on,$emit
观察者模式：
    场景：vue响应式的原理，依赖收集和触发更新
装饰者模式：
    定义：在不改变原对象的基础上，通过对其进行包装拓展（添加属性和方法）使原有对象更加满足用户的复杂需求。
    场景：比如高阶组件
工厂模式：
    定义：用工厂类选择要实例化的实体类，产出拥有相同功能的对象; 
    场景：渲染列表里的每一条item时，渲染函数可以封装为工厂函数
策略模式：
    场景：例如表单校验将校验规则封装成一个个策略函数，避免大量if，else，同时使校验策略可复用

6、Proxy 与 Object.defineProperty 优劣对比**

Proxy 的优势如下:

Proxy 可以直接监听对象而非属性；
Proxy 可以直接监听数组的变化；
Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写

7、vue路由的两种模式

1.hash模式特点:在url地址上有#号实现的原理:原生的hasChange事件来实现,来监听hash值的变化 window.onhaschange=function(){} 刷新页面的时候:不会去发送请求,页面不会有任何问题,不需要后端来配合

2.history模式特点:在url地址上没有#号,比较与hash模式看起来好看一些实现的原理:利用的是history的api 来实现的 popState() 来实现的刷新页面的时候:会去发送请求然后会导致页面出现找不到的情况,需要后端来配合解决