问题描述

先说下我们平时都会使用的sort排序,按照以下方式使用使数组按照从小到大的方式依次排序。

这样看,好像没有什么问题,可是事实真的如此吗?

我们再往下看,如果使用以下这个数组直接进行sort排序,神奇的事情发生了,为什么10没有正常进行排序?按照我们之前的理解,应该是得到一个[1,2,3,4,9,10] 的结果才对。我有一个大胆的猜测,浏览器肯定有bug,哈哈哈,开玩笑,当然不是,下面让我们一探究竟!

问题原因

我们看一下MDN的解释:Array实例的sort()方法对数组的元素进行就地排序,并返回对同一数组(现已排序)的引用。默认排序顺序为升序,基于将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列。

原来是因为直接调用sort方法会比较UTF-16的值,怪不得会出现这样问题。现在找到原因,那么怎么在业务开发中避免这样的问题呢?

很简单,使用参数进行运算排序,不使用默认的比较逻辑,这样的话,不就解决这个问题了吗,sort支持传递两个参数,一个用于比较的第一个元素,我们用a描述,另一个用于比较的第二个元素,我们用b描述。我们用a-b的值来判断排序的规则。

负值表示a应位于b之前。

正值表示a应位于b之后。

零或 NaN 表明 ab 被认为是平等的。

当然还有一个注意点,如果是 undefined 不会认为它是最小值,排序会放到最后边,所以最好在排序之前或之后进行一下过滤。