通過V8源碼看一個關(guān)于JS數(shù)組排序的詭異問題
前言
前幾天一個朋友在微信里面問我一個關(guān)于 JS 數(shù)組排序的問題。通過該問題發(fā)現(xiàn)了一些之前沒發(fā)現(xiàn)的內(nèi)容,下面話不多少了,來一起看看詳細(xì)的介紹吧。
原始數(shù)組如下:
var data = [ {value: 4}, {value: 2}, {value: undefined}, {value: undefined}, {value: 1}, {value: undefined}, {value: undefined}, {value: 7}, {value: undefined}, {value: 4} ];
data 是個數(shù)組,數(shù)組的每一項都是一個擁有 value 作為 key 的對象,值為數(shù)字或者 undefined。
data .sort((x, y) => x.value - y.value) .map(x => x.value);
對數(shù)組的 value 進行排序,然后把排完序的數(shù)組進行 flat 處理。得到的結(jié)果如下:
[2, 4, undefined, undefined, 1, undefined, undefined, 7, undefined, 4]
顯然這沒有達到我們的目的。
現(xiàn)在我們修改一下排序,挑戰(zhàn)一下函數(shù)的調(diào)用順序:先對數(shù)組進行扁平化(flat)處理,然后再排序。
data .map(x => x.value) .sort((x, y) => x - y)
這時我們得到的結(jié)果和之前截然不同:
[1, 2, 4, 4, 7, undefined, undefined, undefined, undefined, undefined]
遇到這種情況第一感覺肯定是要去看看 ECMA 規(guī)范,萬一是 JS 引擎的 bug 呢。
在 ES6 規(guī)范 22.1.3.24 節(jié)寫道:
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.
簡單翻譯一下就是:第二個參數(shù) comparefn 返回一個數(shù)字,并且不是 NaN。一個注意事項是,對于參與比較的兩個數(shù) a 小于 b、a 等于 b、a 大于 b 這三種情況必須有一個為 true。
所以嚴(yán)格意義上來說,這段代碼是有 bug 的,因為比較的結(jié)果出現(xiàn)了 NaN。
在 MDN 文檔上還有一個細(xì)節(jié):
如果 comparefn(a, b) 等于 0, a 和 b 的相對位置不變。備注:ECMAScript 標(biāo)準(zhǔn)并不保證這一行為,而且也不是所有瀏覽器都會遵守。
翻譯成編程術(shù)語就是:sort 排序算法是不穩(wěn)定排序。
其實我們最疑惑的問題上,上面兩行代碼為什么會輸出不同的結(jié)果。我們只能通過查看 V8 源碼去找答案了。
V8 對數(shù)組排序是這樣進行的:
如果沒有定義 comparefn 參數(shù),則生成一個(高能預(yù)警,有坑?。?/p>
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 為了性能考慮,當(dāng)數(shù)組元素個數(shù)少于 10 個時,使用插入排序;大于 10 個時使用快速排序。
后面還定義了快速排序函數(shù)和其它幾個函數(shù),我就不一一列出了。
函數(shù)都定義完成后,開始正式的排序操作:
// %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。排序之前會把數(shù)組里面的 undefined 移動到最后。因此第二個排序算法會把 undefined 移動到最后,然后對剩余的數(shù)據(jù) [4,2,1,7,4] 進行排序。
而在第一種寫法時,數(shù)組的每一項都是一個 Object,然后最 Object 調(diào)用 x.value - y.value 進行計算,當(dāng) undefined 參與運算時比較的結(jié)果是 NaN。
當(dāng)返回 NaN 時 V8 怎么處理的呢?我前面標(biāo)注過,再貼一次:
var order = comparefn(tmp, element); if (order > 0) { // <---- 這里 a[j + 1] = tmp; } else { break; }
NaN > 0 為 false,執(zhí)行了 else 分支代碼。
思考題,以下代碼的結(jié)果:
[1, 23, 2, 3].sort()
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
JS根據(jù)key值獲取URL中的參數(shù)值及把URL的參數(shù)轉(zhuǎn)換成json對象
本篇文章主要圍繞js url 參數(shù)值展開話題,js根據(jù)key值獲取url中的參數(shù)值,接著把url的參數(shù)轉(zhuǎn)換成json,感興趣的朋友一起來學(xué)習(xí)吧,本文寫的不好地方還望多多指出批評建議2015-08-08詳談構(gòu)造函數(shù)加括號與不加括號的區(qū)別
下面小編就為大家?guī)硪黄斦剺?gòu)造函數(shù)加括號與不加括號的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10JS跳出循環(huán)的5種方法總結(jié)(return、break、continue、throw等)
想必大家都遇到過循環(huán)遍歷時遇到滿足條件的時候就跳出循環(huán)這樣的需求,于是整理了一篇各種循環(huán)是如何結(jié)束的,這篇文章主要給大家介紹了關(guān)于JS跳出循環(huán)的5種方法,分別是return、break、continue、throw等的相關(guān)資料,需要的朋友可以參考下2024-05-05js form表單input框限制20個字符,10個漢字代碼實例
這篇文章主要介紹了js form表單input框限制20個字符,10個漢字,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04利用Javascript仿Excel的數(shù)據(jù)透視分析功能
這篇文章給大家介紹了如何利用Javascript實現(xiàn)類似Excel的數(shù)據(jù)透視分析功能,感興趣的朋友們可以參考借鑒,下面來一起看看吧。2016-09-09JavaScript實現(xiàn)多態(tài)和繼承的封裝操作示例
這篇文章主要介紹了JavaScript實現(xiàn)多態(tài)和繼承的封裝操作,結(jié)合實例形式分析了javascript中多態(tài)與繼承的實現(xiàn)及封裝相關(guān)操作技巧,需要的朋友可以參考下2018-08-08