JS使用reduce取对象最大值键时空对象报错解决方法

问题原因 #

你的代码报错和运行异常来自两个核心问题：

1. 对空数组调用reduce()且不传入初始值时，JS会直接抛出TypeError，这是语言标准行为
2. 你尝试添加初始值的写法存在语法错误：三元表达式被错放在了reduce的第二个参数（初始值传参位），同时传入0作为初始值完全不符合业务逻辑——0并不是对象中可能存在的合法键名，首次迭代时取project.approved_account_ids[0]会得到undefined，和数值比较时会触发隐式类型转换，导致结果错误。

最佳实现（业务场景推荐） #

优先做前置边界校验，逻辑清晰无隐式bug，后续维护成本最低：

<Typography variant="body2">
  Architect: {
    (() => {
      // 先做兜底，防止approved_account_ids字段本身为null/undefined时调用Object.keys报错
      const approvedMap = project.approved_account_ids || {};
      const keys = Object.keys(approvedMap);
      // 无有效键时返回业务兜底值，可根据需求替换为''、'N/A'等
      if (keys.length === 0) return '暂无';
      // 数组非空时reduce无需传初始值，默认取第一个元素作为初始比较值，逻辑正确
      return keys.reduce((maxKey, currentKey) => {
        return approvedMap[maxKey] > approvedMap[currentKey] ? maxKey : currentKey;
      });
    })()
  }
</Typography>

其他可选写法 #

如果不想写前置判断，也可以通过Object.entries+初始值标记的方式实现，但可读性稍差：

<Typography variant="body2">
  Architect: {
    Object.entries(project.approved_account_ids || {})
      .reduce((maxKey, [curKey, curVal], idx) => {
        // 首次迭代直接返回当前key作为初始最大值，避免初始值不合法的问题
        if (idx === 0) return curKey;
        return project.approved_account_ids[maxKey] > curVal ? maxKey : curKey;
      }, '') || '暂无'
  }
</Typography>

注意事项 #

不要为了省代码给这个场景的reduce传入0、''这类不在目标对象键列表里的初始值，否则首次迭代的比较逻辑一定会出问题：undefined和任何数值做大小比较结果都是false，最终会返回错误的键名。

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