0321美团实习面试——技能大致内容

专业技能

1.掌握盒⼦模型，Flex响应式布局和BFC等问题

盒⼦模型

Flex布局

媒体查询

结合Handleresize.ts监听设备

BFC

2.掌握原型链，异步，事件循环和闭包等问题

原型链

异步

class Promise {
   
  static resolve(value) {
   
    if (value instanceof Promise) {
   
      return value;
    }
    return new Promise((resolve) => {
   
      resolve(value);
    });
  }

  static reject(reason) {
   
    return new Promise((_, reject) => {
   
      reject(reason);
    });
  }

  static race(promises) {
   
    return new Promise((resolve, reject) => {
   
      promises.forEach((promise) => {
   
        Promise.resolve(promise).then(resolve, reject);
      });
    });
  }

  static all(promises) {
   
    return new Promise((resolve, reject) => {
   
      const results = [];
      let completedCount = 0;

      if (promises.length === 0) {
   
        resolve(results);
        return;
      }

      promises.forEach((promise, index) => {
   
        Promise.resolve(promise).then(
          (value) => {
   
            results[index] = value;
            completedCount++;
            if (completedCount === promises.length) {
   
              resolve(results);
            }
          },
          (reason) => {
   
            reject(reason);
          }
        );
      });
    });
  }

  constructor(executor) {
   
    // 状态
    this.status = "pending";
    // 成功结果
    this.value = undefined;
    // 失败原因
    this.reason = undefined;
    // 成功回调函数队列
    this.onResolvedCallbacks = [];
    // 失败回调函数队列
    this.onRejectedCallbacks = [];

    let resolve = (value) => {
   
      if (this.status === "pending") {
   
        // 新的值需要是 Promise，则递归解析
        if (value instanceof Promise) {
   
          return value.then(resolve, reject);
        }
        this.status = "fulfilled";
        this.value = value;
        // 异步执行所有成功回调
        this.onResolvedCallbacks.forEach((fn) => fn());
      }
    };

    let reject = (reason) => {
   
      if (this.status === "pending") {
   
        this.status = "rejected";
        this.reason = reason;
        // 异步执行所有失败回调
        this.onRejectedCallbacks.forEach((fn) => fn());
      }
    };
    // 执行器本身错误，直接 reject
    try {
   
      executor(resolve, reject);
    } catch (error) {
   
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
   
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (value) => value;
    onRejected = typeof onRejected === "function" ? onRejected : (reason) => {
   
      throw reason;
    };
    let context = this;

    return new Promise((resolve, reject) => {
   
      function handleOnFulfilled() {
   
        try {
   
          const result = onFulfilled(context.value);
          if (result instanceof Promise) {
   
            result.then(resolve, reject);
          } else {
   
            resolve(result);
          }
        } catch (error) {
   
          reject(error);
        }
      }

      function handleOnRejected() {
   
        try {
   
          const result = onRejected(context.reason);
          if (result instanceof Promise) {
   
            result.then(resolve, reject);
          } else {
   
            resolve(result);
          }
        } catch (error) {
   
          reject(error);
        }
      }

      if (this.status === "fulfilled") {
   
        setTimeout(() => {
   
          handleOnFulfilled();
        }, 0);
      }
      if (this.status === "rejected") {
   
        setTimeout(() => {
   
          handleOnRejected();
        }, 0);
      }
      // 当状态为 pending 时
      if (this.status === "pending") {
   
        // onFulfilled 传入到成功数组
        this.onResolvedCallbacks.push(handleOnFulfilled);
        // onRejected 传入到失败数组
        this.onRejectedCallbacks.push(handleOnRejected);
      }
    });
  }

  catch(onRejected) {
   
    return this.then(null, onRejected);
  }

  finally(onFinally) {
   
    return this.then(
      (value) => Promise.resolve(onFinally()).then(() => value),
      (reason) => Promise.resolve(onFinally()).then(() => {
   
        throw reason;
      })
    );
  }
}

事件循环

class EventLoop {
   
  constructor() {
   
    this.callStack = [];
    this.taskQueue = [];
    this.microtaskQueue = [];
  }

  run() {
   
    while (this.callStack.length > 0 || this.taskQueue.length > 0 || this.microtaskQueue.length > 0) {
   
      // 执行同步代码
      while (this.callStack.length > 0) {
   
        const task = this.callStack.pop();
        task();
      }

      // 执行微任务
      while (this.microtaskQueue.length > 0) {
   
        const microtask = this.microtaskQueue.shift();
        microtask();
      }

      // 执行宏任务
      if (this.taskQueue.length > 0) {
   
        const task = this.taskQueue.shift();
        task();
      }
    }
  }
}

闭包

const counterModule = (function() {
   
  let count = 0; // 私有变量

  return {
   
    increment: function() {
   
      count++;
      console.log(count);
    },
    reset: function() {
   
      count = 0;
      console.log('计数器已重置');
    }
  };
})();

counterModule.increment(); // 1
counterModule.increment(); // 2
counterModule.reset(); // 计数器已重置

3. 掌握Promise、⽣成器、类、接⼝和装饰器等问题

ES6 引入了许多新特性，包括 let 和 const 声明、箭头函数、模板字符串、解构赋值、默认参数、模块化、Promise、Class、Symbol、Set/Map 等，极大地提升了 JavaScript 的语法简洁性、功能性和开发效率。
TypeScript 是 JavaScript 的超集，通过添加静态类型检查、接口、泛型、枚举等特性，增强了代码的可读性、可维护性和开发效率，同时保持了与 JavaScript 的完全兼容
ES6 新特性的使用场景和优缺点、TypeScript 的类型系统、接口与类的区别、泛型的应用、模块化设计，以及两者如何结合提升开发体验和代码质量。

Promise

const promise = new Promise((resolve, reject) => {
   
  setTimeout(() => {
   
    const success = true;
    if (success) {
   
      resolve('操作成功');