深入浅出 JavaScript 的 Array.prototype.sort 排序算法

本文要解决的问题

1、找出 Array.prototype.sort 使用的什么排序算法

2、用一种直观的方式展示 Array.prototype.sort 的时间复杂度,看看它有多快?

3、实际开发中要注意的问题

Array.prototype.sort 各浏览器的算法实现

ECMAScript 5.1

ECMAScript 6.0

ECMAScript 草案

看完上面三个规范中 Array.prototype.sort 部分,我们会发现 ECMAScript 不同版本规范对 Array.prototype.sort 的定义中没有要求用什么样的排序方式实现 sort() 方法,也没有要求是否要采用稳定排序算法(下文会解释什么是稳定排序算法)。

因此各浏览器都给出自己的实现方式:

表格内容部分来自于维基百科

浏览器使用的 JavaScript 引擎排序算法源码地址
Google ChromeV8插入排序和快速排序sort 源码实现
Mozilla FirefoxSpiderMonkey归并排序sort 源码实现
SafariNitro(JavaScriptCore )归并排序和桶排序sort 源码实现
Microsoft Edge 和 IE(9+)Chakra快速排序 sort 源码实现

源码分析

V8 引擎的一段注释

// In-place QuickSort algorithm.
// For short (length <= 10) arrays, insertion sort is used for efficiency.

Google Chromesort 做了特殊处理,对于长度 <= 10 的数组使用的是插入排序(稳定排序算法) ,>10 的数组使用的是快速排序。快速排序是不稳定的排序算法。

但是很明显比我们常见的快速排序要复杂得多,不过核心算法还是快速排序。算法复杂的原因在于 v8 出于性能考虑进行了很多优化。

再看 safari Nitro 引擎的一段代码

if (typeof comparator == "function")
  comparatorSort(array, length, comparator);
else if (comparator === null || comparator === @undefined)
  stringSort(array, length);

  省略....

function stringSort(array, length)
{
  var valueCount = compact(array, length);

  var strings = @newArrayWithSize(valueCount);
  for (var i = 0; i < valueCount; ++i)
      strings[i] = { string: @toString(array[i]), value: array[i] };

  bucketSort(array, 0, strings, 0);
}

  省略....

function comparatorSort(array, length, comparator)
{
  var valueCount = compact(array, length);
  mergeSort(array, valueCount, comparator);
}

默认使用的桶排序,如果 sort 传入的自定义函数作为参数,就是用归并排序(稳定排序算法)

Firefox 源码就不贴了,上面的表格有源码地址,使用的稳定排序算法 — 归并算法。
Microsoft EdgeIE(9+) 使用的不稳定排序算法 - 快速排序。
但是 IE(6、7、8)使用的稳定算法。

各种算法的对比

排序类型平均情况最好情况最坏情况辅助空间稳定性
快速排序O(nlogn)O(nlogn)O(n²)O(nlogn)不稳定
归并排序O(nlogn)O(nlogn)O(nlogn)O(n)稳定
插入排序O(n²)O(n)O(n²)O(1)稳定
桶排序O(n+k)O(n+k)O(n²)O(n+k)(不)稳定

注: 桶排序的稳定性取决于桶内排序的稳定性, 因此其稳定性不确定。

算法时间复杂度

在进行算法分析时,语句总的执行次数T(n)是关于问题规模n的函数,
进而分析T(n)随着n的变化情况并确定T(n)的数量级。
算法的时间复杂度,也就是算法的时间度量,记作:T(n)=O(f(n))。
它表示随问题规模n的增大,算法执行时间的增长率和f(n)的增长率相同,
称作算法的时间复杂度,简称为时间复杂度。
其中f(n)是问题规模n的某个函数。

常用的时间复杂度所耗费的时间从小到大依次是

O(1) < O(logn) < O(n) < O(nlogn) < O(n²) < O(n³) < O(2^n) < O(n!) < O(n^n)

图片来源

算法的时间复杂度与运行时间有一些常见的比例关系 查看图表来源

复杂度1020501001,00010,000100,000
O(1)< 1s< 1s< 1s< 1s< 1s< 1s< 1s
O(log(n))< 1s< 1s< 1s< 1s< 1s< 1s< 1s
O(n)< 1s< 1s< 1s< 1s< 1s< 1s< 1s
O(n*log(n))< 1s< 1s< 1s< 1s< 1s< 1s< 1s
O(n²)< 1s< 1s< 1s< 1s< 1s2 s3-4 min
O(n³)< 1s< 1s< 1s< 1s20 s5 hours231 days
O(2^n)< 1s< 1s260 dayshangshangshangshangs
O(n!)< 1shangshangshangshangshangshangs
O(n^n)3-4 minhangshangshangshangshangshangs

维基百科关于算法稳定性的解释

当相等的元素是无法分辨的,比如像是整数,稳定性并不是一个问题。然而,假设以下的数对将要以他们的第一个数字来排序。

(4, 1)  (3, 1)  (3, 7)(5, 6)

在这个状况下,有可能产生两种不同的结果,一个是让相等键值的纪录维持相对的次序,而另外一个则没有:

(3, 1)  (3, 7)  (4, 1)  (5, 6)  (维持次序)
(3, 7)  (3, 1)  (4, 1)  (5, 6) (次序被改变)

想看自己浏览器排序算法的稳定性? 点我

各种排序算法实现有多快?

我们先通过这个在线网站大体测试一下

对一个有 10000 个元素的数组,快速排序 > 归并排序 >>> 插入排序
而且插入排序大于 1s 了。

对于一个只有 10 个元素的数组,插入排序 > 快速排序
这也说明了为什么 chrome 在小于等于 10 个元素的小数组使用插入排序的原因了。

浏览器的实现不同有什么影响

排序算法不稳定有什么影响

举个例子:

某市的机动车牌照拍卖系统,最终中标的规则为:

1、按价格进行倒排序;

2、相同价格则按照竞标顺位(即价格提交时间)进行正排序。

排序若是在前端进行,那么采用快速排序的浏览器中显示的中标者很可能是不符合预期的。

解决办法

Array.prototype.sort 在不同浏览器中的差异和解决办法

大体的思路就是,自己写一个稳定的排序函数,以保持各浏览器的一致性。

工具

1、在线排序算法对比网站
2、排序算法视觉图

扩展阅读

1、快速排序(Quicksort)的Javascript实现
2、JS中可能用得到的全部的排序算法
3、7 种常用的排序算法-可视化
4、深入了解javascript的sort方法
5、JavaScript 排序算法汇总

参考文档

聊聊前端排序的那些事
排序算法
JavaScript排序算法汇总

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值