JavaScript array.sort()

JavaScript array.sort() 方法可以用來重新排序 JavaScript Array 中的陣列元素,並回傳一個排序完成的新陣列,一般來說可以分為將英文字母或單字重新排序或者是把數字元素重新排列,且 sort 的方法僅會將原本的陣列重新排序,而不會另外產生一個新陣列,也就是說回傳的結果陣列就是原本的那個陣列,JavaScript array.sort 方法是內建函式,不需要額外安裝即可調用,且幾乎所有主流的瀏覽器都支援 JavaScript array.sort 方法。

JavaScript array.sort() 基本語法

array.sort( sort function or method )


將想要處理的 Array 後面加上 sort 即可,至於小括號內的"sort function or method"則是選擇性項目,用來規定要以什麼方式做排序,如果沒有要使用,可以空著,但通常在數字排序上,會加入條件,讓數字比大小,否則 JavaScript sort 函式會以頭字母的編碼排序。

JavaScript array.sort() 範例一、排序英文字母與英文單字
<script type="text/javascript">
 var Arr = ['Father','Mother','Brother'];
 document.write('排序前: '+Arr+'<br>');
 NewArr=Arr.sort();
 document.write('排序後: '+NewArr);
</script>
以上範例輸出結果如



第一次 document.write 輸出了未 sort 的原始陣列,僅接著透過 JavaScript sort 函式將 Arr 重新排序後,回傳 NewArr 給我們,再透過 document.write 輸出截然不同的結果,在這裡我們可以清楚的看到 sort 函式將陣列元素的第一個字母拿出來做比較,這個部分比較沒有問題,但如果是陣列元素都是數字的話,會是怎麼樣的結果呢?

JavaScript array.sort() 範例二、排序數字
<script type="text/javascript">
 var Arr = ['50','300','800'];
 document.write('原始陣列排序: '+Arr+'<br>');
 NewArr=Arr.sort(); document.write('第一次排序後: '+NewArr+'<br>');
 function sortFunction(x,y){return x-y;}
 NewArr=Arr.sort(sortFunction);
 document.write('第二次排序後: '+NewArr);
</script>
以上範例輸出結果如



這個範例就稍微複雜一點,因為 JavaScript sort 函式預設只會將開頭字母或字元拿出來做編碼排序,當遇到數字也是一樣的處理方式,所以在這個範例中,我們準備了兩個不同的排序方式,第一次排序是根據 sort 原本的運作原理,排序出來的結果與數字的大小並沒有關係,為了要能夠創造出數字比大小的效果,我們再準備了一個 sortFunction 來給 sort 函式使用(請注意紅色標記的地方),這樣的技巧就可以將陣列元素中的數字做大小的比較,再重新排列出來,所以第二次排序後的結果就有根據數字大小囉!

與 JavaScript array.sort 相關的主題研究
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012