ES6+Flow环境下如何递增Map指定键对应的值？

嘿，这个问题问得很实用！咱们先把核心问题说清楚：直接用accounts["key"]++是不行的，然后再给你讲正确的实现方式，甚至还能整个近似的语法糖方案～

为什么accounts["key"]++行不通？ #

你可能以为Map的[]操作和普通对象一样，但其实本质完全不同：

• 普通对象用obj["key"]是访问它的自有属性；
• 而Map是一个专门的键值对集合，它的键存在内部数据结构里，用[]操作只会给Map这个对象本身添加一个名为key的属性，根本不会修改Map里存储的键值对！

举个反例，你要是真这么写：

let accounts: Map<string, number> = new Map();
accounts["key"]++;
console.log(accounts.get("key")); // 输出 undefined，因为Map里根本没这个键
console.log(accounts["key"]); // 输出 NaN，因为你给对象属性加了undefined+1

完全达不到你想要的效果对吧？

正确的实现方式 #

基础版：get + set 组合 #

这是最直接可靠的方式，逻辑很清晰：先取当前值（不存在就默认0），然后递增后存回去：

const targetKey = "key";
// 先获取当前值，不存在则用0兜底
const currentVal = accounts.get(targetKey) || 0;
// 递增后重新设置
accounts.set(targetKey, currentVal + 1);

如果要处理严格场景（比如怕get返回undefined导致NaN），也可以用空值合并运算符更严谨：

const currentVal = accounts.get(targetKey) ?? 0;

进阶版：封装成工具函数 #

如果要频繁做这个操作，把逻辑封装成函数会更省心，用起来就像调用一个“递增方法”：

// 封装一个通用的递增Map键值的函数
function incrementMapEntry(map: Map<string, number>, key: string): void {
  map.set(key, (map.get(key) ?? 0) + 1);
}

// 使用的时候超简单
incrementMapEntry(accounts, "key");

高阶玩法：用Proxy模拟[]++语法糖 #

如果你真的想要类似accounts["key"]++的简洁语法，可以用Proxy来包装你的Map，实现近似的效果：

// 包装Map，让它支持类似对象的递增语法
const accountsProxy = new Proxy(accounts, {
  get(target, prop: string) {
    // 只处理字符串类型的键
    if (typeof prop === "string") {
      // 返回一个重写了valueOf的对象，实现后置++的效果
      return {
        valueOf() {
          const current = target.get(prop) ?? 0;
          target.set(prop, current + 1);
          return current; // 后置++返回递增前的值
        }
      };
    }
    // 其他属性（比如Map的方法）正常返回
    return Reflect.get(target, prop);
  }
});

// 现在就可以这样用啦！
console.log(accountsProxy["key"]++); // 第一次调用返回0，同时Map里的"key"变成1
console.log(accounts.get("key")); // 输出 1

不过要注意：这个Proxy方案主要模拟的是后置递增（x++），如果要前置递增（++x）还得调整逻辑，而且Proxy会带来一点点性能开销，日常业务里用封装函数其实足够了。

总结 #

• 别直接用accounts["key"]++，那是操作对象属性，和Map的键值无关；
• 优先用get()+set()的组合，或者封装成工具函数，简单可靠；
• 追求语法简洁的话，可以用Proxy实现近似的语法糖，但没必要过度折腾～

内容的提问来源于stack exchange，提问作者lebed2045