前端两年经验,历时一个月的面经和总结
前言
先介绍下个人情况:本人本科2年前端开发经验,由于政策原因公司裁员,我从上一家公司离职。休息了一段时间之后,我开始投简历找工作。从8月22号到9月22号累计一个月的时间,最终通过面试的岗位有8个。
从这一个月的面试内容来看,大部分面试官都会根据你的简历内容来提问。我简历里写到了 React
、Vue
、Typescript
和 小程序
,所以关于这几个部分的内容面试官都会问到。另外我简历里没写 Webpack
和 Node
,所以面试官没怎么问 Webpack
和 Node
相关的内容。
面经分类
从我的面试记录来看,可以把面试题分成这些类型:
- JavaScript
- CSS
- 框架通识
- Vue
- React
- Webpack
- Typescript
- 浏览器 & 网络
- 小程序
- 看代码说结果
- 手撕代码 & 算法
- 开放题
以下是我面试过程中遇到的所有的问题,供大家参考。下面的这些题目能搞定百分之七八十,搞定面试绝对没问题。
JavaScript
-
Map和Set的区别,Map和Object的区别
-
数组的filter、every、flat的作用是什么
-
es6有哪些新特性
-
说一下对Promise的了解
-
Promise的all和race有什么区别
-
箭头函数和普通函数的区别
-
let、var和const的区别?如果希望const定义的对象的属性也不能被修改该怎么做?
-
堆和栈的区别
-
闭包的原理
-
instanceof的实现原理
-
new的实现原理
-
数据类型有哪些?如何判断一个数据是否是数组
-
JQuery实现链式调用的原理是什么
-
分别介绍一下原型、原型链、作用域和作用域链的含义和使用场景
CSS
框架通识
Vue
React
-
setState是同步还是异步的
-
fiber的实现原理
-
fiber的时间调度通过哪两个原生api实现的(requestAnimationFrame和requestIdleCallback???)
-
React合成事件是如何实现的
-
使用Redux时需要注意的点
-
如果Redux没返回新的数据会怎样
-
Redux是如何派发数据的? connect原理?
-
什么场景会触发重新渲染(re-render)
-
setState返回一样的引用,render会执行吗
-
useEffect的使用方法?useEffect的return会在什么时候执行?useEffect原理是什么?
-
useMemo和useCallback的区别,它们的实现原理是什么?
-
useEffect、useMemo、useCallback是如何做依赖收集的
-
React Hooks有什么优势和劣势
-
context的实现原理是什么?如何做依赖收集?
-
React的生命周期(React15、React16)
-
PureComponent和Component的区别
-
如果在map循环中没有设置key值,那么从 A B C D 四个节点变成 B C D三个节点,它会以什么样的方式变化
-
React dom绑定事件和原生事件有什么区别
-
类组件和纯函数组件的区别
-
Hooks的实现原理
Webpack
Typescript
-
Typescript相较于JavaScript有什么优势和劣势?
-
const func = (a, b) => a + b; 要求编写Typescript,要求a,b参数类型一致,都为number或者都为string
-
实现ReturnType
-
实现DeepReadOnly
-
基于已有类型生成新类型:剔除类型中的width属性
interface A { content: string; width: number; height: number; }
浏览器 & 网络
小程序
看代码说结果
-
EventLoop
setTimeout(function() { console.log(1); }, 0); new Promise(function executor(resolve) { console.log(2); for (var i = 0; i < 10000; i++) { resolve(); } console.log(3); }).then(function() { console.log(4); }); console.log(5);
-
闭包。说结果,然后分别使用Promise和async改写成每隔1s打印1个数字的形式
function print(n){ for(var i = 0;i <n;i++){ setTimeout(console.log, 1000, i); } } print(10);
-
作用域
var a = 20; function bar() { console.log(a); } function foo(fn) { var a = 10; fn(); } foo(bar);
-
作用域
function bar() { var a = 20; return function() { console.log(a); } } var foo = bar(); var a = 10; foo(); // 20
-
作用域
var a = 20; function bar() { console.log(a) var a = 10; console.log(n) } bar()
-
EventLoop
const promise = new Promise((resolve, reject) => { console.log(1); resolve(5); console.log(2); }).then((res) => { console.log(res); }) promise.then(() => { console.log(3); }) console.log(4) setTimeout(() => { console.log(6) })
-
EventLoop
async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2 start'); } console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0); async1(); new Promise(function(resolve) { console.log('promise1'); resolve(); }).then(function() { console.log('promise2'); }).then(function() { console.log('promise3'); }); console.log('script end');
-
原型链
function foo() { } const bar = new foo() console.log(bar.__proto__) console.log(bar.__proto__.__proto__) console.log(bar.__proto__.__proto__.__proto__) console.log(bar.__proto__.__proto__.__proto__.__proto__) console.log(foo.prototype) console.log(foo.prototype.prototype) console.log(foo.prototype.prototype.prototype)
手撕代码 & 算法
- 手写快排
- 手写深拷贝
- 手写节流和防抖
- 手写call / apply
- 手写Promise.all / Promise.race / Promise.allSettled
- 手写限制并发数量
- 手写括号匹配
- 手写红包算法(注意均衡分配和浮点数计算精度问题)
- 数组去重
- 将奇数排在前面,偶数排在后面。要求时间复杂度O(n)。空间复杂度O(1)(不能用splice)
- 数组转树结构
- 解析出URL中所有的部分
- 实现一个compare函数,比较两个对象是否相同
- 螺旋矩阵
- 大数相加
- 找出出现次数最多的英语单词
- 节点倒序(将ul.id=list,将ul节点下的10000个li节点倒序。考虑性能。)
- 实现一个函数计算 "1+12-31+100-93"
- 判断链表是否有环
- 手写useReducer
- 手写useDidMount
- 手写useDidUpdate,模拟componentDidUpdate
- 手写usePrevious
- 爬楼梯
- 删除单向链表中的某个节点
- 柯里化
- 中划线转大写
- 千位分割
- 使用es5实现es6的let关键字
开放题
总结
在我开始投简历之前,我做了两周的面试准备,那么我准备什么呢?
首先是准备简历和自我介绍。将自己所做过的所有项目都列出来,从里面找到自己收获比较大的或者是存在着技术难点的项目放到简历上。有一点非常重要:千万不要为了显得自己很厉害,把自己不了解或者不熟悉的技术写到简历里!这是非常不明智的,面试官往往会根据你简历的所写到的技术点和项目进行提问,如果问到了你不会的技术点,你又不能很好的表达出来,那可能就吃了一个暗亏。在梳理项目的同时,最好对你的项目做一个抽象的归纳总结,比如项目的使用者有哪些人,这个项目对他们产生了什么样的帮助,这个项目所承担的职责是什么样的。
第二步是遍历。需要大批量的去看网上的面经,面经的时间越近越是有可借鉴的地方。多关注简历里面写到和项目里用到的技术,多关注原生JS、技术框架、构建打包以及性能优化方向的知识,而对于css和html这些面试官能问到的范围比较小,所有可能被问到的css题目其实我都遇到过了,也都记录在了文章里。
第三步是列提纲。我根据网上的面经,我将面试官可能会问到的问题汇集起来统一记录在文档里,然后按照题目的标签和关注点进行分类,最后得到的分类结果和最后实际的面试经过所碰到的问题分类差不多。
第四步是各个击破。对于梳理出来的知识点,我建议将每一条的答案都用笔写出来或者用电脑编辑记录下来。很多时候,知道和能不能很好地表达出来没有必然的关系。不仅要知道是什么,最好也要能保证在面试官提问的时候能用清晰的语言将你所知道的表达出来。
除了以上四点,还需要注意的是算法。算法这件事情很难在短时间内训练得很熟练,更多的是需要日常的的锻炼,培养了灵活的思维意识,才能在最短的时间内从题目中分析出需要使用的算法思想。当然,如果只是为了应付面试的话,那就没有这么复杂了,前端面试中可能涉及到的算法题不是很多,你只需要会做这些常见的题目就行了,甚至不需要举一反三。
除了做准备之外,还有一件事情必须要做:复盘和总结。对于我们面试的时候所遇到的问题,一定要及时的回忆和记录下来,尤其是自己没有回答上来的问题,及时的查漏补缺,找到一个能让面试官满意的答案并记录下来,这样的记忆往往会更加深刻。
【尾巴】如何选择Offer
在经历了三周的面试之后,已经出现了各方面都让我比较满意的公司,所以我决定停止投简历,剩下的一周结束掉所有在流程中的面试。
在这期间,我的心情是复杂的,因为不止一家开出了令我兴奋的薪资,而最后我需要从这些Offer里面选择一家最值得我加入的公司。薪资可能是一方面,但不是全部。
这个问题困扰了我几天,吃睡都不是很好。直到我看到了一篇关于如何选择Offer的文章,它缓解了我的焦虑,让我更能聚焦的去思考哪家公司更适合我。文章链接:当我们面对几个offer时,应该怎么选择?。
看完这篇文章之后,我摘抄了文章中的三个关键点:
- 主要参考指标:行业、企业、岗位、时薪
- 作为以赚钱为主要目的的普通人,我建议大家哪怕找不到和自己兴趣完全匹配的工作,也要找一个自己不讨厌的工作。
- 我曾经遇到过不少童鞋,刚毕业的时候一味地从薪资出发去选择offer,当工作节奏过快,工作压力过大后,她们就会陷入自我怀疑自我否定,然后对自己进行这样的灵魂拷问:难道我活着就是为了赚钱吗?
也希望这篇文章能帮你更好的梳理思路,顺利找到适合的公司和岗位。
转载自:https://juejin.cn/post/7013953652578582558