如何获取数值数组中最小值对应的属性名称（React场景）

API 探路者

2026-8-20

解决方案

你需要把数值和对应的名称绑定在一起，而非仅存储数值，这样找到最小值后就能直接获取对应的名称。这里提供两种实用实现方式：

方法一：先找最小值再匹配名称

先构建包含数值与对应名称的对象数组，再通过最小值筛选出目标名称：

// 构建关联数值与名称的数组
const compareItems = [
  { value: companyResult.physicalAverage, name: "Physical Activity" },
  { value: companyResult.stressAverage, name: "Stress" },
  { value: companyResult.developmentAverage, name: "Personal Development" },
];

// 获取最小数值
const lowestValue = Math.min(...compareItems.map(item => item.value));
// 匹配对应名称（添加可选链与默认值避免空值报错）
const lowestName = compareItems.find(item => item.value === lowestValue)?.name || "No Data";

return ( 
  <div>
    <p>{lowestName}</p>
  </div>
);

方法二：直接找到最小数值的对象（更高效）

使用Array.reduce一次遍历即可锁定数值最小的对象，省去二次查找的开销：

const compareItems = [
  { value: companyResult.physicalAverage, name: "Physical Activity" },
  { value: companyResult.stressAverage, name: "Stress" },
  { value: companyResult.developmentAverage, name: "Personal Development" },
];

// 遍历数组，始终保留数值最小的对象
const lowestItem = compareItems.reduce((prev, current) => {
  return current.value < prev.value ? current : prev;
});

const lowestName = lowestItem?.name || "No Data";

return ( 
  <div>
    <p>{lowestName}</p>
  </div>
);