用途:该技能聚焦 JavaScript 的微优化与性能模式,适用于优化循环、数组操作、缓存和 DOM 操作等场景。
主要能力与示例:
- 查找用 Set:用 Set 的 has 替代数组 includes,把 O(n) 查找变为 O(1)。示例:const idSet = new Set([1, 2, 3, 4, 5]); if (idSet.has(targetId)) { ... }
- 动态键用 Map:动态 key 的缓存使用 Map,而非普通对象。示例:const cache = new Map<string, Data>(); cache.set(key, data);
- 提前返回:用多个提前 return 替代深层嵌套条件判断,减少嵌套。
- 避免创建中间数组:用 find 直接取首个匹配项,替代 filter 后再 map 再取下标。示例:const result = items.find(x => x.active)?.name;
- 批量 DOM 更新:用 DocumentFragment 收集节点后一次性插入,减少多次重排。
- 被动事件监听:对 scroll、touchstart 等事件使用 { passive: true }。
- 缓存昂贵操作:用 Map 做记忆化,命中缓存直接返回,未命中再计算并写回缓存。
- 对象合并:小对象可用对象展开 { ...a, ...b },大对象建议用 Object.assign({}, a, b)。
使用方式:资料未提供安装命令或调用步骤,仅以代码示例形式给出上述模式与写法。
适用场景:需要降低查找复杂度、减少中间数组分配、减少 DOM 重排、优化滚动与触摸事件响应、缓存重复计算的 JavaScript 代码。
限制:资料未提供具体性能数据、基准测试结果、兼容性说明或收费信息;上述建议属于微优化模式,实际收益需结合具体运行环境验证。