前几天一个朋友在微信里面问我一个关于 JS 数组排序的问题。java
原始数组以下:算法
var data = [ {value: 4}, {value: 2}, {value: undefined}, {value: undefined}, {value: 1}, {value: undefined}, {value: undefined}, {value: 7}, {value: undefined}, {value: 4} ];
data
是个数组,数组的每一项都是一个拥有 value
做为 key 的对象,值为数字或者 undefined
。编程
data .sort((x, y) => x.value - y.value) .map(x => x.value);
对数组的 value
进行排序,而后把排完序的数组进行 flat 处理。获得的结果以下:数组
[2, 4, undefined, undefined, 1, undefined, undefined, 7, undefined, 4]
显然这没有达到咱们的目的。浏览器
如今咱们修改一下排序,挑战一下函数的调用顺序:先对数组进行扁平化(flat)处理,而后再排序。微信
data .map(x => x.value) .sort((x, y) => x - y)
这时咱们获得的结果和以前大相径庭:函数
[1, 2, 4, 4, 7, undefined, undefined, undefined, undefined, undefined]
遇到这种状况第一感受确定是要去看看 ECMA 规范,万一是 JS 引擎的 bug 呢。性能
在 ES6 规范 22.1.3.24 节写道:this
Calling
comparefn(a,b)
always returns the same valuev
when given a specific pair of valuesa
andb
as its two arguments. Furthermore,Type(v)
isNumber
, andv
is notNaN
. Note that this implies that exactly one ofa < b
,a = b
, anda > b
will betrue
for a given pair ofa
andb
.spa
简单翻译一下就是:第二个参数 comparefn
返回一个数字,而且不是 NaN
。一个注意事项是,对于参与比较的两个数 a
小于 b
、a
等于 b
、a
大于 b
这三种状况必须有一个为 true
。
因此严格意义上来讲,这段代码是有 bug 的,由于比较的结果出现了 NaN
。
在 MDN 文档上还有一个细节:
若是
comparefn(a, b)
等于0
,a
和b
的相对位置不变。备注:ECMAScript 标准并不保证这一行为,并且也不是全部浏览器都会遵照。
翻译成编程术语就是:sort
排序算法是不稳定排序。
其实咱们最疑惑的问题上,上面两行代码为何会输出不一样的结果。咱们只能经过查看 V8 源码去找答案了。
V8 对数组排序是这样进行的:
若是没有定义 comparefn 参数,则生成一个(高能预警,有坑啊):
comparefn = function (x, y) { if (x === y) return 0; if (%_IsSmi(x) && %_IsSmi(y)) { return %SmiLexicographicCompare(x, y); } x = TO_STRING(x); // <----- 坑 y = TO_STRING(y); // <----- 坑 if (x == y) return 0; else return x < y ? -1 : 1; };
而后定义了一个插入排序算法:
function InsertionSort(a, from, to) { for (var i = from + 1; i < to; i++) { var element = a[i]; for (var j = i - 1; j >= from; j--) { var tmp = a[j]; var order = comparefn(tmp, element); if (order > 0) { // <---- 注意这里 a[j + 1] = tmp; } else { break; } } a[j + 1] = element; }
为何是插入排序?V8 为了性能考虑,当数组元素个数少于 10 个时,使用插入排序;大于 10 个时使用快速排序。
后面还定义了快速排序函数和其它几个函数,我就不一一列出了。
函数都定义完成后,开始正式的排序操做:
// %RemoveArrayHoles returns -1 if fast removal is not supported. var num_non_undefined = %RemoveArrayHoles(array, length); if (num_non_undefined == -1) { // There were indexed accessors in the array. // Move array holes and undefineds to the end using a Javascript function // that is safe in the presence of accessors. num_non_undefined = SafeRemoveArrayHoles(array); }
中间的注释:Move array holes and undefineds to the end using a Javascript function。排序以前会把数组里面的 undefined
移动到最后。所以第二个排序算法会把 undefined
移动到最后,而后对剩余的数据 [4,2,1,7,4]
进行排序。
而在第一种写法时,数组的每一项都是一个 Object,而后最 Object 调用 x.value - y.value
进行计算,当 undefined
参与运算时比较的结果是 NaN
。当返回 NaN
时 V8 怎么处理的呢?我前面标注过,再贴一次:
var order = comparefn(tmp, element); if (order > 0) { // <---- 这里 a[j + 1] = tmp; } else { break; }
NaN > 0
为 false
,执行了 else
分支代码。
思考题,如下代码的结果:
[1, 23, 2, 3].sort()
扫码二维码关注个人公众号