DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript數組的排序:sort()方法和reverse()方法
Javascript數組的排序:sort()方法和reverse()方法
編輯:關於JavaScript     

JavaScript提供了sort()方法和reverse()方法,使得我們可以簡單的對數組進行排序操作和逆序操作。其中:

1.JavaScript的sort()中如果沒有指定比較函數,則默認會按照字符的編碼順序進行升序排序。也就是說如果我們想要對數值進行排序得到的不一定是我們想要的結果。

2.Javascript的reverse()將數組中的元素逆序。

先看看上面的第一點,如果有一個數組arr=[1,6,3,7,9],使用arr.sort()後,數組的順序為1,3,6,7,9,得到了我們想要的結果。

再看看下面的一個數組排序:arr=[3,1,16,34,30],如果執行arr.sort()後是不是還是會得到我們想要的1,3,16,30,34呢?

執行後我們發現結果為:1,16,3,30,34,顯然結果不是我們想要的。實際上,sort方法將上面的數值按照字符串方式排序了,也就是說和數組arr1=['3','1','16','34','30']的排序結果一致。

代碼如下:

    var arr=[3,1,16,34,30];
    var arr1=['3','1','16','34','30'];
    alert(arr.sort());         // 1,16,3,30,34
    alert(arr1.sort());        // 1,16,3,30,34


那麼如果我們想要得到正確的結果:1,3,16,30,34 應該怎麼去做呢?

查詢javascript手冊,手冊中的說明如下:

====================================

定義和用法

sort() 方法用於對數組的元素進行排序。

語法

arrayObject.sort(sortby)
參數 描述 sortby 可選。規定排序順序。必須是函數。

 

返回值

對數組的引用。請注意,數組在原數組上進行排序,不生成副本。

說明

如果調用該方法時沒有使用參數,將按字母順序對數組中的元素進行排序,說得更精確點,是按照字符編碼的順序進行排序。要實現這一點,首先應把數組的元素都轉換成字符串(如有必要),以便進行比較。

如果想按照其他標准進行排序,就需要提供比較函數,該函數要比較兩個值,然後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b,其返回值如下:

  • 若 a 小於 b,在排序後的數組中 a 應該出現在 b 之前,則返回一個小於 0 的值。
  • 若 a 等於 b,則返回 0。
  • 若 a 大於 b,則返回一個大於 0 的值。

=====================================

由以上說明我們可以了解到,如果要按照數值進行排序,那麼就要提供一個比較函數。一般常見的比較函數如下:

function sortArr(m,n){
        if(m<n)
            return -1;//小於,返回-1
        else if(m>n)
            return 1;//大於,返回1
        else return 0;//等於,返回0
    }
精簡後可以寫成如下兩種形式:
function sortArr(m,n){
    return m-n;
}
function sortArr(m,n){
    return m>n?1:(m<n?-1:0);
}

然後執行arr.sort(sortArr),發現可以得到我們想要的結果:1,3,16,30,34.也就說將數組按照整型數值進行了升序排序。
這樣的話新的問題就來了,如果我們想要對數組進行降序排序怎麼做呢?

有一思路就是改變sortArr函數的返回值,如果m<n時返回正直,m>n時返回負值,m=n時返回0。這樣就可以了。

你可以寫兩個函數,一個升序,一個降序。然後根據不同的需要調用不同的函數就可以了。

此外我們還可以調用上面提到的另一個函數reverse()來輕松的實現,當我們進行升序排序後,然後數組在調用reverse()方法將數組逆序,這樣就可以實現數組的降序排序了。

代碼如下:

arr.sort(sortArr).reverse();


總結:這裡主要介紹了Javascript中數組的排序,由於默認按照字符串排序,要實現按照其他形式的規則排序就要自己定義比較函數了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved