通过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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 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中进行身份认证
2006/10/09 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
python判断字符串是否包含子字符串的方法
2015/03/24 Python
Python字符串处理实现单词反转
2017/06/14 Python
Python 列表理解及使用方法
2017/10/27 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python中bytes和str类型的区别
2019/10/21 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
写求职信要注意什么问题
2014/04/12 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
辩护意见书
2015/06/04 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
python爬虫--selenium模块
2021/03/31 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android