在 ReactJS 中对对象数组进行排序 - TypeScript

排序是一种在 ReactJS 开发中经常需要用到的技能，本文将介绍如何在 TypeScript 中对对象数组进行排序。我们将会覆盖以下主题：

1. 在 TypeScript 中定义对象数组
2. 如何使用 sort() 方法进行排序
3. 编写比较函数
4. 根据属性对对象数组进行排序
5. 结论

在 TypeScript 中定义对象数组

在本文中，我们将使用以下代码定义一个对象数组。

interface User {
  id: number;
  name: string;
  age: number;
}

const users: User[] = [
  { id: 1, name: 'Alice', age: 23 },
  { id: 2, name: 'Bob', age: 18 },
  { id: 3, name: 'Charlie', age: 32 },
  { id: 4, name: 'David', age: 27 },
];

上面的代码定义了一个 User 接口和一个包含四个用户对象的 users 数组，每个用户对象都有一个 id、name 和 age 属性。本文将尝试对此数组按照不同的属性进行排序。

如何使用 sort() 方法进行排序

在 JavaScript 中，可以使用 Array 对象的 sort() 方法来对数组进行排序。这个方法可以接受一个可选的比较函数，以决定如何排序元素。

array.sort(compareFunction?: (a: T, b: T) => number): this;

其中，compareFunction 是一个可选的用于比较的函数，它应该返回一个数值。

如果 compareFunction(a, b) 返回小于 0 的值，则 a 应该排在 b 前面。

如果 compareFunction(a, b) 返回大于 0 的值，则 a 应该排在 b 后面。

如果 compareFunction(a, b) 返回 0，则 a 和 b 的顺序可以是任意的（即相等）。

注意：排序是在原数组上进行的，它会改变该数组，不会返回一个新的数组。

编写比较函数

当你使用 sort() 方法时，你需要提供一个比较函数。这个函数应该接受两个参数，让我们称它们为 a 和 b，并返回一个数字。如果 a 排在 b 前面，则返回一个负数；如果 a 排在 b 后面，则返回一个正数；如果 a 和 b 相等，则返回 0。这里是一个简单的比较函数，它将根据 id 属性比较两个用户对象：

function compareById(a: User, b: User) {
  if (a.id < b.id) {
    return -1;
  }
  if (a.id > b.id) {
    return 1;
  }
  return 0;
}

如果你想根据其他属性进行排序，只需要改变比较函数即可。下面是更多的比较函数，它们将根据 name 属性和 age 属性分别排序。

function compareByName(a: User, b: User) {
  if (a.name < b.name) {
    return -1;
  }
  if (a.name > b.name) {
    return 1;
  }
  return 0;
}

function compareByAge(a: User, b: User) {
  if (a.age < b.age) {
    return -1;
  }
  if (a.age > b.age) {
    return 1;
  }
  return 0;
}

根据属性对对象数组进行排序

现在我们已经准备好对 users 数组进行排序了，首先我们将根据 id 属性进行排序：

const sortedUsersById = users.sort(compareById);
console.log(sortedUsersById);

这将输出以下内容：

[
  { id: 1, name: 'Alice', age: 23 },
  { id: 2, name: 'Bob', age: 18 },
  { id: 3, name: 'Charlie', age: 32 },
  { id: 4, name: 'David', age: 27 }
]

下面是根据 name 和 age 属性进行排序的示例：

const sortedUsersByName = users.sort(compareByName);
console.log(sortedUsersByName);

const sortedUsersByAge = users.sort(compareByAge);
console.log(sortedUsersByAge);

这将输出以下内容：

// 根据 name 属性排序
[
  { id: 1, name: 'Alice', age: 23 },
  { id: 2, name: 'Bob', age: 18 },
  { id: 3, name: 'Charlie', age: 32 },
  { id: 4, name: 'David', age: 27 }
]

// 根据 age 属性排序
[
  { id: 2, name: 'Bob', age: 18 },
  { id: 1, name: 'Alice', age: 23 },
  { id: 4, name: 'David', age: 27 },
  { id: 3, name: 'Charlie', age: 32 }
]

结论

在本文中，我们介绍了如何在 TypeScript 中对对象数组进行排序。我们学习了如何使用 sort() 方法，并编写了比较函数来根据不同的属性对对象数组进行排序。这是一个简单但非常有用的技能，它可以帮助我们在开发中更轻松地处理数据。