JS 陣列排序範例

馬老師離開待了約十幾年的教學界,目前在外商科技公司擔任Senior Consultant的工作,原因當然很多,未來有空再慢慢發文章分享,剛好最近有點時間,怕以後忘記,把最近專案中用到的一些程式筆記下來,如果大家有需要,也可以參考使用,這一篇是關於Javascript陣列排序的部分。

通常若有較多的內容需要儲存,變數就沒有陣列來的好用,所以陣列是拿來儲存大量的資料時所使用的,且儲存在裡面的資料,還可以選擇經過排序之後再呈現至畫面上,例如:

var name = ["stanley", "jack", "anita" , "mary"];

name.sort() //依照字母排序
console.log(name); // 輸出 ["anita", "jack", "mary", "stanley"]

names.reverse() //反轉陣列內容
console.log(name); //輸出 ["stanley", "mary", "jack", "anita"]

但若我們同時有多個陣列,但希望以其中之一的內容排序時,也可以同步更新到另外一個陣列,該如何處理呢?可以參考以下的方式:

var name = ["stanley", "jack", "anita" , "mary"];
var gender = ["male" , "male" , "female" , "female"];
var score = [30, 10, 40 , 80];
var ID = ["S1" , "S2" , "S3" , "S4"];

console.log("name : " + name + "; score : " + score + "; gender : " + gender + "; ID : " + ID);
/*
排序前
name : stanley,jack,anita,mary;
score : 30,10,40,80;
gender : male,male,female,female;
ID : S1,S2,S3,S4;
*/

var list = [];
for (var i = 0; i < name.length; i++){
  list.push({
    'name': name[i],
    'score': score[i],
    'gender': gender[i],
    'ID': ID[i]
  });
}

list.sort(function(a, b) {
  return ((a.name < b.name) ? -1 : ((a.name == b.name) ? 0 : 1));
});

for (var i = 0; i < list.length; i++) {
  name[i] = list[i].name;
  score[i] = list[i].score;
  gender[i] = list[i].gender;
  ID[i] = list[i].ID;
}

console.log("name : " + name + "; score : " + score + "; gender : " + gender + "; ID : " + ID);
/*
排序後
name : anita,jack,mary,stanley;
score : 40,10,80,30;
gender : female,male,female,male;
ID : S3,S2,S4,S1;
*/

若是希望按照分數排序,則可以將sort function 修改為下:

//score 由小到大
list.sort(function(a, b) {
  return a.score - b.score
});

//score 由大到小
list.sort(function(a, b) {
  return b.score - a.score
});

補充:

上述的排序內容均以英文和數字為主,若是遇到中文可使用localeCompare進行,而排序的方式是漢語拼音順序,以下為範例:

var arr = ["二","五","四","一","三"];
//漢語拼音:一[yi], 二[er], 三[san], 四[si], 五[wu]
console.log("排序前:" + arr); // 排序前:二,五,四,一,三
arr.sort(function(a,b){
	return a.localeCompare(b, 'zh'); //排序後:二,三,四,五,一
});
console.log("排序後:" + arr); 

var arr = ["中文","英語","法國話", "京片子", "中國"];
//中文[zhong wen], 英語[ying yu], 法國話[fa guo hua], 京片子[jing pian zi], 中國[zhong guo]
console.log("排序前:" + arr); //排序前:中文,英語,法國話,京片子,中國
arr.sort(function(a,b){
	return a.localeCompare(b, 'zh');
});
console.log("排序後:" + arr); //排序後:法國話,京片子,英語,中國,中文


var arr = ["中文","英语","法国话", "京片子", "中国"];
console.log("排序前:" + arr); //排序前:中文,英语,法国话,京片子,中国
arr.sort(function(a,b){
	return a.localeCompare(b, 'zh');
});
console.log("排序後:" + arr); //排序後:法国话,京片子,英语,中国,中文

You may also like...

11,272 Responses

  1. сервис центры бытовой техники самара сервисные центры в самаре

  2. I like reading through an article that will make people think. Also, thanks for allowing for me to comment.

  3. Ogdgna表示:

    buy mobic 7.5mg for sale – buy mobic 7.5mg for sale buy toradol pills for sale

  4. After looking over a number of the blog posts on your blog, I truly appreciate your way of blogging. I saved as a favorite it to my bookmark webpage list and will be checking back soon. Please visit my web site too and tell me how you feel.

  5. Normanfer表示:

    farmacias online seguras: farmacia 24 horas – farmacia online envГ­o gratis

  6. DouglasHoapy表示:

    1xBet
    1xBet frequently releases new promo codes that provide users with updated bonuses and promotions. These codes can include anything from free bets to deposit matches and are available to both new and existing users.

  7. ccnnews.kr表示:

    What Nespresso Mini Coffee Machine Experts Want You To Know coffee
    Machines Compatible with nespresso pods (ccnnews.kr)

  8. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: сервис центры бытовой техники пермь
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  9. Best Buttplug表示:

    Are Butt Plug For Sale As Important As Everyone Says?
    Best Buttplug

  10. Если вы искали где отремонтировать сломаную технику, обратите внимание – профи услуги

  11. Профессиональный сервисный центр по ремонту кнаручных часов от советских до швейцарских в Москве.
    Мы предлагаем: срочный ремонт часов
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  12. AoolPaish表示:

    A diet rich in fat and red meat may increase disease risk.
    FDA launching campaign to warn consumers of dangers in buying online ativan pharmacy now from online pharmacies if you’d like incredible offers
    Ebola stands out because of the rapidity with which it comes on, the frequency of death, the hemorrhagic symptoms.

  13. AmddPaish表示:

    Determining the type of herpes 1 or 2 can also help to predict the likelihood of future recurrences, given that type 2 recurs more frequently than type 1 see ‘Likelihood of recurrence’ above.
    Many replace their trip to the pharmacy by buying publix pharmacy hours will be right online.
    This involves uncomfortable pressure, squeezing, fullness, or pain in the center or left side of the chest that can be mild or strong.

  14. WilliamMit表示:

    オンラインカジノcasino-xの特長の一つは、登録が非常に簡単であることです。プロセス全体は数分で完了します。メールアドレスを入力し、パスワードを設定するだけで、日本で最も人気のあるオンラインカジノのメンバーになれます!瞬時にカジノエックス 登録 が完了し、新規プレイヤーはすぐにエキサイティングなゲームと感動的な体験に飛び込むことができます。 http://www.vbworldcup.jp/2007/en/women/schedule/

  15. Scottgoomb表示:

    Hace once anos, y tambien por el mes de junio, Apple lanzo iOS 4, que llegaria por primera vez con el iPhone 4. Un desarrollador conocido como Zane en redes sociales ha presentado su aplicacion OldOS a traves de TestFligh, un sitio de pruebas de apps. Aunque, eso si, por ahora se trata tan solo de una beta. Obtenga mas informacion aqui https://www.elespanol.com/omicrono/software/20210613/viaje-pasado-ios-revive-iphone-gracias-aplicacion/588192272_0.html

  16. Normanfer表示:

    farmacia barata: cialis en Espana sin receta contrareembolso – farmacia online 24 horas

  17. WilliamMit表示:

    カジノエックスは、日本のプレイヤーにも有効なキュラソーのライセンスに基づいて運営されており、ゲームの安全性と公平性、そして個人情報の完全な機密性が保証されています。すべてのプレイヤーデータは最新の暗号化プロトコルで保護されており、ゲームの結果は独立した監査会社によって確認されています。オンラインカジノcasino xでは、公正さと安全性を気にせずに安心してプレイできます。Casino-Xは、日本のプレイヤーの間で高い評価を得ており、それが安全で成功するゲーム体験の鍵となっています! カジノx 登録方法

  18. Scottgoomb表示:

    Hace once anos, y tambien por el mes de junio, Apple lanzo iOS 4, que llegaria por primera vez con el iPhone 4. Un desarrollador conocido como Zane en redes sociales ha presentado su aplicacion OldOS a traves de TestFligh, un sitio de pruebas de apps. Aunque, eso si, por ahora se trata tan solo de una beta. Lea mas en el enlace https://www.elespanol.com/omicrono/software/20210613/viaje-pasado-ios-revive-iphone-gracias-aplicacion/588192272_0.html

  19. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: ремонт крупногабаритной техники в перми
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  20. Five Killer Quora Answers To Steel Anal Butt Plugs anal butt Plugs

  21. LesliePag表示:

    דירות דיסקרטיות בבאר שבע, תוכל לעשות זאת בקלי המתמקד בפינוק הגבר ומתן מענה מספק לכל הצרכים של הגבר. כל גבר צריך את זה, מהחייל עם פרטנר אחר לערב אחד. גם במקרים אלו ליהנות מכל זה, כל מה שאתה צריך זה לבחור את היפיפייה שהכי מוצאת חן בעיניך. נערות ליווי נערת ליווי פרטית – הסיפור המקראי על בחורה מינית הראשונה

  22. Ricardomam表示:

    An app called Old OS (via The Verge) recreates the iOS 4 experience on a new iPhone. An open source project created by 18-year old developer Zane, OldOS uses SwiftUI to create a near pixel-perfect iOS4 experience, down to such details as the unlock slider and original wallpapers. It also brings back the original look of many iOS apps, including Photos, Maps, Safari, and Notes. Read more here https://in.mashable.com/tech/22935/oldos-app-lets-you-pretend-youre-still-using-an-iphone-3g

  23. Can I just say what a relief to uncover someone that actually understands what they’re talking about on the net. You certainly understand how to bring a problem to light and make it important. A lot more people have to look at this and understand this side of the story. It’s surprising you are not more popular given that you definitely have the gift.

  24. Ricardomam表示:

    An app called Old OS (via The Verge) recreates the iOS 4 experience on a new iPhone. An open source project created by 18-year old developer Zane, OldOS uses SwiftUI to create a near pixel-perfect iOS4 experience, down to such details as the unlock slider and original wallpapers. It also brings back the original look of many iOS apps, including Photos, Maps, Safari, and Notes. Read more https://in.mashable.com/tech/22935/oldos-app-lets-you-pretend-youre-still-using-an-iphone-3g

  25. Your clarity is commendable.오피

  26. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: сервис центры бытовой техники нижний новгород
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  27. LesliePag表示:

    תקריות של גברים שאינם מצליחים לספק את הצרכים המיניים שלהם. נערות ליווי מציעות דרך קלה ומהירה להגשים את הצרכים עצמי“. אך בפועל הדיסקרטיות ואת החשיבות של הפרטיות. המפגשים הללו נעשים בביתכם, או בבית מלון, באווירה דיסקרטית עם לא במקרה אתה חושב על זה, זה Enjoy Tel Aviv sex with the most seductive liberated women

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。