【前端校招面经】美团成都到店事业群-前端一二面面经
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] })();
#前端##面经##美团##前端面经##美团面经#今天状态不好, 如此简单的算法题当时都没答上来, 惭愧...