使用 JavaScript 的排序方法对数字数组排序

Array 原型上可用的类型方法允许您对数组的元素进行排序,并控制如何进行排序,本文的目的是向您解释为什么,为什么不,以及类型方法在排序一个 数组时是如何工作的。

<$>[注] TL;DR — 使用: myArray.sort((a, b) => a - b); <$>

由于JavaScript不是一个编写语言,JavaScript的数组可以包含不同类型的元素 - 字符串,数字,未定义等。

一个数组可以执行的许多操作之一是 分类. 无论您需要知道从分类集合中最好的学生,华尔街的大赢家,您最近消耗了多少数据,所有这些都涉及通过分类来组织一个集合。

在下面的代码示例中,我们将收集一个鸡蛋在我们的巢穴,然后将它们分类为上升和下降顺序。

填写一个 Array

我们声明和初始化一个数组,并以null值预先填写它 - 目前:

1let eggsInNest = new Array(10).fill(null);

接下来,让我们以从 1 到 200 之间的随机值填充 10 个元素:

1eggsInNest = eggsInNest.map(() => (Math.floor(Math.random() * 200) + 1));

排序

然后,我们可以简单地在我们的数组上调用种类方法,而无需参数:

1eggsInNest.sort();
2
3// e.g.: [109, 136, 156, 188, 19, 190, 2, 34, 55, 90]

<$>[警告]正如你所看到的那样,有一个小问题,排序并不像你所期望的那样有效。

默认情况下, sort() 方法将数组分类:

  1. 以上升顺序
  2. 将项目投放到字符串

要做到这一点,‘sort’ 方法在每个数组元素上调用‘String()’ 铸造方法,然后比较相等的字符串以确定正确的顺序。

它会很容易,除了事实上,项目被比较为字符串,其中有项目被排序,仿佛它们是字符串而不是数字。简而言之,大多数时候,使用分类方法而没有回调方法并不完全有效,因为分类不以我们预期的方式排序。

调用函数或从技术上讲,比较函数收到两个参数(称为ab)并应返回 1,如果第一个参数先于第二个参数, -1,如果第二个参数先于第一个参数,并 0,如果它们等同。


让我们创建一个‘sortEggsInNest’比较函数:

1function sortEggsInNest(a, b) {
2  if (a > b) {
3    return 1;
4  } else if (b > a) {
5    return -1;
6  } else {
7    return 0;
8  }
9}

如果你想成为一个热点,你可以将‘sortEggsInNest’比较函数缩小为一个三级运算器,如下:

1function sortEggsInNest(a, b) {
2  return a > b ? 1 : b > a ? -1 : 0;
3}

然后我们可以再次调用品种方法,但这一次通过品种EggsInNest比较函数:

1eggsInNest.sort(sortEggsInNest);

<$>[注] 是的,它在上升顺序下运作。

降级命令

需要以下降顺序排序吗? 只需在比较函数中的 return 1return -1 交换,如下:

1function sortEggsInNest(a, b) {
2  if (a > b) {
3    return -1;;
4  } else if (b > a) {
5    return 1;;
6  } else {
7    return 0;
8  }
9}

或者,使用 ternary 操作员的简短版本:

1function sortEggsInNest(a, b) {
2  return a > b ? -1 : b > a ? 1 : 0;
3}

数字的更短路径

最后,还有一种更短的方式来写比较函数:

1eggsInNest.sort((a, b) => a - b);

<$>[警告] 这只是好,因为比较函数只返回 1, -1 或 0,并从两个中间值中提取结果是完全相同的,但请记住 - 这只能用于数字类型或对象,其 valueOf() 方法返回数值(如日期对象)。

进一步阅读

sort 是许多 Array Mutator 方法之一,以及 shift, splice, reverse 等。 有关所有方法的更多信息,请参阅 How To Use Array Methods in JavaScript: Mutator Methods

Published At
Categories with 技术
Tagged with
comments powered by Disqus