ES6中对象数值属性累加与创建的最优实现方案问询

嘿，先假设你提到的“最简单实现”大概是这样的——比如统计元素出现次数时，先判断属性是否存在，不存在就初始化再累加：

const counts = {};
const items = ['a', 'b', 'a', 'c', 'b', 'a'];

for (const item of items) {
  if (!counts[item]) {
    counts[item] = 0;
  }
  counts[item]++;
}

这种写法没问题，但ES6+给我们提供了更简洁、更符合现代JS风格的优化方式，下面分几种情况说：

1. 用逻辑或赋值（||=）简化初始化 #

ES2021引入的||=运算符可以直接帮我们搞定“属性不存在就初始化”的逻辑，一行代码替代if判断：

const counts = {};
const items = ['a', 'b', 'a', 'c', 'b', 'a'];

for (const item of items) {
  counts[item] ||= 0; // 只有当属性不存在/为假值时，才初始化为0
  counts[item]++;
}

不过要注意：如果你的累加器数值可能合法为0（当然在累加场景里第一次初始化后就会变成1，所以没问题），但如果属性可能是其他假值（比如空字符串），这个方法可能误判，但对于纯数值累加的场景完全适用。

2. 可选链+空值合并（?. + ??）：更精准的判断 #

如果想严谨区分“属性不存在”和“属性值为0”的情况，ES2020的这两个运算符组合起来是最佳选择：

const counts = {};
const items = ['a', 'b', 'a', 'c', 'b', 'a'];

for (const item of items) {
  counts[item] = (counts[item] ?? 0) + 1;
}

??只会在左侧是null或undefined时才返回右侧值，不像||会把0、空字符串这些假值当成“不存在”处理，完全适配数值累加的场景，安全又简洁。

3. 用reduce浓缩逻辑，更函数式 #

如果是从数组生成累加对象，用Array.prototype.reduce()可以把整个逻辑浓缩成一段代码，避免显式循环：

const items = ['a', 'b', 'a', 'c', 'b', 'a'];
const counts = items.reduce((acc, item) => {
  acc[item] = (acc[item] ?? 0) + 1;
  return acc;
}, {});

这种写法符合现代JS的函数式编程风格，代码更紧凑，可读性也不错。

4. 用Map替代普通对象：适配特殊键类型 #

如果你的累加器键不是字符串/符号（比如数字、对象实例），普通对象会把键强制转成字符串，这时候Map是更好的选择——它支持任意类型的键，还能避免对象原型污染的问题：

const items = ['a', 'b', 'a', 'c', 'b', 'a'];
const counts = items.reduce((acc, item) => {
  acc.set(item, (acc.get(item) ?? 0) + 1);
  return acc;
}, new Map());

// 后续如果需要转成普通对象，可以用：Object.fromEntries(counts)

总结 #

如果是常规的字符串/符号键累加场景，**?? + reduce**的组合是最简洁且安全的；如果键类型特殊，或者担心对象原型的问题，优先考虑Map。这些方法都比原始的if判断更优雅，也更符合ES6+的语法特性。

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