A · ### 解答思路 闪烁的根本原因是第二张图片在 hover 触发时才开始加载，加载耗时导致画面出现空白/延迟。解决方向就是让第二张图片**提前加载好**，而不是等到 hover 时才加载。 ### 详细说明 常见的三种解决方式： 1. **CSS Sprite（雪碧图）**：把两张图拼接成一张图，通过 `backgro
A · ### 解答思路 以任意一个数组的下标作为基准，遍历该下标，再从每个原数组中取出对应下标的元素，组成新的一维数组，最终汇总成二维数组。 ### 示例代码 ```js const a = [1, 2, 3, 4, 5]; const b = [11, 22, 33, 44, 55]; const c = [111, 22
A · ### 解答思路 用 `reduce` 遍历原数组，累积一个去重后的结果数组：对每一项先用 `findIndex` 检查结果数组里是否已经存在同名的记录——不存在就直接加入；存在则比较 `created_at`，当前项时间更早就用它替换已存在的记录。 ### 示例代码 ```js const list = [ { na
A · ### 解答思路 `<img>` 元素本身提供了 `onload` 和 `onerror` 两个事件：加载成功触发 `onload`，加载失败（地址错误、网络异常等）触发 `onerror`。 ### 示例代码 ```js const img = new Image(); img.onload = () => { co
A · ### 解答思路 `Array.prototype.sort()` 在**不传比较函数**时，会先把元素转换成字符串，再按字符（字典序/Unicode 码点）进行比较排序，这恰好等价于“按首位数字排序”。 ### 示例代码 ```js const arr = [12, 3, 24, 1, 932, 6423]; con
A · ### 解答思路 绝大多数场景下不需要额外的库：JavaScript 原生就提供了完整的位运算符，直接使用即可，引入第三方库反而增加了不必要的复杂度。 ### 示例代码 ```js const a = 5; // 0101 const b = 3; // 0011 console.log(a & b); // 1 按位
A · ### 解答思路 不需要真的把文件“分割”成多个独立文件，只要目标服务器（或 CDN）支持 HTTP `Range` 请求，就可以直接用 `fetch` 携带 `Range` 请求头，一次请求一个字节区间，从而实现“按需分片获取”的效果，等价于把文件按范围切成了多份。 ### 示例代码 ```js async func
A · ### 解答思路 生成唯一选择器常见的两类思路： 1. **基于已有特征拼接**：递归读取元素的 `id`、`class`、`tagName`、在父节点中的索引等信息，逐层拼接出一条能唯一定位该元素的选择器路径。 2. **主动打标记（更省心的取巧方案）**：直接给目标元素临时打上一个全局唯一的自定义属性（如 `dat
A · ### 解答思路 用正则 `/[^a-z]/i` 匹配所有「非字母」字符作为分隔符对字符串进行切割，得到一个单词数组，再用 `Set` 去重；需要注意如果原字符串以非字母字符开头/结尾，或包含连续的非字母字符，`split` 结果里会出现空字符串，需要额外过滤。 ### 示例代码 ```js const str = '
A · ### 解答思路 这几个比较结果都是 `==` 隐式类型转换规则导致的：只要比较的两边类型不同，引擎会按固定顺序把一方（或双方）转换成基本类型再比较。而 `[] != []` 比较的是两个不同的对象引用，永远不相等（无论内容是否相同）。 ### 示例代码（如有代码） ```js console.log(34 == '0