面试题手册

JS 异步方案演进：Callback（回调）：异步操作完成时调用。缺点：回调地狱（嵌套超过 3 层就难读）、错误处理分散、流程控制难（并行/串行需要自己写计数器）Promise（ES6）：链式调用可读性提升，.catch() 统一错误处理，Promise.all/race 等内置并行控制。缺点：长链仍不好读，一旦进入 .then() 链中间没法跳出（无法取消）Generator + co（ES6）：yield 暂停执行，配合自动执行器实现"看起来同步"的代码。缺点：需要额外库（co），需要理解 Generator 概念，心智负担高async/await（ES8）：Promise + Generator 的语法精华。写法像同步，错误处理用 try-catch，分支和循环直接写。缺点：滥用串行 await 破坏并发性能（两个无关请求应放 Promise.all）追问什么时候不推荐用 async/await？简单场景（单次 .then().catch() 比 async 包装更简洁）需要并发时（多个 await 写在一起是串行的）顶层模块代码中（ES6 模块顶层已有 await，但 CJS 不支持）数组方法中（.map(async fn) 返回 Promise 数组，需要再 Promise.all）Promise 可以取消吗？原生 Promise 不支持取消。但有 AbortController 变通方案：fetch 传入 signal，abort 时 fetch 抛 AbortError，.then() 不会执行。真正意义的 Promise 取消需要第三方库（如 bluebird）或用 RxJS 的 Subscription。

=== 是严格相等：类型不同直接 false，类型相同才比较值。== 是宽松相等：类型不同时做类型转换（强制类型转换），然后再比较。大多数场景用 ===。但 == 也有实际用途：if (x == null) —— 等价于 x === null || x === undefined，很简洁你明确知道两端类型相同时（和 === 没区别）处理字符串和数字比较时（'5' == 5 是 true），比如从 input 里读出来的值// == 的经典坑'' == 0; // true[] == 0; // true[] == ''; // true[] == ![]; // true (?!)null == undefined; // trueNaN == NaN; // false (即使 === 也是 false)追问Object.is 和 === 有什么区别？两个不同：Object.is(NaN, NaN) 是 true（=== 是 false），Object.is(0, -0) 是 false（=== 是 true）。其他行为和 === 完全一致。if (x == null) 比 if (x === null || x === undefined) 有什么风险吗？几乎没有。== null 只在值为 null 或 undefined 时为 true，对 0、''、false 都是 false。这是 == 唯一一个业界认可的"干净"用法。

暂时性死区（TDZ）是 let 和 const 的特性：从块级作用域开始到变量被声明为止，这个区间内访问变量会抛 ReferenceError。console.log(x); // undefined — var 提升但不报错var x = 1;console.log(y); // ReferenceError — let 有 TDZlet y = 2;let/const 确实有变量提升（引擎知道这个变量存在于作用域中），但在声明语句之前，这个绑定处于"未初始化"状态——这就是 TDZ。var 提升后直接被初始化为 undefined，所以能用。TDZ 的意义：帮你发现"在声明前就使用变量"的错误——这种 bug 用 var 时会被悄悄忽略。追问typeof 在 TDZ 中也会报错吗？会。typeof x 在 x 的 TDZ 中直接 ReferenceError。这是 typeof 唯一不安全的场景——通常 typeof 未声明变量 返回 "undefined" 不会报错，但 TDZ 是"已声明但未初始化"，typeof 也会报错。TDZ 对函数参数的默认值有影响吗？有。参数默认值中引用的后面的参数，会遇到 TDZ：function fn(a = b, b = 1) {} // a 的默认值引用 b 时，b 还在 TDZ 中fn(); // ReferenceError

三个阶段的异步方案，层层递进：Callback：把后续操作作为回调函数传给异步操作。问题是回调地狱——多层嵌套横向增长，错误处理每个回调都得单独处理。Promise：把回调包装成对象，链式 .then() 解决横向嵌套，.catch() 统一处理错误。但长链仍不够直观，且 .then() 里不能直接用 try-catch。async/await：Promise 的语法糖。async 函数返回 Promise，await 暂停执行等结果。写法就是同步代码的样子，错误用 try-catch。本质还是 Promise——await 的值就是 .then() 回调的参数。// 三个方案的同一操作// CallbackgetData((err, data) => { if (err) return; process(data); });// PromisegetData().then(process).catch(handleError);// async/awaittry { const data = await getData(); process(data); } catch { handleError(); }追问async/await 怎么处理并发请求？Promise.all([fetch1, fetch2]) 配合 await。不要写成 await fetch1(); await fetch2()——这样是串行的，第二个请求等第一个完成才发。async 函数返回的 Promise 和普通 Promise 有区别吗？没有本质区别。async 函数内部抛错等于 reject，return 值等于 resolve。唯一注意的是：async 函数返回的 Promise 是原生 Promise，即使你 return 的是一个 thenable 对象，也会自动包裹成 Promise。

两对概念，一个在 CommonJS，一个在 ESModule。module.exports vs exports（CommonJS）：module.exports 是真正的导出对象。exports 只是 module.exports 的引用（const exports = module.exports）给 exports 赋新值会断开引用，导出失败；module.exports 赋新值可以安全做法：只添加属性用 exports.foo = bar，需要替换整个导出用 module.exports = foo// 正确module.exports = { a: 1 };exports.b = 2;// 错误 — exports 被重新赋值，断开引用exports = { a: 1 }; // module.exports 还是 {}export vs export default（ESModule）：export 是命名导出，可以有多个。导入时用 { name } 且名字必须匹配export default 是默认导出，每个模块只有一个。导入时可以取任意名字一个模块可以同时有命名导出和默认导出// 导入区别import { foo } from './a'; // 命名导出import foo from './a'; // 默认导出import foo, { bar } from './a'; // 两者都有追问为什么 export default 导入可以随意命名？因为默认导出本质上导出的是 { default: value } 这个特殊 key。import x from 就是取 default key 的值。因此也叫 default import。项目中应该优先用命名导出还是默认导出？命名导出更好——IDE 自动补全、refactor 改名时更安全、Tree-Shaking 友好。默认导出适合"这个模块只有一个主要导出"（如一个组件、一个工具函数）。但争议是社区级的，没有绝对的优劣。

核心思路：批量操作，减少重排次数。DocumentFragment：创建一个脱离文档流的容器，在内存中构建完所有 DOM 再一次性插入。Fragment 插入后自己会消失，只留下子节点。const fragment = document.createDocumentFragment();for (let i = 0; i < 500; i++) { const li = document.createElement('li'); li.textContent = i; fragment.appendChild(li);}ul.appendChild(fragment); // 一次 DOM 操作display: none：先把容器隐藏，批量改完再显示。隐藏期间的 DOM 操作不触发重排（元素不参与布局计算）。cloneNode：克隆节点，在克隆上做修改，改完后替换原节点。虚拟列表：不是优化 DOM 操作次数，而是减少 DOM 节点总数——几百次操作通常意味着在渲染大量数据。只渲染视口内可见的几十个元素，滚动时复用。追问DocumentFragment 和直接 appendChild 性能差多少？大量操作时差几个数量级。直接 appendChild 每次操作都触发一次重排（元素加入布局树）。Fragment 里的操作不触发重排，只最后 append 时触发一次。为什么不用 innerHTML 一次性拼接字符串？innerHTML 确实比逐个创建 DOM 快，但有 XSS 风险（用户输入会执行脚本）。纯服务端数据可以用 innerHTML，有用户数据用 createElement + textContent。

断点续传的本质是"客户端记住传到哪了，服务端知道从哪继续接"。核心流程：上传前计算文件 hash（MD5/SHA1），作为文件唯一标识发请求到服务端查"这个文件的哪些分片你有了"（返回已上传分片索引）客户端只上传缺失的分片服务端暂存每个分片全部分片上完后，服务端合并分片为完整文件Koa 侧关键点：用 @koa/multer 或直接读 stream 接收分片分片命名规则：{hash}-{index}，便于按 hash 查找和按 index 排序合并分片前校验每个分片的大小是否正确合并完后校验完整文件的 hash 是否和客户端一致追问分片大小怎么定？一般 1-5MB。太小请求次数多（HTTP 开销），太大断点续传意义不大了。网速好的用户可以用更大的分片。并发上传多个分片好还是串行好？并发上传更快，浏览器对同一域名的 HTTP/1.1 最大并发是 6 个（HTTP/2 不受限）。注意并发数不能太大——文件 I/O 是性能瓶颈，服务端同时写入大量分片会 IO 打满。合并完大文件后内存会炸吗？不会，用 fs.createWriteStream（流式写入）和 fs.createReadStream（流式读取）顺序追加。Koa 生态有 fs-extra 库做这些操作，底层是流式的不会一次性加载整个文件到内存。

三个维度的区别：作用域：var 是函数作用域，let/const 是块级作用域。{ } 内部用 let 声明的变量，括号外访问不到。变量提升：var 有提升且初始化为 undefined（声明前访问得到 undefined）。let/const 也有提升但存在暂时性死区（TDZ）——声明前访问直接 ReferenceError。重复声明：var 可重复声明（后覆盖前），let/const 在同一作用域不能重复声明。const 额外特性：声明时必须初始化，且不能重新赋值。但对象和数组的属性可以修改（const 锁的是绑定，不是值）。// var：函数作用域，讨厌的经典 bugfor (var i = 0; i < 3; i++) { setTimeout(() => console.log(i)); // 3 3 3}// let：块级作用域，每次迭代创建新绑定for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i)); // 0 1 2}追问为什么 let 能解决 for 循环的回调/闭包问题？var 是整个 for 循环共享一个变量，循环结束后 i 是最终值。let 每次循环迭代都会创建一个新的绑定，每个 setTimeout 捕获的 i 是不同的绑定。即使循环结束后，这些绑定的值仍然保留着当时的 i。const 声明的对象属性为什么可以修改？const 锁定的是变量名到值的绑定关系——"这个变量名不能指向别的值"。对象属性是变量指向的内存地址内部的变更，不改变绑定关系。

核心区别就一条：Weak 版本的 key（或元素）是弱引用，不阻止垃圾回收。Set vs WeakSet：Set 元素可以是任何类型；WeakSet 元素只能是对象Set 可迭代（forEach、size、keys）；WeakSet 不可迭代Set 中对象被引用着，即使对象其他地方不再使用也不会被 GC；WeakSet 中对象没有其他引用时会被回收Map vs WeakMap：Map 的 key 可以是任何类型；WeakMap 的 key 只能是对象Map 可迭代；WeakMap 不可迭代WeakMap 条目会随 key 对象被 GC 而自动清除WeakMap 典型场景：Vue 3 的响应式依赖追踪、存储 DOM 节点的关联数据、为第三方对象附加元数据而不造成内存泄漏。WeakSet 用得少——需要标记"这个对象我见过"但不想阻止它被 GC 时用。追问为什么 WeakMap 没有 size 属性？因为 WeakMap 中条目可能随时被 GC 回收，size 值是瞬时的、不可靠的。如果 JS 引擎提供了 size，开发者的代码里依赖了这个值，但下一秒 GC 跑了一次值变了——这种不可预测性比没有 size 更糟糕。WeakMap 和 Map 在内存管理上有什么区别？Map 的 key 被引用着，即使这个 key 对象在别处都已不使用，Map 里的引用也会阻止 GC——内存泄漏风险。WeakMap 的 key 是弱引用，如果 key 对象没有其他强引用了，GC 可以回收，对应的 WeakMap 条目自动消失。

ES6 之后异步方案演进：回调函数：最原始的方式，问题是回调地狱（callback hell）——多层嵌套，错误处理困难。Promise：ES6 引入。把回调的嵌套转成 .then() 的链式调用，用 .catch() 统一处理错误。解决了回调地狱，但长链 .then() 仍然不够直观。Generator + co：通过 yield 暂停函数执行，配合自动执行器（如 co 库）实现类似同步的写法。现在基本被 async/await 取代。async/await：ES8（ES2017）正式引入。Promise 的语法糖——async 函数返回 Promise，await 暂停执行等待 Promise 完成。写法最像同步代码：async function getData() { const res = await fetch('/api'); const data = await res.json(); return data;}追问Promise.all、Promise.allSettled、Promise.race、Promise.any 的区别？all：全成功才成功，一个失败就失败allSettled：等全部完成（不管成败），返回结果数组含状态标记race：第一个完成的就返回（不管成败）any：第一个成功的就成功，全失败才失败（和 race 相反）async/await 的错误怎么处理？try-catch 包裹 await。或者用 .catch() 链在 async 函数的返回值上。也可以用 await promise.catch(() => fallbackValue) 的模式给错误设默认值。