如何遍历键不统一的对象数组并统计高值颜色？

需求说明 #

统计数据数组中每个元素里值更高的颜色，将该颜色计入空对象totals（若不存在则设值为1，已存在则递增1），最后按totals的值从高到低排序并返回最高值颜色。

问题困惑 #

数组元素的属性键不统一，不知如何遍历该数组，是否应使用解构？

*可按需重新设计数据结构，若有更易解决的结构方案，请告知！

原始数据 #

const data = [
   { orange: 4, green: 4},
   { green: 0, yellow: 0},
   { yellow: 1, orange: 4 },
   { blue: 2, green: 1 }, 
   { blue: 2, yellow: 1 }, 
   { green: 3, yellow: 2 },
   { green: 1, blue: 3},
   { green: 5, yellow: 2 }, 
 ]

解决方案代码 #

// 初始化计数对象
const totals = {};

// 遍历数据数组
data.forEach(item => {
  // 将当前元素转换为[key, value]数组，统一处理属性
  const colorEntries = Object.entries(item);
  
  // 处理值相等的情况（示例中直接跳过，可按需调整逻辑）
  if (colorEntries[0][1] === colorEntries[1][1]) return;
  
  // 找出值更高的颜色
  const highColor = colorEntries[0][1] > colorEntries[1][1] ? colorEntries[0][0] : colorEntries[1][0];
  
  // 更新计数：不存在则设为1，存在则递增
  totals[highColor] = (totals[highColor] || 0) + 1;
});

// 按计数降序排序，取出最高值对应的颜色
const highValueColor = Object.entries(totals)
  .sort((a, b) => b[1] - a[1])
  .shift()[0];

console.log(totals); // { blue: 3, green: 2, orange: 1 }
console.log(highValueColor); // "blue"

核心逻辑说明 #

• 遍历与属性统一：使用Object.entries()将每个对象转为[颜色, 数值]的数组，无需解构即可处理属性键不统一的问题
• 高值判断：直接比较两个数值大小，选出对应颜色；数值相等时可根据需求调整（如计入两者或跳过）
• 计数更新：通过totals[highColor] = (totals[highColor] || 0) + 1简化判断逻辑，避免冗余的if-else
• 排序取值：将计数对象转为数组后按值降序排序，直接取第一个元素的颜色即可得到结果

可选数据结构优化 #

若可重新设计数据结构，建议采用更统一的格式，提升代码可读性：

const optimizedData = [
  { colors: [{ name: 'orange', value: 4 }, { name: 'green', value: 4 }] },
  { colors: [{ name: 'green', value: 0 }, { name: 'yellow', value: 0 }] },
  { colors: [{ name: 'yellow', value: 1 }, { name: 'orange', value: 4 }] },
  // ... 其余元素同理
];

这种结构下，遍历和比较逻辑更直观，无需额外处理属性键的动态性。

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