内容摘要：上周帮朋友复盘一场前端面试，十道题里他错了四道。其中一道是问`typeof null`返回什么，他答"null"，面试官笑了笑没说话。这题我2016年第一次被问到，到现在还在考，答案始终是"objec

上周帮朋友复盘一场前端面试，端考十道题里他错了四道。试题其中一道是及答问`typeof null`返回什么，他答"null"，端考面试官笑了笑没说话。试题这题我2016年第一次被问到，及答到现在还在考，端考答案始终是试题"object"——JS诞生时留下的bug，改不了了，及答只能背下来。端考

前端笔试题有个特点：不考你背了多少API，试题而是及答看你能不能踩中那些"反直觉"的坑。下面挑几道有代表性的端考说说。

第一类：JS基础里那些"说好的试题"和"实际是"

看这段代码：

console.log(0.1 + 0.2 === 0.3); // false console.log(typeof NaN); // "number" console.log([] == ![]); // true

三个输出没一个符合直觉。0.1+0.2等于0.30000000000000004，及答浮点数精度问题，任何语言都躲不掉。NaN的类型是number，这个设计逻辑是"它本来该是个数字，只是算不出来"。最离谱的是`[] == ![]`：右边`![]`先转成false，再转成0；左边`[]`转成空字符串再转成0，所以0==0成立。面试官爱考这题，不是让你在实际项目里这么写，而是看你理解不理解隐式类型转换的规则链条。

还有一道经典题：

for (var i = 0; i < 3; i++) {  setTimeout(() => console.log(i), 0); } // 输出 3 3 3，不是 0 1 2

var没有块级作用域，三个setTimeout共享同一个i。改成let就输出0 1 2。这题考的是作用域和事件循环，实际开发中在循环里绑事件也常踩这个坑。

第二类：CSS布局，写得出和写得对是两回事

题目要求：用flex实现一个三栏布局，左右固定200px，中间自适应。

.container {  display: flex; } .left, .right {  width: 200px; flex-shrink: 0; } .center {  flex: 1; }

关键在`flex-shrink: 0`。不写这行，左右两栏在空间不够时会被压缩。很多人只写`flex: 1`给中间，忘了固定栏也会缩。这题看着简单，但面试时白板上写，十个里有三个漏掉shrink。

另一道常考的：两个div，一个宽高不定，怎么让它水平垂直居中？答案至少有四种——flex、grid、absolute+transform、table-cell。面试官通常会追问"哪种兼容性最好"，这时候得知道absolute+transform在IE9以下不行，flex在IE10是旧语法。

第三类：浏览器和网络，知道概念不等于能说清楚

"从输入URL到页面展示发生了什么"——这题被问烂了，但能答完整的人不多。DNS解析、TCP三次握手、HTTP请求、服务端响应、浏览器渲染（DOM树、CSSOM树、合成渲染树、布局、绘制）。每个环节都能往下挖：DNS用了什么协议？TCP为什么是三次不是两次？重排和重绘的区别？

有个细节很多人忽略：浏览器渲染时，遇到`<script>`标签会阻塞DOM解析。所以script通常放body末尾，或者加defer/async。这个点在实际性能优化里很关键，但笔试时经常被跳过。

第四类：手写代码，考的是思路不是背诵

手写防抖函数：

function debounce(fn, delay) {  let timer = null; return function(...args) {  clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; }

核心就三行：清定时器、设定时器、绑定this。但面试官会追问：如果要求第一次立即执行呢？加个immediate参数判断。如果要求返回值呢？用Promise包一层。一层层加需求，看你能写到哪一步。

还有手写Promise.all、深拷贝、数组去重。深拷贝那道题，写`JSON.parse(JSON.stringify(obj))`只能算及格，面试官接着问：函数能拷贝吗？循环引用怎么办？Date对象呢？这时候得手写递归加WeakMap。

前端考试题翻来覆去就这些套路。但每道题背后都对应着真实开发中会遇到的场景——防抖用在搜索框，深拷贝用在状态管理，flex布局用在几乎每个页面。把题做对是第一步，知道为什么考它，才算真的过了。