JS中使用sort結(jié)合localeCompare實(shí)現(xiàn)中文排序?qū)嵗?/h1>

 更新時(shí)間：2014年07月23日 11:09:36   投稿：junjie  

這篇文章主要介紹了JS中使用sort結(jié)合localeCompare實(shí)現(xiàn)中文排序?qū)嵗?重點(diǎn)介紹localeCompare函數(shù),需要的朋友可以參考下

說到表格排序，首先要說的就一定是數(shù)組的排序，因?yàn)閿?shù)組排序是表格排序的基礎(chǔ)。

JavaScript為數(shù)組提供了sort()方法用于表格排序，默認(rèn)情況下該方法會使Array中的數(shù)組按照ASCII碼的順序進(jìn)行排列，JavaScript還為數(shù)組提供了數(shù)組倒序的方法reverse()。

看一下示例：

復(fù)制代碼 代碼如下:

 function sortArray(){
             var arrayTest = ["z",5,2,"a",32,3];
             arrayTest.sort();
             alert(arrayTest.toString());     //output:2,3,32,5,a,z
             arrayTest.reverse();
             alert(arrayTest.toString());    //output:z,a,5,32,3,2
         }
         sortArray();

呵呵，5比32還要大，很明顯這不是我們想要的結(jié)果，剛才已經(jīng)說過sort()方法是按照ASCII碼的順序排序的。

其實(shí)sort()方法還允許帶一個(gè)函數(shù)類型的的參數(shù)，我們可以稱之為比較函數(shù)，當(dāng)該比較函數(shù)又可以接收兩個(gè)參數(shù)，以下該函數(shù)返回值的意義：

復(fù)制代碼 代碼如下:

-1：第一個(gè)參數(shù) 小于 第二個(gè)參數(shù)
0：第一個(gè)參數(shù) 等于 第二個(gè)參數(shù)
1：第一個(gè)參數(shù) 大于 第二個(gè)參數(shù)

復(fù)制代碼 代碼如下:

/**
  * 比較函數(shù)
  * @param {Object} param1 要比較的參數(shù)1
           * @param {Object} param2 要比較的參數(shù)2
           * @return {Number} 如果param1 > param2 返回 1
           *                     如果param1 == param2 返回 0
           *                     如果param1 < param2 返回 -1
           */
          function compareFunc(param1,param2){
             //如果兩個(gè)參數(shù)均為字符串類型
             if(typeof param1 == "string" && typeof param2 == "string"){
                 return param1.localeCompare(param2);
             }
             //如果參數(shù)1為數(shù)字，參數(shù)2為字符串
             if(typeof param1 == "number" && typeof param2 == "string"){
                 return -1;
             }
             //如果參數(shù)1為字符串，參數(shù)2為數(shù)字
             if(typeof param1 == "string" && typeof param2 == "number"){
                 return 1;
             }
             //如果兩個(gè)參數(shù)均為數(shù)字
             if(typeof param1 == "number" && typeof param2 == "number"){
                 if(param1 > param2) return 1;
                 if(param1 == param2) return 0;
                 if(param1 < param2) return -1;
             }
         }

當(dāng)我們執(zhí)行arrayTest.sort(compareFunc)時(shí)我們就得到了正確的結(jié)果。
到這里，我們不得不說明一下localeCompare()方法的用法，該方法是對字符串進(jìn)行排序的方法，只有一個(gè)參數(shù)即要比較的字符串。

具體說明如下:

1、如果String對象按照字母順序排在參數(shù)中的字符串之前，返回負(fù)數(shù)
2、如果String對象按照字符順序排在參數(shù)中的字符串之后，返回正數(shù)
3、如果String對象等于參數(shù)中的字符串返回0

除此之外，localeCompare()方法還有一個(gè)獨(dú)特之處，這個(gè)獨(dú)特之處可以在其方法簽名locale(現(xiàn)場、當(dāng)?shù)?上得以體現(xiàn)，也就是說他的實(shí)現(xiàn)時(shí)按照區(qū)域特性來的，如果在英語體系中，他的實(shí)現(xiàn)可能是按照字符串升序，如果在漢語中，他的實(shí)現(xiàn)則是按照首字母的拼音。

呵呵，這也就是說就算我們在程序中涉及漢字，我們的排序也不回出錯(cuò)。
參考以下程序：

復(fù)制代碼 代碼如下:

var testArray = ["腳","本","之","家"];
         document.write(testArray.sort(
             function compareFunction(param1,param2){
                 return param1.localeCompare(param2);  //output:之,家,本,腳
             }
         ));

您可能感興趣的文章:

• js實(shí)現(xiàn)漢字排序的方法
• JavaScript 給漢字排序?qū)嵗a
• js漢字排序問題 支持中英文混排，兼容各瀏覽器，包括CHROME
• jquery tablesorter.js 支持中文表格排序改進(jìn)
• 基于JS實(shí)現(xiàn)數(shù)字+字母+中文的混合排序方法
• Extjs Gird 支持中文拼音排序?qū)崿F(xiàn)代碼
• javascript對中文按照拼音排序代碼
• tablesorter.js表格排序使用方法(支持中文排序)
• 利用JavaScript對中文（漢字）進(jìn)行排序?qū)嵗斀?/a>

• JS
• sort
• localeCompare
• 中文排序

相關(guān)文章

• 

  javaScript 刪除字符串空格多種方法小結(jié)

  在js中自一些字符串刪除空格的功能，本文章來介紹了字符串刪除功能加利用正則快速替換字符串中所有空格實(shí)現(xiàn)代碼

  2012-10-10
• 

  菜鳥也能搞懂js中typeof與instanceof區(qū)別

  instanceof和typeof是兩個(gè)運(yùn)算符，在程序設(shè)計(jì)中用到，常用來判斷一個(gè)變量是否為空，或者是什么類型的，本文就來介紹一下typeof與instanceof區(qū)別，感興趣的可以了解一下

  2021-09-09
• 

  js使用for循環(huán)及if語句判斷多個(gè)一樣的name

  這篇文章主要介紹了js使用for循環(huán)機(jī)if語句判斷多個(gè)一樣的name,此法比較實(shí)用，需要的朋友可以參考下

  2014-09-09
• 

  全面解析Bootstrap中scrollspy（滾動監(jiān)聽）的使用方法

  這篇文章主要為大家全面解析Bootstrap中scrollspy（滾動偵聽）的使用方法，感興趣的小伙伴們可以參考一下

  2016-06-06
• 

  js實(shí)現(xiàn)頁面導(dǎo)航層級指示效果

  這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)頁面導(dǎo)航層級指示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2020-08-08
• 

  javascript解析json數(shù)據(jù)的3種方式

  這篇文章主要介紹了解析json數(shù)據(jù)的3種方式,需要的朋友可以參考下

  2014-05-05
• 

  微信小程序云開發(fā)之?dāng)?shù)據(jù)庫操作

  這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)之?dāng)?shù)據(jù)庫操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2019-05-05
• 

  純JS打造網(wǎng)頁中checkbox和radio的美化效果

  這篇文章主要介紹了純JS打造網(wǎng)頁中checkbox和radio的美化效果,代碼簡單易懂，非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下

  2016-10-10
• 

  bootstrap表單示例代碼分享

  這篇文章主要為大家詳細(xì)介紹了bootstrap表單示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2017-05-05
• 

  js輪播圖的插件化封裝詳解

  這篇文章主要為大家詳細(xì)介紹了js輪播圖的插件化封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2017-07-07

最新評論