前端面试系列 - 手写代码
内容提要
无论是国内还是国外互联网公司前端面试流程中，都会有要求白板代码过程，面试官会根据岗位及候选人情况出相应难度的基础题或leetcode算法题。手写代码更多的是考察候选人的思路和现场解决问题的能力，也能从一些细节中看出候选人的代码风格。本文记录了2021-22前端面试碰到的手写代码题以及解题思路，包括基础题、Polyfill、业务相关题目和leetcode题目。
延伸解读
手写代码在面试中的真实定位
文章指出，手写代码主要考察思路和现场解决问题的能力，代码风格如函数命名、一致性等细节也会被观察。作者强调，在AI辅助编程普及的当下，很多题目已失去实际意义，因此不建议死记题目和答案，而应在不看答案的前提下自己动手实现，把重点放在理解解题逻辑上。
高频题型与考察意图
从文章记录看，curry add和数据结构扁平化转换出现频率最高，前者考察闭包与递归，后者考察递归和对象路径处理。Polyfill类题目如myTypeOf、Promise.allSettled、_.get、filter则集中检验对JS内置方法实现原理的掌握。业务题如parse、render、红绿灯、url参数解析，更贴近实际开发场景，考察字符串处理、异步控制和边界情况。
解题思路的共性
文章中的多数题目都指向几个通用能力：递归处理嵌套结构、闭包保存状态、Promise链管理异步顺序、正则解析字符串。例如扁平化转换和flat函数依赖递归，HardMan和红绿灯依赖Promise与setTimeout的串联，_.get和render依赖路径解析。掌握这些模式比背诵具体代码更有迁移价值。
注意答案的局限与边界
作者明确说明自己的答案和思路不一定正确，仅供参考。部分实现存在简化，例如allSettled初版未处理非Promise值，Promise实现未覆盖完整规范。读者应关注题目背后的考察点，而非直接复制代码，并注意边界条件如null、非Promise参数、路径不存在时的默认值处理。
Q&A
前端面试手写代码主要考察什么能力？
手写代码主要考察候选人的思路和现场解决问题的能力，同时也能从函数命名、代码风格、规范等细节中看出候选人的编码习惯。
如何实现一个 curry add 函数？
可以使用闭包实现，例如 const add = x => y => x + y；对于不定参数，可以写一个 curry 函数，通过比较实参和形参数量决定是否继续返回函数，如 const curry = (fn, ...a) => a.length >= fn.length ? fn(...a) : (...b) => curry(fn, ...a, ...b)。
如何将树形嵌套结构转换为扁平对象？
可以使用递归，遍历对象，如果值是对象则继续递归，并用点号拼接 key，例如实现 flat 函数，将 {a:1, b:{c:2}} 转换为 {'a':1, 'b.c':2}。
如何实现一个简单的 Promise.allSettled？
遍历传入的 promise 数组，对每个元素判断是否为 promise，如果是则调用 then 和 catch 记录状态和值，否则直接作为 fulfilled 结果，最后返回结果数组。
如何实现 lodash 的 _.get 方法？
将路径统一转为数组，使用 reduce 逐层取值，如果中途遇到 null 或 undefined 则返回默认值，否则返回最终值。
如何实现红绿灯交替亮灯？
可以使用 Promise 链或 async/await 配合 setTimeout，依次设置红灯 3 秒、绿灯 1 秒、黄灯 2 秒，并循环调用。
