我所理解的 JavaScript 最佳实践

代码写下来之后，大部分时间是用来读的。排查一条记录为什么排错了位置，要先看列表沿着哪一份输入走。审查一次批量提交的改动，要找出刷新到底等了哪些请求。能在调用处找到答案，就少一次跳转，也少一个靠猜测补上的前提。

Agent 读代码很快，依然需要判断哪些顺序属于业务约定、哪些值必须共享、哪些分支会写入外部系统。这些关系能从代码里直接看出来，Agent 修改时就有更明确的边界，人工 Review 也更容易核对哪些行为受到了影响。我调整写法时最看重的就是这一点：下一个读代码的人能用多短的路径确认它的含义。

全文分为十五篇。用 TypeScript 写的运行时代码也适用这些做法。类型建模、编译选项和检查工具链另见《我所理解的 TypeScript 最佳实践》，组件里的状态与派生值见《利用派生值减少维护成本和心智负担》。

第一篇《尽量去掉只用一次的中间变量》从读取路径出发，讲怎样把短表达式移到使用处。变量承载业务概念、复用结果或标记等待边界时，保留它更容易读懂。

第二篇《遍历的起点决定按 ID 取数的顺序》对照目录过滤和按选择顺序查表。同一批礼物可以得出不同的列表，重复 ID、重复选择和缺失项也各有处理方式。

第三篇《不用 reduce》把常见的累加器拆回求和、查找、分组等具体操作，并用初值、重复键和提前退出核对改写前后的行为。

第四篇《按遍历任务选择循环和数组方法》从一段普通的索引循环出发。只用当前值就从 for…of 开始，转换和查找用专门的数组方法，需要下标或动态终止条件时再选相应的循环。

第五篇《异步遍历按任务依赖选择并发或串行》用同一批提交对照三种等待方式。两张时间线分别展示全批成功与中途失败时，页面何时刷新、哪些请求还会继续。

第六篇《卫语句让主流程保持平直》用冻结与缺材料两项审核检查说明提前返回。函数少了一层嵌套，检查优先级、审计日志和保存后的通知顺序仍能按代码逐行核对。

第七篇《用函数给可复用的业务规则命名》用同一份资料表单对照直接写条件、抽普通 helper 和命名业务规则。读者能从调用点判断这里比较的是整份资料，还是触发复审的身份字段。

第八篇《让对象字段保持有序》用一个 composable 对照字段在类型、解构、调用和返回处的排列，并给出各处可用的 ESLint 规则。业务顺序则写进数组。

第九篇《正确写注释》用 Stylus、Vue、React 和 Vite 的例子说明注释怎样交代触发条件、数据约定、算法取舍和执行顺序，也讨论了怎样用测试和代码审查维护这些说明。

第十篇《一行代码只做一件事》从滚动区的无障碍属性更新出发，讲为什么给单句 if 加大括号、何时可以保留三元表达式，以及怎样拆开条件副作用和异步步骤。

第十一篇《给函数起合适的名字》用徽标颜色、上传条件和偏好加载区分取值、判断、转换与写入，让调用方从名字看出函数会做什么。

第十二篇《用空值合并运算符更好地控制默认值生效逻辑》对照设置里的缺省、清空和显式关闭，讲什么时候用 ??，什么时候要按输入含义分别处理。

第十三篇《用队列串行处理偏好更新，避免修改互相覆盖》用 Marker 的书签和阅读位置说明读改写队列、临时文件替换与失败恢复各自解决的问题。

第十四篇《确认弹窗关闭时，让等待中的 Promise 得到结果》从编辑页离开守卫出发，处理保存、放弃、关闭和重复点击，让每次确认都有明确结果。

第十五篇《用独立的预期值捕获实现错误》用「最近文件只展示五项」对照共享实现常量和独立预期，再故意把上限改错，观察哪条断言能发现问题。