Angular按航班报价总价排序并取前五结果失败求助

用户通过Angular的HTTP请求调用API，返回包含75条flight-offer对象的响应，每个对象的price.total为字符串类型总价。希望按总价升序排序后取前五条结果，但尝试以下两种代码后，得到的前五条结果总价均相同，求正确的排序实现方法。

API响应结构 #

{
  meta: {...},
  data: Array(75) [...],
  dictionaries: {...}
}

单个flight-offer结构 #

{
  type: "flight-offer",
  id: "1",
  source: "GDS",
  // ...其他字段
  price: {
    currency: "EUR",
    total: "580.13",
    base: "257.00",
    // ...其他字段
  }
}

用户尝试的代码 #

代码1 #

this.http.get(url, { headers: this.headers }).subscribe((data: any) => {
      this.responseData$ = data;
      console.log(data);
      const flightOffers = data.data || [];

      let sortedResults: any[] = flightOffers.sort(
        (offerA: any, offerB: any) => {
          if (
            !offerA.price ||
            !offerA.price.total ||
            !offerB.price ||
            !offerB.price.total
          ) {
            console.warn(
              'One or more offers lack a valid price object or total property.',
            );
            return 0;
          }

          return offerA.price.total - offerB.price.total;
        },
      );
});

代码2 #

this.http.get(url, { headers: this.headers }).subscribe((data: any) => {
      this.responseData$ = data;
      console.log(data);
      let sortedResults = [];
      if (Array.isArray(data.data)) {
        sortedResults = data.data.sort((a, b) => {
          return parseFloat(a.price.total) - parseFloat(b.price.total);
        });
      }
      const firstFiveResults = sortedResults.slice(0, 5);
});

问题分析与正确实现 #

原代码的问题 #

1. 原地排序修改原数据：Array.sort()是原地排序方法，会直接修改原数组（data.data），可能导致后续使用原数据时出现异常。
2. 无效值处理不完善：代码1中遇到无效价格时返回0，会把无效数据和有效数据视为等价，导致排序混乱；代码2未处理parseFloat失败的情况（比如total不是有效数字、price不存在），此时会得到NaN，参与减法运算结果仍为NaN，破坏排序逻辑。

正确实现代码 #

this.http.get(url, { headers: this.headers }).subscribe((data: any) => {
  this.responseData$ = data;
  const flightOffers = data.data || [];

  // 先复制数组，避免修改原响应数据
  const sortedResults = [...flightOffers].sort((offerA, offerB) => {
    // 安全解析价格：解析失败则设为Infinity，让无效数据排到最后
    const priceA = parseFloat(offerA?.price?.total) || Infinity;
    const priceB = parseFloat(offerB?.price?.total) || Infinity;
    
    // 升序排序：价格小的在前
    return priceA - priceB;
  });

  // 取前五条结果
  const firstFiveResults = sortedResults.slice(0, 5);
  console.log("前五条低价航班：", firstFiveResults);
});

关键改进点 #

• 使用扩展运算符[...flightOffers]复制原数组，避免修改原响应数据。
• 使用可选链?.安全访问嵌套属性，避免因price或total不存在抛出错误。
• 解析失败时将价格设为Infinity，确保无效数据自动排到排序结果的末尾，不干扰有效数据的排序。
• 明确通过parseFloat将字符串总价转为数字，确保减法运算的正确性。

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