看这篇就够了，帮你解决大厂前端面试，2023最新前端八股文！-优快云博客

本文链接：https://blog.youkuaiyun.com/Cipher_Y/article/details/134182769

前言

相信很多的小伙伴都还在经历春招、秋招找工作的痛苦之中，那么小编也曾是万千应届求职者之一，也曾经历一天多轮笔面试 ，还要下楼做核酸的痛苦之中。小编满怀着对年轻人的殷切期望，希望通过这篇文章为前端求职的同学提供一定的帮助

看到小编投递的简历就能发现，我的投递直到10月23日才停止，很多面试也是在10月23日之后才正式开始的，尤其是一些银行、国企单位，所以暂时还没拿到offer的小伙伴们耐心等待，耐心准备面试、笔试，你的好消息总会在春暖花开的日子到来

（附上我当时投递的公司列表）

三、如何准备面试回答？

小编将自己的经验总结成了以下这些点

3.1 回答要有逻辑与递进

例如：面试官问你：什么是Promise，说说你的理解？

错误案例： 想到Promise的啥特性就说啥，随心所欲

正确回答： 三步走策略（是什么、为什么、怎么做）

Promise是什么： 就说一说Promise是目前的异步解决方案，一开始是社区方案，ES6新增了Promise.......（主要是说Promise的前世今生，为的是凸显你的知识范围比较广泛，会关注技术的背景）

为什么要用Promise： 就说一说，Promise能够解决异步回调地狱。把回调地狱的问题简单说一下。然后开始阐述Promise是怎么解决回调地狱，这里你就需要认真研究Promise实现的原理，最好是看过Promise的demo源码。

Promise怎么用： 你就开始阐述resolve、reject、all、race等方法，小编建议这里，你一定要了解过Promise的demo源码，你就和面试官说resolve、reject方法的实现，一定记得从代码的角度说（要知道一个能认真研究某个新特性demo源码的同学的水平，对于面试官来说，一定是对你刮目相看）

案例分析：

这是我当时准备的Promise的问题，都是基于我认真看过它的demo源码总结出来的
这是我整理的demo源码

// 模拟实现Promise
// Promise利用三大手段解决回调地狱：
// 1. 回调函数延迟绑定
// 2. 返回值穿透
// 3. 错误冒泡

// 定义三种状态
const PENDING = 'PENDING';      // 进行中
const FULFILLED = 'FULFILLED';  // 已成功
const REJECTED = 'REJECTED';    // 已失败

class Promise {
  constructor(exector) {
    // 初始化状态
    this.status = PENDING;
    // 将成功、失败结果放在this上，便于then、catch访问
    this.value = undefined;
    this.reason = undefined;
    // 成功态回调函数队列
    this.onFulfilledCallbacks = [];
    // 失败态回调函数队列
    this.onRejectedCallbacks = [];

    const resolve = value => {
      // 只有进行中状态才能更改状态
      if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value = value;
        // 成功态函数依次执行
        this.onFulfilledCallbacks.forEach(fn => fn(this.value));
      }
    }
    const reject = reason => {
      // 只有进行中状态才能更改状态
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.reason = reason;
        // 失败态函数依次执行
        this.onRejectedCallbacks.forEach(fn => fn(this.reason))
      }
    }
    try {
      // 立即执行executor
      // 把内部的resolve和reject传入executor，用户可调用resolve和reject
      exector(resolve, reject);
    } catch(e) {
      // executor执行出错，将错误内容reject抛出去
      reject(e);
    }
  }
  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function'? onRejected :
      reason => { throw new Error(reason instanceof Error ? reason.message : reason) }
    // 保存this
    const self = this;
    return new Promise((resolve, reject) => {
      if (self.status === PENDING) {
        self.onFulfilledCallbacks.push(() => {
          // try捕获错误
          try {
            // 模拟微任务
            setTimeout(() => {
              const result = onFulfilled(self.value);
              // 分两种情况：
              // 1. 回调函数返回值是Promise，执行then操作
              // 2. 如果不是Promise，调用新Promise的resolve函数
              result instanceof Promise ? result.then(resolve, reject) : resolve(result);
            })
          } catch(e) {
            reject(e);
          }
        });
        self.onRejectedCallbacks.push(() => {
          // 以下同理
          try {
            setTimeout(() => {
              const result = onRejected(self.reason);
              // 不同点：此时是reject
              result instanceof Promise ? result.then(resolve, reject) : resolve(result);
            })
          } catch(e) {
            reject(e);
          }
        })
      } else if (self.status === FULFILLED) {
        try {
          setTimeout(() => {
            const result = onFulfilled(self.value);
            result instanceof Promise ? result.then(resolve, reject) : resolve(result);
          });
        } catch(e) {
          reject(e);
        }
      } else if (self.status === REJECTED) {
        try {
          setTimeout(() => {
            const result = onRejected(self.reason);
            result instanceof Promise ? result.then(resolve, reject) : resolve(result);
          })
        } catch(e) {
          reject(e);
        }
      }
    });
  }
  catch(onRejected) {
    return this.then(null, onRejected);
  }
  static resolve(value) {
    if (value instanceof Promise) {
      // 如果是Promise实例，直接返回
      return value;
    } else {
      // 如果不是Promise实例，返回一个新的Promise对象，状态为FULFILLED
      return new Promise((resolve, reject) => resolve(value));
    }
  }
  static reject(reason) {
    return new Promise((resolve, reject) => {
      reject(reason);
    })
  }
  static all(promiseArr) {
    const len = promiseArr.length;
    const values = new Array(len);
    // 记录已经成功执行的promise个数
    let count = 0;
    return new Promise((resolve, reject) => {
      for (let i = 0; i < len; i++) {
        // Promise.resolve()处理，确保每一个都是promise实例
        Promise.resolve(promiseArr[i]).then(
          val => {
            values[i] = val;
            count++;
            // 如果全部执行完，返回promise的状态就可以改变了
            if (count === len) resolve(values);
          },
          err => reject(err),
        );
      }
    })
  }
  static race(promiseArr) {
    return new Promise((resolve, reject) => {
      promiseArr.forEach(p => {
        Promise.resolve(p).then(
          val => resolve(val),
          err => reject(err),
        )
      })
    })
  }
}

案例二：