技能介绍

很多前端项目的质量波动，根源不是算法或框架选型，而是数组处理、异步编排、布局实现这些高频小操作的写法差异——新手还在用双重循环去重、for 循环串行 await 请求、手写递归实现 flatMap、用 margin 负值做间距，而高手已经在用更简洁、更易维护的现代写法解决同样问题。这个差距不会突然出现，却在每天几十次的编码动作里悄悄拉开。

核心能力与讲解方式

技能围绕 JavaScript、异步编程、CSS 布局与个人片段库四个高频场景展开：

JavaScript 高频操作：用「常见隐患写法 vs 更优方向」对照表，覆盖数组去重、分组统计、深拷贝、判空、并发请求等场景。例如数组去重推荐 Set 一步到位，对象数组按 key 用 Map；判空用可选链 ?. 配合空值合并 ??（注意 ?? 与 || 对 0/空串的区别）；并发请求用 Promise.all（全成功）或 allSettled（允许部分失败）。
异步编程套路：一句话区分防抖（用户停手后触发，如搜索框输入）与节流（固定频率采样，如滚动/resize）；用请求序号或 AbortController 解决搜索联想的竞态 bug；将错误处理分层（请求层统一拦截 + 业务层只处理业务错误）；要求 loading/error/empty 三态齐全，只处理成功态是 demo 级代码。
CSS 布局速查：给出垂直水平居中、不定项等分、圣杯/两栏自适应、多行文本截断等现代写法，如居中用 display:grid; place-items:center，自适应卡片流用 repeat(auto-fill, minmax(280px, 1fr))。视觉细节要求动画只对 transform/opacity 操作、交互元素必带 hover/active/focus 三态、暗色模式用 CSS 变量而非双份样式。
片段库建设：本周第二次手写的代码就该进片段库，按场景命名（如「数组-按key分组」而非「reduce用法」），每条带适用场景、参数说明、已知坑的三行注释，月度淘汰被新特性（如 structuredClone）替代的旧写法。

进阶自检与边界

最后通过一份自检清单倒逼习惯落地：代码里还有 var 和 == 吗？map/filter/reduce 能否不查文档直接写？能讲清 ?? 与 ||、for...in 与 for...of 的区别吗？遇到布局第一反应是现代 grid/flex 还是老 hack？片段库最近一个月更新过吗？