问题描述
先说下我们平时都会使用的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
表明 a
和 b
被认为是平等的。
当然还有一个注意点,如果是 undefined 不会认为它是最小值,排序会放到最后边,所以最好在排序之前或之后进行一下过滤。