前端技术文章
-
reduce()未提供初始值时存在三类隐患：空数组抛TypeError、单元素不执行回调、首项类型主导后续计算；应始终显式传入合理初始值以确保行为可控。198 收藏 -
JavaScript事件是用户或浏览器触发的通信机制，通过addEventListener绑定可避免覆盖、支持多监听和精确移除；需善用event对象属性（如target、preventDefault）、事件委托及语义化API（如key而非keyCode）。437 收藏 -
![使用 Array.prototype.entries() 配合 for...of 可以在遍历数组时同时获取索引和值。entries() 方法返回一个包含数组键值对的迭代器，每个元素是一个 [index, value] 的数组。示例代码：const arr = ['apple', 'banana', 'cherry'];
for (const [index, value] of arr.entri](/uploads/20260512/17785996706a0346f60fe79.png)
entries()返回一个数组迭代器对象，每次调用next()产出形如[index,value]的二元数组，支持for...of遍历，不可直接解构为对象。234 收藏 -
Tailwind默认不支持width过渡动画，需用transition-[width]配合内联style="width:X%"实现平滑动画，类名切换（如w-1/2）无法插值。471 收藏 -
fr单位是CSSGrid实现等宽多列最直接可靠的方式，通过grid-template-columns配合repeat()或混搭固定值与minmax()，可灵活实现等宽、响应式及自适应布局。157 收藏 -
forced-colors:active是独立于dark:的高对比度模式媒体查询，因系统强制渲染导致prefers-color-scheme不触发，Tailwind默认不支持，须手写CSS并谨慎控制forced-color-adjust。128 收藏 -
HTML5play()不能无条件直接调用，必须在用户手势（如click、touchend）回调中同步调用并处理Promise返回值，否则会因权限限制被拒绝。462 收藏 -
--prof是定位CPU瓶颈最轻量可靠的方式，每毫秒采样调用栈生成V8日志；需用--prof-process解析，优先优化selftime高且调用频繁的函数，并配合--trace-deopt、--trace-compiler和--inspect深入归因。164 收藏 -
transform:rotate()仅实现元素绕自身transform-origin的自转，非圆周运动；真圆周运动需结合translateX/Y与三角函数计算坐标，或用@keyframes预设关键帧、offset-path路径动画、或JS+requestAnimationFrame动态更新位置。110 收藏 -
Map可通过分层键名（如"user:U123:chart:C456:ver:v2"）模拟多级索引，并辅以辅助索引Map加速查询，再封装语义接口与手动过期控制实现完整缓存方案。340 收藏 -
多列布局专用于连续文本流分栏，浮动仅适用于块级元素并排或图文环绕；响应式文本分栏用column-width，结构布局用flex/grid，二者不可混用。334 收藏 -
slot是WebComponents中唯一原生的内容分发机制，仅在ShadowDOM下生效，需调用attachShadow()、确保内容为直系子元素、严格匹配slot属性与name值，并正确使用::slotted()和slotchange事件。137 收藏 -
高可维护HTML布局取决于语义清晰、层级扁平、样式解耦；应使用语义化标签替代div堆砌，合理分工Flexbox与Grid，遵循BEM命名规范，统一响应式策略并确保HTML结构正确。109 收藏