TypeScript下Ionic Cordova应用按对象数值属性排序数组问题

嘿，刚接触TypeScript不用紧张，这个按距离排序的需求其实很简单，我一步步给你讲怎么实现：

1. 给地点对象定义TypeScript类型 #

首先咱们给地点数组里的每个对象定义一个接口，这是TypeScript的核心优势之一，能帮你避免写错字段名，还能获得编辑器的智能提示：

// 定义地点的类型结构
interface Place {
  distance: number;
  emails: string;
  // 这里可以添加你需要的其他字段，比如 name: string, address: string 之类的
}

// 你的原始地点数组（用上面的类型约束）
const places: Place[] = [
  { distance: 17.24, emails: "someemail..." },
  { distance: 5.6, emails: "anotheremail..." },
  { distance: 22.1, emails: "thirdemail..." },
  // 剩下的地点对象都可以按这个格式补充
];

2. 实现按距离从小到大排序 #

TypeScript里直接用数组的sort()方法就行，只需要传入一个简单的比较函数：

// 复制原数组后再排序，避免修改原始数据
const sortedPlaces = [...places].sort((a, b) => a.distance - b.distance);

小提示：sort()方法默认会原地修改原数组，如果不想破坏原始数据的顺序，一定要先复制一份数组（比如用扩展运算符[...places]或者places.slice()）再排序

这里的逻辑很直观：比较函数返回a.distance - b.distance时，返回负数就把a排在b前面，正数则把b排在a前面，刚好实现从小到大的排序。如果需要从大到小排序，只需要把比较逻辑改成b.distance - a.distance就行。

3. 在Ionic模板里渲染排序后的数组 #

因为Ionic默认基于Angular开发，咱们可以直接用*ngFor指令遍历排序后的数组来渲染UI：

<ion-list>
  <ion-item *ngFor="let place of sortedPlaces">
    <ion-label>
      <h2>距离: {{ place.distance.toFixed(2) }} 英里</h2>
      <p>邮箱: {{ place.emails }}</p>
    </ion-label>
  </ion-item>
</ion-list>

如果是在组件类中，更优雅的方式是把排序逻辑写成一个getter属性，这样每次原始数组变化时，都会自动重新生成排序后的数组：

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

interface Place {
  distance: number;
  emails: string;
}

@Component({
  selector: 'app-place-list',
  templateUrl: './place-list.page.html',
  styleUrls: ['./place-list.page.scss'],
})
export class PlaceListPage {
  // 原始地点数组
  places: Place[] = [
    { distance: 17.24, emails: "someemail..." },
    // 其他地点对象
  ];

  // 自动返回排序后的数组
  get sortedPlaces(): Place[] {
    return [...this.places].sort((a, b) => a.distance - b.distance);
  }
}

这样模板里直接用*ngFor="let place of sortedPlaces"就可以了，完全不用手动调用排序函数～

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