Object.values(allImages).forEach(src =＞ { }
Object.values(allImages).forEach(src => { const img = new Image(); img.src = src; });是什么用法
这段代码的作用是预加载所有图片，确保图片在用户需要查看时已经加载完成，避免因加载延迟导致的闪烁或卡顿。我们来逐步解析：
1. Object.values(allImages)
Object.values()是 JavaScript 的内置方法，用于获取对象中所有属性值，并返回一个包含这些值的数组。在你的代码中，
allImages是合并了左右两侧图片路径的对象（键是分类名，值是图片路径），因此Object.values(allImages)会得到一个所有图片路径的数组。示例：
如果allImages是{ "女靴": "a.png", "女包": "b.png" }，则Object.values(allImages)返回["a.png", "b.png"]。
2. .forEach(src => { ... })
forEach是数组的遍历方法，用于依次处理数组中的每个元素。- 这里的
src => { ... }是箭头函数，作为forEach的参数，表示对数组中的每个元素（即每张图片的路径src）执行括号内的操作。
3. 图片预加载核心逻辑
const img = new Image(); // 创建一个新的图片对象（相当于 <img> 标签）
img.src = src; // 设置图片的路径，触发浏览器加载该图片new Image()会创建一个内存中的图片对象（不会显示在页面上，但浏览器会加载它）。- 当设置
img.src = src时，浏览器会自动向src对应的路径发送请求，下载图片并缓存到本地。 - 后续在页面中使用该图片路径时，浏览器会直接从缓存中读取，无需重新下载，从而实现 “无延迟显示”。
整体作用
这段代码通过遍历所有图片路径，提前让浏览器加载并缓存这些图片。当用户鼠标悬停在分类项上时，图片能立即显示，避免了因实时加载导致的闪烁、卡顿或空白，显著提升了交互流畅度。
这是前端开发中优化图片加载体验的常用技巧，尤其适用于需要频繁切换显示的图片场景。
.forEach(src => { ... })这个src指的是什么
在 .forEach(src => { ... }) 中，src 是一个参数名，代表数组中正在被遍历的当前元素值。
具体来说：
- 前面的
Object.values(allImages)会返回一个图片路径的数组（例如["./img/女靴.png", "./img/雪地靴.png", ...]）。 forEach方法会依次取出数组中的每个元素，将其传递给箭头函数src => { ... }。- 这里的
src就临时代表了当前正在处理的某一张图片的路径（比如第一次循环是"./img/女靴.png"，第二次是"./img/雪地靴.png"，以此类推）。
你可以把 src 理解为 “当前图片的路径”，它是一个变量名，也可以换成其他名称（比如 imagePath），功能不变：
Object.values(allImages).forEach(imagePath => {const img = new Image();img.src = imagePath; // 这里用新变量名也能正常工作
});简单说，src 就是数组中每个图片路径的 “临时代号”，方便在循环中处理每一张图片。