字节跳动 飞书前端 暑期实习 一二三面（OC）
1. 自我介绍
2. 项目介绍
3. React Hooks 与 React Component 的关系区别
4. 如何用 Hooks 模拟 componentDidMount 与 componentWillUnmount
useEffect(() => {
// componentDidMount
return () => {
// componentWillUnmount
}
}, [])
useEffect(() => {
// componentDidMount + componentDidUpdate
})
React.memo(fnComp, (prevProps, nextProps) => {
// shouldComponentUpdate
}) 5. 如何优化对 React 组件进行优化？
6. useMemo 和 useCallback 的区别？useCallback 的应用场景。
7. React Hooks 的实现细节？（不会）
8. React 父子件通信及应用场景。
9. MobX 解决了什么问题？项目中如何实际使用 MobX？
MobX 在异步的情况下如何进行值的更新？
了解 MobX 6 吗？其 makeAutoObserver(this) 的 shadow, ... 的细节聊聊（不会）
MobX 如何解决响应式更新？如何解决变量挟持？
10. TypeScript 的泛型及应用，Interface 与 Type 的区别，TypeScript 的高阶用法（Pick,...)，详细聊聊 Omit。
11. 实现一个 TypeScript 编程（返回类指定函数的 parameters 的最后一个参数/获取第一个参数）。（没有当场写出来，只提到了用 infer，当场傻了连 type 都不会定义了）
type MyTail<T extends any[]> =
((...t: T) => void) extends ((head: any, ...tail: infer TT) => any) ? TT : [];
type TestMyTail = MyTail<[string, number, number]>
type LastItem<T extends any[]> = T[Exclude<keyof T, keyof MyTail<T>>]
type TestLastItem = LastItem<[string, number, number]>
type MyPick<C, N extends keyof C> = {
[K in N]: C[K] extends (...args: infer P) => infer RT ?
(...args: [LastItem<P>]) => RT
: never
}
class _R {
public a(a: string, b: number, c: number): string { return ' '}
public b(a: string, b: number, c: string): string { return ' '}
public c(a: string, b: number, c: number, d: string): string { return ' '}
}
type _NewType = MyPick<_R, 'a' | 'b' | 'c'>
12. 垂直居中的实现方案
13. flexbox 的一些坑
14. 介绍一下盒子模型
15. z-index 在什么情况下会失效
16. position: sticky 的作用
17. 如何实现 1px 在手机上？使用 transform: scale() + width/height * 2
18. 如何看待 CSS 预处理器？ 19. 如何解决跨域问题？为什么会产生跨域问题？
20. 编程题：使用 Promise 实现 sleep，且加上 TypeScript 类型
async function sleep(timeout): Promise<void> {
return new Promise((resolve) => {
setTimeout(() => resolve(), timeout)
})
} 21. 算法：二叉树的路劲总和（写了好久，因为没有想清楚）
22. 算法：最长严格递增序列（如何优化？）：写的 dp（这边也写了很久），问如何优化：贪心+二分（没写）。
我差点以为我要挂了。
二面
1. 自我介绍&项目介绍
2. 前端最吸引你的一点？为什么开始学习前端？
3. 前端的学习对你有其他带来负担吗？
4. 尝试实现过 React / Vue 吗？
聊聊 React Fiber/React 优先级 lane 与更新/Hooks/分片渲染？
5. 你最有挑战的项目？为什么？规模体现在哪？
6. WebSocket 在什么情况场景下运用的？你在项目中主要负责什么？如何解决乱序问题（时间戳+Immutable.js）
7. TypeORM 的引入是为了解决什么问题？聊聊 SQL 注入。如何工作？如何避免（Prepared SQL+转义）。
8. 还有什么安全问题？XSS。实现原理？如何避免
9. Webpack 与 Vite 的区别？介绍一下 Vite。Vite 的优势在哪？
10. 有办法实现一个 AST 解析器吗？聊一下 AST。
11. 了解正则的原理吗？（不了解）。
基于 DFA/NFA 的匹配。
12. 手写题：写一个邮箱匹配的正则
/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/ 13. 手写题：非常简单的一个词法分析器（只分析赋值），其实挺简单的，主要是我在想怎么让他更通用一点就瞎写了好久。
（还好面试官没有卡我这两个手写题：意思到了就行）
三面
1. 自我介绍/项目介绍
2. 项目介绍，负责部分（全栈）并大概介绍项目架构，挑战（并发：消息队列、Websocket Relay；等）
3. 学校项目的挑战（分别列举）
4. React setState 原理
5. 手写题：返回给定七个扑克牌是否有同花顺，数据结构 `[{num: 1, hua: 's'}, ...]`
输入
hua: HXMF
const cards = [
{num: 1, hua: 'H'},
{num: 2, hua: 'H'},
{num: 3, hua: 'H'},
{num: 4, hua: 'H'},
{num: 5, hua: 'H'},
{num: 2, hua: 'X'},
{num: 2, hua: 'M'},
] const CARD_HUA_MAP = {
'H': 0,
'X': 13,
'M': 26,
'F': 39,
}
function isSameHuaShun(cards: { num: number, hua: string }[]) {
const sorted_nums = cards.map((i) => i.num + CARD_HUA_MAP[i.hua]).sort()
let count = 1;
for (let i = 1; i < sorted_nums.length; i++) {
if (sorted_nums[i - 1] === sorted_nums[i] - 1) {
count++;
} else {
count = 1;
}
if (count === 5) {
return true;
}
}
return false;
} 6. 实现一个 EventEmitter: on, emit, off, once
type FnCallback = (...args) => any
class EventEmitter {
eventMap: { [key in string]?: FnCallback[] } = {}
constructor() {}
on(event: string, fn: FnCallback) {
const listeners = this.eventMap[event] || (this.eventMap[event] = [])
listeners.push(fn)
}
emit(event: string, ...args: any) {
this.eventMap[event]?.forEach((fn) => {
fn.call(null, args)
})
}
off(event: string, fn: FnCallback): void {
if (!this.eventMap[event]) return
this.eventMap[event] = this.eventMap[event].filter((cn) => fn !== cb)
}
once(event, fn: FnCallback) {
this.on(event, (...args: any) => {
fn.call(null, args)
this.off(event, fn)
})
}
} 
