-
map、filter、reduce的核心区别在于结果类型：map生成等长新数组，filter返回子集数组，reduce得到单个聚合值；正确选择取决于最终需要的数据形态。
-
本文介绍如何在Vue.js中优雅地等待多个异步API请求全部完成后再渲染表单，避免因部分数据未就绪导致的UI错误或空白问题，涵盖Promise.all、响应式状态管理及强制重渲染等实用方案。
-
padding百分比值始终参照包含块的宽度，即使用于padding-top或padding-bottom；混用单位易导致响应式布局异常，且父宽为0时百分比padding失效。
-
本文详解为何在for循环中为多个单选按钮绑定onclick会导致所有点击都触发同一值（如始终弹出undefined或最后一个值），并提供使用addEventListener和事件委托的现代、可靠解决方案。
-
drop-shadow()能实现轮廓发光但适用场景与box-shadow不同：前者基于Alpha通道真实跟随内容形状（如文字、PNG、SVG路径），后者仅围绕矩形盒模型；需注意背景透明、父容器裁剪、浏览器兼容性及性能优化。
-
Spread运算符...可展开可迭代对象，简化数组合并与复制，如[...arr1,...arr2]；替代apply实现Math.max(...nums)；结合解构提取数据，如[first,...rest]；但仅支持浅拷贝且大数组可能影响性能。
-
:nth-child()选择器之所以成为前端利器，是因为它能基于元素在兄弟节点中的位置应用样式，极大提升代码效率与可维护性。1.核心用法是An+B表达式：odd/2n+1选奇数项，even/2n选偶数项；3n+1等实现间隔选择；n+5选从第5个开始的元素；-n+5选前5个元素。2.与:nth-of-type()的区别在于计数参照物不同：:nth-child()基于所有兄弟节点计数，而:nth-of-type()仅统计同类型元素。3.常见陷阱包括DOM结构混杂导致的选择偏差，优化策略包括保持结构纯净、结合其
-
复选框未选中时无法直接对input添加::before伪元素，需用label包裹并隐藏原生控件，再通过input:not(:checked)+span::before控制自定义图标显示。
-
gap在小容器中会被压缩甚至归零，因浏览器按CSSGrid规范强制缩减gap以适配可用空间；最大允许总gap=容器内宽－列数×单列基准宽。
-
答案：针对浏览器兼容性问题，可通过HTML条件注释（仅IE5-9）、CSS@supports特性检测、JavaScript动态加载样式等方法处理；推荐优先使用@supports进行特性检测，结合Autoprefixer和渐进增强策略，确保样式兼容性与可维护性。
-
ServiceWorker通过缓存策略实现离线访问与性能优化，如缓存优先适用于静态资源，网络优先用于动态内容，结合策略可提升用户体验，并需注意版本管理与更新机制。
-
sticky与absolute可共存，sticky依赖文档流需设阈值，absolute脱离文档流相对定位祖先，避免嵌套使用并注意z-index及兼容性。
-
通过:active伪类与transform结合实现按钮点击缩放效果，示例为button:active{transform:scale(0.95);}，并添加transition使动画更流畅，适配移动端时可设置touch-action:manipulation以增强响应。
-
本文讲解如何通过将文本容器与Grid容器共同置于一个Flex容器中，实现左侧文本、右侧2×2图片网格的水平对齐布局，并规避因transform导致的定位偏移问题。
-
防范JavaScript代码注入攻击需避免执行不可信数据并控制脚本环境。1.禁止直接执行用户输入，避免eval()、innerHTML等风险操作，用JSON.parse()和textContent替代；2.启用内容安全策略（CSP），通过HTTP头限制资源加载，禁用内联脚本与动态代码执行；3.输出时按上下文进行编码，如HTML实体编码、JavaScript字符串转义、URL编码；4.利用React、Vue、Angular等框架内置防护机制，慎用dangerouslySetInnerHTML等危险API。核
