-
JavaScript高阶函数指接受函数为参数或返回函数的函数；map对数组每项执行变换并返回等长新数组，reduce则将数组聚合为单个值，二者均不修改原数组。
-
使用@keyframes定义缩放动画，通过animation-delay控制延迟，使3、2、1依次放大后消失，实现倒计时效果。
-
答案是JavaScript元编程通过Proxy、Reflect和属性描述符在运行时动态控制对象行为，例如使用Proxy的set拦截器可实现负数自动转0的数值容器。
-
短路求值是JavaScript中&&和||的特性：左侧操作数足以确定结果时，右侧不执行；||用于提供默认值（对falsy值返回右侧），&&用于安全访问（仅truthy时执行右侧）；但需注意0/""/false等合法falsy值被||误覆盖，推荐用??和?.替代。
-
现代前端通过CSSModules、CSS-in-JS、ShadowDOM或BEM实现样式模块化。1.CSSModules将类名局部化，避免全局污染；2.CSS-in-JS如styled-components将样式写入JS，支持动态属性；3.ShadowDOM提供原生隔离，适用于WebComponents；4.BEM通过命名规范减少冲突。选择方案需结合技术栈，确保样式独立、可维护。
-
拖拽成功需同时满足：1.dragstart中调用dataTransfer.setData()设合法类型值；2.dragover和drop事件中均调用preventDefault()；3.用CSS禁用user-select和滚动干扰；4.移动端须降级为touch事件实现。
-
最可靠做法是用setTimeout包裹requestAnimationFrame启动逻辑，确保延迟启动、可中断、兼容性好，并配对使用cancelAnimationFrame清除旧句柄。
-
网格溢出需协同控制盒模型、轨道约束与子项尺寸：全局设box-sizing:border-box；轨道用minmax()/fit-content()；子项设min-width:0；图文内容配max-width/word-break等。
-
移动端侧边栏被遮挡的根源是flex-direction:row在小屏下空间不足，解决方案是媒体查询中改用flex-direction:column实现垂直堆叠，并移除overflow:hidden、设置width:100%及语义化HTML结构。
-
浮动布局右侧空白主因是元素高度不一导致下一行无法上浮填充，可通过负margin和padding优化间距，但根本解决应采用Flex布局配合gap属性实现紧凑排列。
-
:empty仅匹配完全无内容（不含空格、换行、注释、子元素）的元素，需配合背景色、尺寸或伪元素实现占位；对“视觉为空”需JS预处理或类名控制，不可依赖其响应动态变化。
-
掌握Canvas绘图需理解坐标系、路径绘制、样式控制与动画原理。1.原点在左上角，通过getContext('2d')操作绘图；2.使用beginPath、lineTo、arc等绘制图形；3.设置fillStyle、strokeStyle等属性控制外观，结合save/restore管理状态；4.利用requestAnimationFrame实现动画循环，清除画布避免拖影。合理优化性能可提升渲染效率。
-
首先通过浏览器直接打开HTML文件测试基础功能，若需处理同源策略限制则应搭建本地服务器，可使用Node.js与http-server工具启动服务，或利用VSCode配合LiveServer插件实现热重载预览，同时确保HTML中script标签正确引入外部JS文件且路径无误，以保障JavaScript正常执行。
-
浮动元素默认不参与z-index层叠计算，需添加position（如relative）才能使z-index生效；现代布局应优先使用flexbox或grid替代float。
-
TypeScript是带类型检查的JavaScript增强版，所有合法JS代码都合法，但通过编译时检查提前拦截空值等错误；优先用interface定义可扩展业务对象，unknown替代any保障安全，类型是需持续维护的活契约。
