JavaScript之排序函數(shù)_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
排序算法
排序也是在程序中經(jīng)常用到的算法。無(wú)論使用冒泡排序還是快速排序，排序的核心是比較兩個(gè)元素的大小。如果是數(shù)字，我們可以直接比較，但如果是字符串或者兩個(gè)對(duì)象呢？直接比較數(shù)學(xué)上的大小是沒有意義的，因此，比較的過(guò)程必須通過(guò)函數(shù)抽象出來(lái)。通常規(guī)定，對(duì)于兩個(gè)元素x和y，如果認(rèn)為x < y，則返回-1，如果認(rèn)為x == y，則返回0，如果認(rèn)為x > y，則返回1，這樣，排序算法就不用關(guān)心具體的比較過(guò)程，而是根據(jù)比較結(jié)果直接排序。
JavaScript的Array的sort()方法就是用于排序的，但是排序結(jié)果可能讓你大吃一驚：
// 看上去正常的結(jié)果: ['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft']; // apple排在了最后: ['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple'] // 無(wú)法理解的結(jié)果: [10, 20, 1, 2].sort(); // [1, 10, 2, 20]
第二個(gè)排序把apple排在了最后，是因?yàn)樽址鶕?jù)ASCII碼進(jìn)行排序，而小寫字母a的ASCII碼在大寫字母之后。
第三個(gè)排序結(jié)果是什么鬼？簡(jiǎn)單的數(shù)字排序都能錯(cuò)？
這是因?yàn)?code>Array的sort()方法默認(rèn)把所有元素先轉(zhuǎn)換為String再排序，結(jié)果'10'排在了'2'的前面，因?yàn)樽址?1'比字符'2'的ASCII碼小。
如果不知道sort()方法的默認(rèn)排序規(guī)則，直接對(duì)數(shù)字排序，絕對(duì)栽進(jìn)坑里！
幸運(yùn)的是，sort()方法也是一個(gè)高階函數(shù)，它還可以接收一個(gè)比較函數(shù)來(lái)實(shí)現(xiàn)自定義的排序。
要按數(shù)字大小排序，我們可以這么寫：
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
}); // [1, 2, 10, 20]
如果要倒序排序，我們可以把大的數(shù)放前面：
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
if (x < y) {
return 1;
}
if (x > y) {
return -1;
}
return 0;
}); // [20, 10, 2, 1]
默認(rèn)情況下，對(duì)字符串排序，是按照ASCII的大小比較的，現(xiàn)在，我們提出排序應(yīng)該忽略大小寫，按照字母序排序。要實(shí)現(xiàn)這個(gè)算法，不必對(duì)現(xiàn)有代碼大加改動(dòng)，只要我們能定義出忽略大小寫的比較算法就可以：
var arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function (s1, s2) {
x1 = s1.toUpperCase();
x2 = s2.toUpperCase();
if (x1 < x2) {
return -1;
}
if (x1 > x2) {
return 1;
}
return 0;
}); // ['apple', 'Google', 'Microsoft']
忽略大小寫來(lái)比較兩個(gè)字符串，實(shí)際上就是先把字符串都變成大寫（或者都變成小寫），再比較。
從上述例子可以看出，高階函數(shù)的抽象能力是非常強(qiáng)大的，而且，核心代碼可以保持得非常簡(jiǎn)潔。
最后友情提示，sort()方法會(huì)直接對(duì)Array進(jìn)行修改，它返回的結(jié)果仍是當(dāng)前Array：
var a1 = ['B', 'A', 'C']; var a2 = a1.sort(); a1; // ['A', 'B', 'C'] a2; // ['A', 'B', 'C'] a1 === a2; // true, a1和a2是同一對(duì)象
相關(guān)文章
JavaScript圖片的Base64編碼以及轉(zhuǎn)換詳解
現(xiàn)在網(wǎng)站為了提升用戶的瀏覽體驗(yàn)越來(lái)越多的使用了圖片,而這些圖片通常以 Base64 的形式存儲(chǔ)和加載,下面這篇文章主要給大家介紹了關(guān)于JavaScript圖片的Base64編碼以及轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2022-07-07
JS實(shí)現(xiàn)遍歷不規(guī)則多維數(shù)組的方法
這篇文章主要介紹了JS實(shí)現(xiàn)遍歷不規(guī)則多維數(shù)組的方法,涉及javascript數(shù)組遞歸遍歷相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2018-03-03
JS圖片左右無(wú)縫隙滾動(dòng)的實(shí)現(xiàn)(兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn))
下面小編就為大家?guī)?lái)一篇JS圖片左右無(wú)縫隙滾動(dòng)的實(shí)現(xiàn)(兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn))。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)吸頂特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了JavaScript中Pinia是否可以代替Vuex，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
JS實(shí)現(xiàn)可調(diào)整倒計(jì)時(shí)間代碼分享
這篇文章主要介紹了JS實(shí)現(xiàn)可調(diào)整倒計(jì)時(shí)間代碼，效果很酷炫，也很具有實(shí)用價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
JS實(shí)現(xiàn)的DIV塊來(lái)回滾動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的DIV塊來(lái)回滾動(dòng)效果,結(jié)合實(shí)例形式分析了JS通過(guò)時(shí)間函數(shù)定時(shí)觸發(fā)動(dòng)態(tài)改變頁(yè)面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了js獲取客戶端網(wǎng)卡的IP地址、MAC地址的方法,需要的朋友可以參考下2014-03-03
細(xì)說(shuō)JS數(shù)組遍歷的一些細(xì)節(jié)及實(shí)現(xiàn)
本文主要介紹了細(xì)說(shuō)JS數(shù)組遍歷的一些細(xì)節(jié)及實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
至2023年最好用的兼容多瀏覽器的原生js復(fù)制函數(shù)copyText
因?yàn)楹笈_(tái)需要增加一些復(fù)制一些內(nèi)容非表單中內(nèi)容，那么下面這個(gè)函數(shù)就非常的好用了，其實(shí)也是利用了表單的數(shù)據(jù)權(quán)限比較容易突破，下面是具體的實(shí)現(xiàn)函數(shù)，大家可以拿走2023-05-05