1. Map（映射表）是什么？
Map 是一种键值对（key-value）数据结构，用于快速查找。
// 这是一个对象，用作映射表
const couponMoneyMap: { [userCouponId: number]: number } = {};
- 键（Key）：userCouponId（用户优惠券ID）
- 值（Value）：couponMoney（优惠券金额）
例如：
couponMoneyMap = {
101: 10, // 优惠券ID 101 对应 10元
102: 20, // 优惠券ID 102 对应 20元
103: 5 // 优惠券ID 103 对应 5元
}
2. 为什么要这样写？
目的：提高查找效率。
不使用 Map 的方式（低效）：// 每次都要遍历整个数组查找extra.selectUserCouponIds.forEach(id => { // 需要遍历 couponListData 找到对应的优惠券 const coupon = couponListData.find(c => c.userCouponId === id); sum += coupon.couponMoney;});// 时间复杂度：O(n × m)，n是优惠券数量，m是购物车项数量
使用 Map 的方式（高效）：// 先构建映射表（一次遍历）couponListData.forEach(c => { couponMoneyMap[c.userCouponId] = c.couponMoney;});// 然后直接通过ID查找（O(1)时间复杂度）extra.selectUserCouponIds.forEach(id => { sum += couponMoneyMap[id]; // 直接查找，非常快！});// 时间复杂度：O(n + m)，大大提升性能
3. 这段代码的具体作用
check.vueLines 180-189
const newCouponMap: { [cartId: number]: number } = {}; // 新的优惠券金额映射表
const newPointsMap: { [cartId: number]: number } = {}; // 新的积分金额映射表
const couponMoneyMap: { [userCouponId: number]: number } = {}; // 用户优惠券ID到金额的映射
// 构建优惠券金额映射表
if (couponListData.value?.enableCoupons) {
couponListData.value.enableCoupons.forEach((c: any) => {
couponMoneyMap[c.userCouponId] = Number(c.couponMoney) || 0;
});
}
步骤说明：
- 创建三个映射表：
- newCouponMap：购物车ID → 该购物车使用的优惠券总金额
- newPointsMap：购物车ID → 该购物车使用的积分
- couponMoneyMap：优惠券ID → 优惠券金额（用于快速查找）
- 构建 couponMoneyMap：
- 遍历所有可用优惠券
- 将 userCouponId 作为键，couponMoney 作为值存入映射表
- 后续可通过优惠券ID直接获取金额，无需再遍历数组
4. 实际应用场景
假设用户选择了多个优惠券：
// 用户选择了优惠券ID: [101, 102, 103]
// 需要计算总优惠金额
// 没有Map：需要遍历3次数组查找
// 有Map：直接 couponMoneyMap[101] + couponMoneyMap[102] + couponMoneyMap[103]
在后续代码中（第198-200行）：
newCouponMap[cartId] = extra.selectUserCouponIds.reduce((sum: number, id: number) => {
return sum + (couponMoneyMap[id] || 0); // 直接通过ID查找，非常快！
}, 0);
5. 总结
- Map 的作用：用 ID 快速查找对应数据，避免重复遍历
- 为什么这样写：提升性能，代码更清晰
- 适用场景：需要频繁通过某个唯一标识（如ID）查找数据的场景
这是常见的前端优化技巧，特别适合处理大量数据时的查找操作。
