JavaScript Sort 的一個(gè)錯(cuò)誤用法示例
前不久同事的代碼中出了一個(gè)很神奇的問題，大致流程是對(duì)一個(gè)由對(duì)象組成的數(shù)組進(jìn)行排序，其中屬性 a 用于排序，屬性 b 作為一個(gè)優(yōu)選條件，當(dāng) b 等于 1 的時(shí)候無論 a 值是什么，都排在開頭 。這本是一個(gè)很簡(jiǎn)單的問題，問題就在于他用兩次 sort 實(shí)現(xiàn)在這次排序，先根據(jù) a 的屬性排序，然后再根據(jù) b 的值來排序。問題就出在第二次排序中。
我們想當(dāng)然的會(huì)認(rèn)為在第一次排序中，數(shù)組已經(jīng)根據(jù) a 的屬性由大到小排序，在第二次中我們只要不去動(dòng)原數(shù)組的順序就行（一般在方法中寫成返回0或-1），只考慮單獨(dú)把 b 等于 1 的元素提到前面去。但是其實(shí)這與語言所選用的排序算法有關(guān)，javascript （和一起其他語言）內(nèi)置的 sort 方法采用的是幾種排序算法的集合，有時(shí)并不能保證相同元素的位置保持一致。
下面是從 stackoverflow 上面找來的一個(gè)例子
var arrayToSort = [
{name: 'a', strength: 1}, {name: 'b', strength: 1}, {name: 'c', strength: 1}, {name: 'd', strength: 1},
{name: 'e', strength: 1}, {name: 'f', strength: 1}, {name: 'g', strength: 1}, {name: 'h', strength: 1},
{name: 'i', strength: 1}, {name: 'j', strength: 1}, {name: 'k', strength: 1}, {name: 'l', strength: 1},
{name: 'm', strength: 1}, {name: 'n', strength: 1}, {name: 'o', strength: 1}, {name: 'p', strength: 1},
{name: 'q', strength: 1}, {name: 'r', strength: 1}, {name: 's', strength: 1}, {name: 't', strength: 1}
];
arrayToSort.sort(function (a, b) {
return b.strength - a.strength;
});
arrayToSort.forEach(function (element) {
console.log(element.name);
});
我們會(huì)以為最后元素的值還是從 a 到 t，但實(shí)際運(yùn)行下來的結(jié)果卻是亂序的，這是因?yàn)?sort 的算法并沒有保留原數(shù)組的順序，也即 unstable。
那么我們就該盡量避免這種情況發(fā)生，就我同事的例子，將兩次 sort 的邏輯合并在一次中應(yīng)該是個(gè)可行的辦法，如果必須分為多次 sort，那么就把原數(shù)組的順序記錄在元素的屬性上把。
相關(guān)文章
這篇文章主要介紹了JS查找數(shù)組中重復(fù)元素的方法,結(jié)合具體實(shí)例形式對(duì)比分析了javascript針對(duì)數(shù)組的遍歷、判斷、排序等相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
Webpack提取頁(yè)面公共資源的實(shí)現(xiàn)
本文主要介紹了Webpack提取頁(yè)面公共資源的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
在ES6之前我們都使用單引號(hào)或者雙引號(hào)來包裹字符串,當(dāng)我們想要在字符串中加入變量時(shí),不能直接寫在字符串里,而是需要通過字符串拼接的方式來往字符串中加入變量,這篇文章主要給大家介紹了關(guān)于JavaScript模板字符串用法的相關(guān)資料,需要的朋友可以參考下2022-11-11
詳解前端如何對(duì)超大量數(shù)據(jù)進(jìn)行渲染
這篇文章主要為大家詳細(xì)介紹了前端如何對(duì)超大量數(shù)據(jù)進(jìn)行渲染,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
JavaScript實(shí)現(xiàn)命名空間的多種方式
隨著項(xiàng)目規(guī)模的不斷擴(kuò)大,如何有效地組織和管理代碼成為一個(gè)重要的課題,命名空間是解決這一問題的有效手段之一,它可以幫助我們避免全局變量污染,減少變量名沖突的問題,從而提高代碼的可維護(hù)性和模塊化程度,本文介紹了JavaScript實(shí)現(xiàn)命名空間的多種方式2024-11-11
本文主要介紹了JavaScript中setTimeout()的具體用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了BootStrap 表單控件之單選按鈕水平排列的實(shí)現(xiàn)代碼，需要的朋友可以參考下2017-05-05
Electron?自定義窗口桌面時(shí)鐘實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了Electron?自定義窗口桌面時(shí)鐘實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
JavaScript的對(duì)象基礎(chǔ) 本篇主要講解本地對(duì)象Array的各種方法。2009-12-12
javascript關(guān)于open.window子頁(yè)面執(zhí)行完成后刷新父頁(yè)面的問題分析
這篇文章主要介紹了javascript關(guān)于open.window子頁(yè)面執(zhí)行完成后刷新父頁(yè)面的問題,實(shí)例分析了javascript操作子頁(yè)面的執(zhí)行與父頁(yè)面的刷新技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04