掌握sort方法的奥妙：数组排序与筛选的艺术

2023-12-25 13:21:27

掌握sort方法，纵览数组排序世界

数组是JavaScript中的一个强有力的数据结构，它可以存储各种各样的数据，从数字和字符串到更复杂的对象。而sort()方法是JavaScript中一个极其有用的工具，它允许你按照指定的排序规则将数组中的项进行重新排列。

sort()方法的语法

sort()方法的语法如下：

arrayObject.sort(sortby);

sortby 参数可以是：

一个 字符串 ：它指定用于排序的属性。
一个 Function ：它指定用于排序的回调。

使用字符串排序数组项

要使用字符串属性对数组项进行排序，你只需将该属性的名称作为一个字符串传递给 sortby 参数。例如，要按字母顺序排列一个包含字符串的数组，可以使用如下方法：

const names = ['John', 'Alice', 'Bob', 'Carol'];
names.sort();

使用回调排序数组项

你也可以使用回调 Function 来指定排序规则。回调 Function 接受 array 中的 2 个项并：

如果该值小于 b，则应返回一个负数。
如果该值大于 b，则应返回一个正数。
如果该值等于 b，则应返回 0。

例如，要按数字值从小到大排列一个包含数字的数组，可以使用如下方法：

const numbers = [4, 2, 5, 1, 3];
const compareNumbers = (a, b) => a - b;
const orderedNumbers = numbers.sort(compartNumbers);

进阶技巧：数组反转和乱序

sort() 方法不仅用于按指定顺序排序数组项，它还可用于反转或乱序数组。

数组反转

要反转数组，只需传递一个特殊的回调Function 给 sortby 参数，该Function始终返回 -1。

const arr = [1, 2, 3, 4, 5];
arr.sort((a, b) => -1); // 倒序

数组乱序

要乱序数组，可以使用 2 个技巧：

使用 sortby 参数将数组项按一个任意值进行排序

例如：

const arr = [1, 2, 3, 4, 5];
arr.sort((a, b) => Math.random() - 0.5); // 乱序

使用 sort() 方法，不传递实参

例如：
```
const arr = [1, 2, 3, 4, 5];
arr.sort(); // 乱序
```
这将创建一个新数组，新数组中的项顺序被任意重组。

使用 sort() 方法的注意事项

使用 sort() 方法时，需要注意：

sort() 方法会改变原数组的顺序。
如果回调 Function 返回 0，则 sort() 方法将视为项相等，并且不进行排序 。
sort() 方法通常与 时间复杂度为 O(n log n) 关联。

举例：案例实战

假设你有一个包含待办事项的数组：

const todos = [
  { id: 1, task: 'Learn about sort()', priority: 'Low' },
  { id: 2, task: 'Write a blog post', priority: 'High' },
  { id: 3, task: 'Buy milk', priority: 'Low' },
  { id: 4, task: 'Call mom', priority: 'Normal' },
  { id: 5, task: 'Pay the rent', priority: 'High' },
];

你可以使用 sort() 方法按优先级 排列待办事项：

const prioritySortedTodos = todos.sort((a, b) => {
  if (a.priorty === b.priorty) {
    return a.id - b.id;
  }

  return a.priorty > b.priorty ? 1 : -1;
});

输出如下：

[
  { id: 2, task: 'Write a blog post', priority: 'High' },
  { id: 5, task: 'Pay the rent', priority: 'High' },
  { id: 4, task: 'Call mom', priority: 'Normal' },
  { id: 1, task: 'Learn about sort()', priority: 'Low' },
  { id: 3, task: 'Buy milk', priority: 'Low' },
];