【前端校招面经】美团成都到店事业群-前端一二面面经

10.29 更新: 进 HR 面了, 不过 HR 来电话时楼主已签阿里的 offer, 所以拒了

10.22 一面

• 自我介绍, 问为什么投我们部门, 现在有 offer 吗, 校招都快结束了为什么还在面试
• 问 react hook 的一些坑, 涉及到闭包
• useCallback 的用法, 依赖项实现原理
• 问 this 指向问题, 看代码说结果

var name = 'name';
var A = {
    name: 'A',
    sayHello: function() {
        let s = () => console.log(this.name);
        return s;
    }
};
let sayHello = A.sayHello();
sayHello();
var B = {
    name: 'B'
};
sayHello.call(B);

• event loop 原理, 宏任务微任务, 你知道有哪些回调? 看代码说结果
• 手撕算法: 两个长度不等的有序数组合并成一个有序数组, 不能使用 sort
• 防抖 / 节流概念区分, 手写其实现
• 微前端概念, 简易实现原理
• 前端路由有哪些实现方式, 讲讲 onPopState

其实面试了一个多小时, 但是绝大多数问题我都已经忘记了
整体难度中偏上, 都是基础题

10.26 二面

• 自我介绍
• 问浏览器输入 url 到页面显示全过程
• 一个事件循环题看代码说结果
• 看代码说结果:

var name = 1;
(function() {
    console.log(name + this.name); // browser: -> 'undefined1'; Node.js: -> NaN
    var name = '2';
    console.log(name + this.name); // browser: -> '21'; Node.js: -> '2undefined'
})();

这里有一个需要留意的细节, 在浏览器环境下name是 window 对象下的一个属性, 用 var 声明 name 为任意值, 都会将这个值转为 string 类型并更新window.name. 因此在上述代码中, 一旦浏览器执行console.log(name + this.name);会输出 'undefind1'
但实际上在 js 中, 输入 undefind + 1; // -> NaN

• 讲讲你所知道的 react 原理, 越详细越好
• 具体讲讲 fiber 机制
• 讲对象循环引用分为哪几种情况
• 手撕代码: 深克隆
• 手撕代码, isEqual(a, b) 实现深度比较(算是深克隆的变种)
• 手撕代码: 【VDOM 模拟事件捕获机制】一个用数组存储的树, 查找树中的元素并输出查找路径

type TreeNode = { id: number, children?: TreeNode[] };
// 测试用例
const tree: TreeNode[] = [
    {
        id: 1,
        children: [ { id: 2 }, { id: 3 } ]
    },
    {
        id: 5,
        children: [
            { id: 6 },
            { id: 7, children: [ { id: 10 } ] } 
        ]
    }
];
// 大致思路: 用一个栈记录遍历路径
// 开始遍历一棵树时将树根 id 计入栈中
// 如果该子树整体无 target 节点, 则将该树根 id 出栈
const stack: number[] = [];
/**
  * 查找一个树中是否有 target 节点的方法
  * 开始查找时, 先将树根入栈, 经过查找后, 若能查到 target, 则返回 true
  * 若没有查到, 则将栈顶元素出栈(栈顶元素定为树根), 并返回 false
  */
function findItem(tree: TreeNode[] | undefined, target: number): boolean {
  if (tree) {
      const index = tree.findIndex(({ id }) => id === target);
      if (index >= 0) {
          stack.push(arr[index].id);
          return true;
      } else {
          for ( let i = 0; i < arr.length; i++ ) {
            stack.push(tree[i].id);
            if (findItem(tree[i]?.children, target)) {
                return true;
            } else {
                stack.pop();
            }
          }
          return false;
      }
  } else {
      return false;
  }
}
(function() {
    findItem(tree, 10);
    console.log(stack); // -> [5, 7, 10]
})();

今天状态不好, 如此简单的算法题当时都没答上来, 惭愧...