如何高效获取商品数组中价格的最小值与最大值？

我有一个包含商品颜色、尺寸、库存数量及价格的数组 sizes_and_colors，结构如下：

const sizes_and_colors = [
      {
        color: 'black',
        size: 'XS',
        amount: 3,
        price: 24.99
      },
      {
        color: 'black',
        size: 'S',
        amount: 4,
        price: 24.99
      },
      {
        color: 'blue',
        size: 'S',
        amount: 5,
        price: 24.95
      },
      {
        color: 'blue',
        size: 'XL',
        amount: 0,
        price: 24.95
      },
      {
        color: 'purple',
        size: null,
        amount: 4,
        price: 22.95
      },
      {
        color: 'beige',
        size: null,
        amount: 4,
        price: 20.99
      },
      {
        color: 'pink',
        size: 'S',
        amount: 2,
        price: 20.99
      },
      {
        color: 'green',
        size: null,
        amount: 4,
        price: 20.99
      },
      {
        color: 'silver',
        size: null,
        amount: 4,
        price: 20.99
      },
      {
        color: 'yellow',
        size: null,
        amount: 4,
        price: 20.99
      },
];

我目前实现了获取最低和最高价格的函数：

// 获取最低价格
export const getLowestPrice = (sizes_and_colors: any) => {
  let arr: number[] = [];
   sizes_and_colors.map((el:any) => {
      if(el.price) {
        arr.push(el.price);
      }
   })
   return Math.min(...arr);
}

// 获取最高价格
export const getHighestPrice = (sizes_and_colors: any) => {
  let arr: number[] = [];
   sizes_and_colors.map((el:any) => {
      if(el.price) {
        arr.push(el.price);
      }
   })
   return Math.max(...arr);
}

但不确定当前实现是否存在性能问题，想知道有没有更优、性能更好的方法来获取数组中的最小和最大价格。

你的现有存在几个可优化的点：

1. 现有实现的问题 #

• 语义不符：用map遍历数组不合适，map的核心作用是生成新数组，这里只是收集价格，用forEach语义更准确（虽然性能影响极小）。
• 重复遍历：调用两个函数会遍历数组两次，大数据量下会浪费计算资源。
• 临时数组风险：收集价格到新数组后用Math.min(...arr)，当数组极大时，可能触发JS引擎的函数参数数量上限，导致报错。
• 类型不安全：使用any类型会丢失类型检查，容易引发潜在错误。

2. 最优方案：一次遍历获取价格区间 #

通过一次遍历数组，同时跟踪当前最小和最大价格，只需要遍历一次，性能最优，还能节省内存：

// 定义商品变体类型，替换any，保证类型安全
interface ProductVariant {
  color: string;
  size: string | null;
  amount: number;
  price: number;
}

export const getPriceRange = (sizes_and_colors: ProductVariant[]) => {
  // 处理空数组边界
  if (sizes_and_colors.length === 0) {
    return { lowest: 0, highest: 0 }; // 可根据业务需求返回null/undefined或其他默认值
  }
  
  let lowestPrice = Infinity;
  let highestPrice = -Infinity;
  
  for (const item of sizes_and_colors) {
    // 确保price是有效数字（过滤undefined、null或NaN的情况）
    if (typeof item.price === 'number' && !isNaN(item.price)) {
      lowestPrice = Math.min(lowestPrice, item.price);
      highestPrice = Math.max(highestPrice, item.price);
    }
  }
  
  return { lowest: lowestPrice, highest: highestPrice };
}

使用方式：

const { lowest, highest } = getPriceRange(sizes_and_colors);

3. 单值获取的优化（若无需同时获取） #

如果确实只需要单独获取最小或最大价格，也可以优化为单次遍历且不创建临时数组：

export const getLowestPrice = (sizes_and_colors: ProductVariant[]) => {
  if (sizes_and_colors.length === 0) return 0; // 按需处理边界
  let lowest = Infinity;
  for (const item of sizes_and_colors) {
    if (typeof item.price === 'number' && !isNaN(item.price)) {
      lowest = Math.min(lowest, item.price);
    }
  }
  return lowest;
}

export const getHighestPrice = (sizes_and_colors: ProductVariant[]) => {
  if (sizes_and_colors.length === 0) return 0; // 按需处理边界
  let highest = -Infinity;
  for (const item of sizes_and_colors) {
    if (typeof item.price === 'number' && !isNaN(item.price)) {
      highest = Math.max(highest, item.price);
    }
  }
  return highest;
}

4. 额外优化点 #

• 类型安全：定义ProductVariant接口，避免any带来的类型隐患，提高代码可维护性。
• 边界处理：增加空数组判断，避免出现Math.min()返回Infinity或Math.max()返回-Infinity的异常结果。
• 内存优化：不需要创建临时数组存储价格，直接在遍历中比较，减少内存占用。

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