12 posts tagged with "JavaScript"

for await...of 不是 async 版 for...of，而是一套"随时间产生的值流"消费模型。

1. 普通 for...of 遍历同步数组，迭代立刻拿到值；for await...of 每次迭代要等下一个值，生产者产出与消费者消费完全解耦
2. 这就是流式响应的底层逻辑：Node Stream、AsyncGenerator、LLM streaming 本质上是同一件事
3. 实现 Symbol.asyncIterator 协议就能让任意对象变成可异步遍历的流
4. Async Generator 是最简洁的生产端实现：yield 产出，for await...of 消费
5. 适用场景：分页 API、Stream、实时事件——凡是数据"不是一次性到齐"的地方

JS 并发面试，三 道题筛掉九成候选人。

1. await 在 for 循环里是 串行，10 个请求 10 秒，不是 1 秒
2. forEach 里写 await 完全无效，外层根本不会等
3. Promise.all 一个 reject 全盘崩，要容错必须用 Promise.allSettled

正解：并发用 Promise.all(arr.map(fn))，需要限流用 p-limit，要容错换 allSettled。

关键提醒：await 只暂停当前 async 函数，不会暂停外层调用者，更不会暂停 forEach 的迭代。

JS 中 async/await 不是新功能，是 Promise 的语法糖——本质还是回调。

掌握 await 只需记住 三 件事：

1. await 只能用在 async 函数里，async 函数永远返回 Promise
2. await 会"暂停"当前函数，但不会阻塞主线程，其他代码照常跑
3. 抛错用 try/catch，忘记 try/catch 会导致 UnhandledPromiseRejection

最佳实践:并发请求用 Promise.all,别串行 await,慢到怀疑人生。

JavaScript 异步异常处理 三 种姿势，try/catch 嵌套地狱 最常见也最糟糕。

1. try/catch 包 await：层层嵌套，业务和错误处理混成一坨
2. .catch() 链式：返回 undefined 难以判断错误来源
3. 元组解构 [err, data]：Go 风格，推荐

封装一个 to(promise) 工具函数，10 行代码消灭所有 try/catch，错误处理变成一行 if (err) return。

关键：业务错误用元组、致命错误仍要抛，别用工具类把所有异常都吞掉。

JavaScript 中 await 的执行顺序，是面试高频题，也是写异步代码最容易踩的坑。

1. await 后面的表达式 立即同步执行，只有等号左边的赋值才被推入微任务队列
2. await 本质是 Promise.then 的语法糖，每个 await 至少消耗 一 个微任务 tick
3. 循环里 await 串行执行，N 个请求耗时 N 倍，必须用 Promise.all 并发
4. 同步代码 → 微任务（await/then）→ 宏任务（setTimeout）的顺序永远不变
5. 判断输出顺序的口诀：先跑同步，再清微任务，最后才轮到宏任务

JavaScript 定时调度 三 大核心 API

1. setTimeout：延迟执行一次，推荐使用，可灵活控制调度
2. setInterval：周期重复执行，不推荐使用，存在设计缺陷
3. requestAnimationFrame：与屏幕刷新同步，动画场景首选

最佳实践：用递归 setTimeout 替代 setInterval，保证间隔准确、支持动态调整。

零延迟调度：setTimeout(fn, 0) 不是立即执行，而是当前同步任务完成后尽快执行，可用于拆分长任务。

关键提醒：定时器回调中的 this 指向全局对象；务必清理不再需要的定时器防止内存泄漏。

要点一： 事件系统的三大角色 —— 事件对象（存储状态）、事件源（被操作对象）、监听函数（回调处理）

• 事件最早在 IE3 和 Netscape Navigator 2 中出现，用于分担服务器运算负载
• IE4/Netscape4 时代出现了两种对立的事件流：IE 的冒泡流 vs Netscape 的捕获流
• DOM2 级规范统一了事件模型，形成捕获阶段 → 目标阶段 → 冒泡阶段的三阶段事件流

• addEventListener 第三个参数 useCapture 决定在捕获/冒泡阶段触发，默认 false（冒泡）
• stopPropagation() 只阻止向其他元素传播，不阻止当前元素的其他监听器
• stopImmediatePropagation() 彻底阻止传播，包括当前元素的后续监听器
• 事件代理（委托）利用冒泡特性，将子元素监听统一挂载到父节点，性能更优

JavaScript 正则表达式 四 大核心模块

1. 基础语法：修饰符、元字符、反义、贪婪/惰性匹配
2. RegExp 实例：test()、exec()、lastIndex 属性
3. String 方法：match()、search()、replace()、split()
4. 高级特性：分组捕获、反向引用、断言 Assertion

最容易踩坑：全局匹配 g 修饰符与 lastIndex 的关系、贪婪 vs 惰性匹配

最佳实践：使用 regex101.com 在线调试验证正则表达式

关键提醒：正则表达式带有 g 修饰符时，test() 和 exec() 会持续更新 lastIndex，可能导致意外结果