通过V8源码看一个关于JS数组排序的诡异问题


Posted in Javascript onAugust 14, 2017

前言

前几天一个朋友在微信里面问我一个关于 JS 数组排序的问题。通过该问题发现了一些之前没发现的内容,下面话不多少了,来一起看看详细的介绍吧。

原始数组如下:

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 节写道:

Calling comparefn(a,b) always returns the same value v when given a specific pair of values a and b as its two arguments. Furthermore, Type(v) is Number, and v is not NaN. Note that this implies that exactly one of a < b, a = b, and a > b will be true for a given pair of a and b.

简单翻译一下就是:第二个参数 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()

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
node.js中的console用法总结
Dec 15 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 #Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 #Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 #Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 #Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 #Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 #Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 #jQuery
You might like
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
PHP7新特性
2021/03/09 PHP
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
Jquery动态添加输入框的方法
2015/05/29 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
Python中的yield浅析
2014/06/16 Python
复习Python中的字符串知识点
2015/04/14 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
致全体运动员广播稿
2014/02/01 职场文书
护士个人年终总结
2015/02/13 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js