JavaScript Sort 的一個錯誤用法示例
前不久同事的代碼中出了一個很神奇的問題，大致流程是對一個由對象組成的數(shù)組進行排序，其中屬性 a 用于排序，屬性 b 作為一個優(yōu)選條件，當 b 等于 1 的時候無論 a 值是什么，都排在開頭 。這本是一個很簡單的問題，問題就在于他用兩次 sort 實現(xiàn)在這次排序，先根據(jù) a 的屬性排序，然后再根據(jù) b 的值來排序。問題就出在第二次排序中。
我們想當然的會認為在第一次排序中，數(shù)組已經(jīng)根據(jù) a 的屬性由大到小排序，在第二次中我們只要不去動原數(shù)組的順序就行（一般在方法中寫成返回0或-1），只考慮單獨把 b 等于 1 的元素提到前面去。但是其實這與語言所選用的排序算法有關(guān)，javascript （和一起其他語言）內(nèi)置的 sort 方法采用的是幾種排序算法的集合，有時并不能保證相同元素的位置保持一致。
下面是從 stackoverflow 上面找來的一個例子
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);
});
我們會以為最后元素的值還是從 a 到 t，但實際運行下來的結(jié)果卻是亂序的，這是因為 sort 的算法并沒有保留原數(shù)組的順序，也即 unstable。
那么我們就該盡量避免這種情況發(fā)生，就我同事的例子，將兩次 sort 的邏輯合并在一次中應(yīng)該是個可行的辦法，如果必須分為多次 sort，那么就把原數(shù)組的順序記錄在元素的屬性上把。
相關(guān)文章
今天小編就為大家分享一篇layui自定義工具欄的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
web開發(fā)中不可避免會使用js，為了給頁面良好的瘦身我們一般都會將js代碼放在外部，然后通過src引用，如果web頁面與js采用的編碼不同一就會產(chǎn)生亂碼，接下來與大家分享下解決方法，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要介紹了javascript實現(xiàn)鏈接單選效果的方法,可實現(xiàn)點擊鏈接改變其背景色的功能,同時可禁用對應(yīng)鏈接的跳轉(zhuǎn),需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細介紹了JavaScript事件代理和委托，感興趣的小伙伴們可以參考一下2016-04-04
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對象的屬性賦給各種變量,下面這篇文章主要給大家介紹了關(guān)于JavaScript對象解構(gòu)用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
詳解js模板引擎art template數(shù)組渲染的方法
art-template 是一個簡約、超快的模板引擎。這篇文章主要介紹了詳解js模板引擎art template數(shù)組渲染的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
JavaScript實現(xiàn)MD5加密的六種方式實例
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)MD5加密的六種方式,在JS中可以實現(xiàn)MD5加密算法,可以使用第三方庫或者自己編寫代碼實現(xiàn),需要的朋友可以參考下2023-09-09
微信小程序?qū)W習(4)-系統(tǒng)配置app.json詳解
我們使用app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等。2017-01-01
js如何監(jiān)聽input輸入事件及使用防抖封裝函數(shù)處理方法
這篇文章主要給大家介紹了關(guān)于js如何監(jiān)聽input輸入事件及使用防抖封裝函數(shù)處理方法的相關(guān)資料,最近有一個需求,需要我們實時監(jiān)聽input輸入框中的內(nèi)容,從而帶來更好的用戶體驗,需要的朋友可以參考下2023-07-07
下面小編就為大家?guī)硪黄獪\談JS中的bind方法與函數(shù)柯里化。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08