近期实习生招聘已经在进行中了，今天继续给大家带来一篇美团成都的前端校招面经，希望对校招的同学有一些启发。

一面

• 自我介绍, 问为什么投我们部门, 现在有 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

二面

• 自我介绍
• 问浏览器输入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'
})();

• 讲讲你知道的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]
})();

面试官点评

这篇校招，总体看来着重考察对JavaScript、浏览器、手写代码等方面的能力，可以看出对实际动手能力要求是比较高的，相关的知识点都需要实际深入去理解和掌握，也都是面试中的高频题目。

最后

《前端面试题宝典》经过近一年的迭代，现已推出 小程序 和 电脑版刷题网站 （https://fe.ecool.fun/），欢迎大家使用~ 同时，我们还推出了面试辅导的增值服务，可以为大家提供 “简历指导” 和 “模拟面试” 服务，感兴趣的同学可以联系小助手（微信号：interview-fe）进行体验哦~

作者：四季奶青大杯正常糖

链接：https://www.nowcoder.com/discuss/783864