在Ionic+TypeScript中将数组排序后存入不同变量

嘿，这个需求很常见嘛，我帮你结合Ionic的使用场景，用TypeScript完整实现这个功能！

第一步：先给数据定义TypeScript接口（类型安全必备） #

首先咱们得给这个加油站数组的元素定义一个接口，这样写代码的时候有类型提示，也避免类型错误：

// 定义加油站数据的接口，覆盖所有字段
interface GasStation {
  label_gas: string;
  latitud_gas: string;
  longitud_gas: string;
  direccion_gas: string;
  telefono_gas: string;
  info_gas: string;
  vlr_dtg: string;
  desc_param: string;
  distance: string;
  price: number;
  timeorigin: number;
  distanceorigin: number;
  timetext: string;
  disttext: string;
}

第二步：实现排序逻辑并存入不同变量 #

接下来针对你可能需要的排序维度（比如距离最近、价格最低、到达时间最短），分别写排序逻辑，并且把排序后的结果存入独立变量。这里要注意：sort方法会修改原数组，所以我们先用扩展运算符[...arr]复制原数组，再排序，避免污染原始数据。

// 假设这是你的原始加油站数组
const originalGasStations: GasStation[] = [
  { 
    "label_gas": "calle 79", 
    "latitud_gas": "4.6653863", 
    "longitud_gas": "-74.057738", 
    "direccion_gas": "carrera 15 79 - 05", 
    "telefono_gas": "0", 
    "info_gas": "lunes a viernes de 9am a 4 pm", 
    "vlr_dtg": "8.900", 
    "desc_param": "Gasolina", 
    "distance": "2.887783486866033", 
    "price": 8900, 
    "timeorigin": 856, 
    "distanceorigin": 4012, 
    "timetext": "14 min", 
    "disttext": "4,0 km" 
  },
  { 
    "label_gas": "carulla pepe sierra", 
    "latitud_gas": "4.671234", 
    "longitud_gas": "-74.065432", 
    "direccion_gas": "carrera 16 80 - 10", 
    "telefono_gas": "123456789", 
    "info_gas": "lunes a domingo de 8am a 8 pm", 
    "vlr_dtg": "8.700", 
    "desc_param": "Gasolina", 
    "distance": "3.56789", 
    "price": 8700, 
    "timeorigin": 920, 
    "distanceorigin": 4500, 
    "timetext": "15 min", 
    "disttext": "4,5 km" 
  }
];

// 1. 按距离最近排序（升序，注意把distance字符串转成数字比较）
const closestStations = [...originalGasStations].sort((a, b) => {
  const distanceA = parseFloat(a.distance);
  const distanceB = parseFloat(b.distance);
  return distanceA - distanceB; // 升序，最近的在前；反过来就是最远的在前
});

// 2. 按价格最低排序（升序，直接用price数字比较）
const cheapestStations = [...originalGasStations].sort((a, b) => {
  return a.price - b.price; // 升序，最便宜的在前；反过来就是最贵的在前
});

// 3. 按到达时间最短排序（升序，用timeorigin数字比较）
const fastestStations = [...originalGasStations].sort((a, b) => {
  return a.timeorigin - b.timeorigin; // 升序，最快到达的在前；反过来就是最慢的在前
});

第三步：在Ionic组件中实际使用 #

如果是在Ionic页面组件里，你可以把这些逻辑放到数据获取完成后执行，比如从API拿到数据后排序，然后把结果绑定到组件属性，供模板使用：

import { Component, OnInit } from '@angular/core';

// 复用上面的GasStation接口
interface GasStation {
  label_gas: string;
  latitud_gas: string;
  longitud_gas: string;
  direccion_gas: string;
  telefono_gas: string;
  info_gas: string;
  vlr_dtg: string;
  desc_param: string;
  distance: string;
  price: number;
  timeorigin: number;
  distanceorigin: number;
  timetext: string;
  disttext: string;
}

@Component({
  selector: 'app-gas-stations',
  templateUrl: './gas-stations.page.html',
  styleUrls: ['./gas-stations.page.scss'],
})
export class GasStationsPage implements OnInit {
  // 组件属性，存储原始数据和排序后的数据
  originalGasStations: GasStation[] = [];
  closestStations: GasStation[] = [];
  cheapestStations: GasStation[] = [];
  fastestStations: GasStation[] = [];

  ngOnInit() {
    // 模拟从API获取数据的过程
    this.fetchGasStations().then(stations => {
      this.originalGasStations = stations;
      // 获取到数据后执行排序
      this.sortGasStations();
    });
  }

  // 模拟API请求，实际项目中替换成你的HTTP请求逻辑
  async fetchGasStations(): Promise<GasStation[]> {
    // 返回你的加油站数据
    return [
      // 这里放你的原始数组数据
    ];
  }

  // 封装排序逻辑的方法
  sortGasStations() {
    // 按距离排序
    this.closestStations = [...this.originalGasStations].sort((a, b) => {
      const distanceA = parseFloat(a.distance);
      const distanceB = parseFloat(b.distance);
      return distanceA - distanceB;
    });

    // 按价格排序
    this.cheapestStations = [...this.originalGasStations].sort((a, b) => {
      return a.price - b.price;
    });

    // 按到达时间排序
    this.fastestStations = [...this.originalGasStations].sort((a, b) => {
      return a.timeorigin - b.timeorigin;
    });
  }
}

然后在模板里就可以直接用这些排序后的数组了：

<ion-content class="ion-padding">
  <h3 class="ion-margin-top">最近的加油站</h3>
  <ion-list>
    <ion-item *ngFor="let station of closestStations">
      <ion-label>
        <h2>{{ station.label_gas }}</h2>
        <p>{{ station.disttext }} | {{ station.timetext }}</p>
      </ion-label>
    </ion-item>
  </ion-list>

  <h3 class="ion-margin-top">最便宜的加油站</h3>
  <ion-list>
    <ion-item *ngFor="let station of cheapestStations">
      <ion-label>
        <h2>{{ station.label_gas }}</h2>
        <p>${{ station.price }} | {{ station.info_gas }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

几个重要的注意点 #

• distance字段是字符串：一定要转成数字再排序，不然会按字符串的字典序排序，结果完全不对！如果怕有异常值，可以加个兜底：const distanceA = parseFloat(a.distance) || Infinity;，这样异常数据会排到最后。
• 不要修改原数组：用[...arr]或者arr.slice()复制原数组后再排序，避免后续使用原始数据时出问题。
• 自定义排序维度：如果需要其他排序方式（比如按营业时间、按加油站名称），只需要修改sort回调里的比较逻辑就行，比如按名称排序：return a.label_gas.localeCompare(b.label_gas)。

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