【面经】社招-外包美团-前端
很久没有面试了，于是先通过文海思辉，了解外包行业的面试难度。
投递简历后HR很快回复，并提示是驻场工作，面试官是甲方人员。
面试官
一面 - 电话面试
- 自我介绍
- 尽可能多的方式实现水平垂直居中
- 简介BFC
- 行内元素，块级元素有哪些标签
- 常用的HTTP状态码 - 404于304区别
- 常用的请求头有哪些字段，作用是
- 说一下输入一个URL到页面展示的过程（扩展：TCP握手、CDN解析、同源策略、跨域问题的解决） 【插播】此处推荐牛客校招前端面经 。适合初级前端，也可作为复习大纲
- 说一下深拷贝浅拷贝的区别，如何实现
- 对闭包的理解与使用场景
- 开发中有遇到哪些困难，如何解决
- 介绍下公司的开发流程
反馈：准备不充足，特别是扩展的问题，部分地方有错误
二面
- 自我介绍
- 简介sso登录，如何实现
- 介绍下写组件的思路，什么情况下需要抽组件
- 受控组件与非受控组件的区别
- 简述React生命周期，性能优化应该在哪个周期处理
- setTimeout在React中的表现，如何处理数据同步
- 简述防抖与节流，区别与使用场景
- 对原型链的理解，为什么需要原型链
- 如下代码的输出结果：
// 1. 闭包
for (var i = 0; i < 3; i++) {
setTimeout(function log() {
console.log(i); // => ?
}, 1000);
}
// 2. 事件队列
const promise1 = new Promise((resolve, reject) => {
console.log('promise1')
})
promise1.then(() => {
console.log(3);
});
console.log('1', promise1);
const fn = () => (new Promise((resolve, reject) => {
console.log(2);
resolve('success')
}))
fn().then(res => {
console.log(res)
})
console.log('start')
- 数据清洗
根据parentId，将数组转化为树状结构
// 输入
let arr =[{id:1,name:'a', parentId:null},{id:111,name:'d', parentId:11},{id:11,name:'b', parentId:1},{id:12,name:'c', parentId:1},{id:2,name:'e', parentId:null},{id:22,name:'f', parentId:2},{id:3,name:'g', parentId:null}...]
// 输出
[
{
id:1,
name:'a',
children:[
{
id:11,
name:'b',
children:[{
id:111,
name:'d',
children:null
}]
},
{
id:12,
name:'c',
chlidren:null
}
]
},
{
id:2,
name:'e',
children:[
{
id:22,
name:'f',
chlidren:null
},
],
},
{id:3,name:'g', chlidren:null}
...
]
- 实现一个计时器组件（自动读秒，到达20后归零，停止计时），限时15分钟
应聘者
- 否关注对应聘者的使用框架的熟练度
- 对应聘者的建议
- 对这个职位人选的预期
- 是否重视代码质量，code review
- 求推荐书籍 - 《你不知道的JS》《NodeJS实战》
- 可以说一下你的职业规划吗
- 有过瓶颈期吗？迷茫期如何度过
小结
整体难度不大，没有专门考算法题，偏实战应用。
在写代码的过程中，对方要求尽避免使用库函数，从算法角度去实现。这时才意识到，自己平时对工具库的依赖很强，没有去仔细钻研实现原理。今后应该注意。
面试过程中，发现对外包人员的考察也是从题库中抽取提问。多看书，多刷牛客，才能做到游刃有余。
面试官很友善，引导提问，耐心解答；并对我投递外包位表示诧异，建议练习算法，多写代码，好好准备面试，投递正职。
关于职业规划，对方表示，有技术和管理两个方向，看自己选择。
关于迷茫期，‘忙起来就没那么多时间去想了，做就是了’。
虽然没有收到offer，但收获了很多建议。对知识点进行查漏补缺，加速“八股文”的复习！
