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,369 Responses

  1. Edisonanazy表示:

    viagra originale in 24 ore contrassegno: viagra online siti sicuri – dove acquistare viagra in modo sicuro

  2. Текущий курс валют в Казахстане: актуальная информация
    Способы отслеживания курса валют в Казахстане
    Доллар, евро, рубль: актуальный курс в Казахстане
    На сколько выгодно менять валюту в Казахстане
    Секреты выгодного обмена валюты в Казахстане
    курс рубля в уральске курс доллара в павлодаре .

  3. Antoine表示:

    What Do You Think? Heck Is ADHD Testing? adhd tests uk, Antoine,

  4. Some Of The Most Ingenious Things Happening With Luton Windows
    And Doors window repair company

  5. Edisonanazy表示:

    farmacia online piГ№ conveniente: Farmacie online sicure – farmacia online piГ№ conveniente

  6. Dante表示:

    The 10 Scariest Things About GSA SER Tutorial gsa ser tutorial (Dante)

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

  8. After I initially left a comment I appear to have clicked on the -Notify me when new comments are added- checkbox and now whenever a comment is added I recieve four emails with the same comment. Is there a means you are able to remove me from that service? Thanks.

  9. 오피表示:

    Your post is a valuable resource for us all.오피

  10. Edisonanazy表示:

    Farmacie online sicure: Cialis generico recensioni – Farmacie on line spedizione gratuita

  11. Игровые автоматы на сайте Cryptoboss Casino, для азартных игроков.
    Играйте на деньги в автоматах Cryptoboss Casino, где выигрыш станет реальностью.
    Не упустите шанс выиграть крупный джекпот в казино Cryptoboss, чтобы испытать настоящий азарт.
    Играйте в казино Cryptoboss на лучших слотах, для тех, кто мечтает выиграть крупный приз.
    Развлекайтесь в казино Cryptoboss на лучших автоматах, для любителей азарта.
    Лучшие игровые автоматы на сайте Cryptoboss, для тех, кто готов испытать фарт.
    Играйте на деньги на своих любимых слотах, для азартных игроков.
    Играйте в лучшие автоматы в казино Cryptoboss, для любителей азартных игр.
    Уникальные автоматы в казино Cryptoboss, которые покорят вас своими возможностями.
    Проведите время с пользой, играя в автоматы на сайте Cryptoboss Casino, для тех, кто готов рисковать.
    Играйте в лучшие игровые автоматы на сайте Cryptoboss, где вас ждут крупные выигрыши.
    Попробуйте свою удачу в казино Cryptoboss на увлекательных автоматах, для тех, кто ищет адреналин.
    Увлекательные слоты на сайте Cryptoboss ждут вас, чтобы испытать настоящее волнение.
    Играйте в казино Cryptoboss на лучших автоматах, для азартных игроков.
    Лучшие игровые автоматы на сайте Cryptoboss, для любителей азарта.
    Попробуйте свою удачу в казино Cryptoboss, для тех, кто ищет азарт.
    Играйте в увлекательные слоты на сайте Cryptoboss Casino, где каждый может испыт
    cryptoboss casino автоматы криптобосс игровые автоматы на деньги .

  12. EarnestWat表示:

    серверное хранилище данных https://sistemy-khraneniya-dannykh.ru/

  13. EarnestWat表示:

    серверы хранения данных https://sistemy-khraneniya-dannykh.ru/

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

  15. Way cool! Some very valid points! I appreciate you penning this article and also the rest of the site is really good.

  16. Edisonanazy表示:

    comprare farmaci online all’estero: farmacia online migliore – farmaci senza ricetta elenco

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

  18. Sani flo表示:

    Very educational post. Your current Weblog style is awesome as well!

  19. Thanks for the information provided! I was researching for this article for a long time, but I was not able to see a dependable source.

  20. PatrikNom表示:

    Что такое мемы и как они появились

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

  22. Fantastic read, I just passed this onto a colleague who was doing a little research on that. And he actually bought me lunch because I discovered it for him smile So let me rephrase that: Thanks for lunch!

  23. Oh my goodness! Amazing article dude! Thanks, However I am experiencing troubles with your RSS. I don’t understand the reason why I can’t join it. Is there anyone else having the same RSS issues? Anyone who knows the answer can you kindly respond? Thanx!!

  24. Appreciate your sharing the right go over that, I think truly regarding coupled with adore exploring much more about that topic. In case prospective, because arrive at practical knowledge, do you brain improving a person’s web site due to furthermore information and facts? This is of great help for everyone.

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

  26. some ayurvedic herbs have nasty side effects too that is why you should carefully choose the safer ones.,

發佈留言

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