如何在JavaScript中高效获取对象数组的最大/最小值？

问题场景 #

给定包含x、y属性的对象数组，需要简洁高效地提取x和y的最大值、最小值。之前尝试Math.max(array.x)无效，使用for循环实现又冗余。

核心问题说明 #

Math.max(array.x)不生效的原因是：array是数组，array.x为undefined，而Math.max需要传入具体的数值参数，无法直接处理数组或undefined。

一、获取最大值 #

方式1：map + Math.max（简洁直观） #

先通过map提取所有x/y值，再用扩展运算符...将数组展开为Math.max的参数：

const maxX = Math.max(...array.map(item => item.x));
const maxY = Math.max(...array.map(item => item.y));
const maxObj = { x: maxX, y: maxY };
// 结果：{ x: 269.52487694376975, y: 300 }

方式2：reduce（一次遍历，性能更优） #

如果数组规模较大，reduce只需遍历一次即可完成计算，比两次map更高效：

const maxObj = array.reduce((acc, curr) => ({
  x: Math.max(acc.x, curr.x),
  y: Math.max(acc.y, curr.y)
}), { x: -Infinity, y: -Infinity });

初始值设为-Infinity，确保第一个元素的x/y能被正确选中。

二、获取最小值 #

逻辑与最大值完全一致，只需将Math.max替换为Math.min：

方式1：map + Math.min #

const minX = Math.min(...array.map(item => item.x));
const minY = Math.min(...array.map(item => item.y));
const minObj = { x: minX, y: minY };
// 结果：{ x: 0, y: 0 }

方式2：reduce（一次遍历） #

const minObj = array.reduce((acc, curr) => ({
  x: Math.min(acc.x, curr.x),
  y: Math.min(acc.y, curr.y)
}), { x: Infinity, y: Infinity });

初始值设为Infinity，确保第一个元素的x/y能被正确选中。

三、同时获取最大和最小值 #

通过一次reduce遍历，同时计算最大、最小值，是性能最优的方案：

const result = array.reduce((acc, curr) => ({
  max: {
    x: Math.max(acc.max.x, curr.x),
    y: Math.max(acc.max.y, curr.y)
  },
  min: {
    x: Math.min(acc.min.x, curr.x),
    y: Math.min(acc.min.y, curr.y)
  }
}), {
  max: { x: -Infinity, y: -Infinity },
  min: { x: Infinity, y: Infinity }
});

// 结果：
// {
//   max: { x: 269.52487694376975, y: 300 },
//   min: { x: 0, y: 0 }
// }

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