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...

9,125 Responses

  1. Mazrqts表示:

    Добрый день!
    Как получить диплом техникума официально и без лишних проблем
    mans-diploms.ru

  2. Hello There. I found your blog using msn. This is a very well written article. I will be sure to bookmark it and come back to read more of your useful information. Thanks for the post. I’ll definitely return.

  3. I discovered your website website on google and check many of your early posts. Continue to keep within the really good operate. I merely additional increase Feed to my MSN News Reader. Seeking toward reading a lot more of your stuff at a later time!…

  4. Windowdoctor表示:

    Guide To Windowdoctor: The Intermediate Guide On Windowdoctor Windowdoctor

  5. actually, i like to live in a condominium specially on the higher floors because the view is amazing.

  6. Found this on Bing and I’m glad I did. Well written article.

  7. Hello, Neat post. There’s a problem with your website in internet explorer, might check this… IE still is the marketplace chief and a large part of folks will miss your wonderful writing due to this problem.

  8. There is noticeably a bundle to understand this. I assume you have made specific nice points in features also.

  9. 25 Unexpected Facts About Coffee Machines Bean To Cup coffee machine bean to cup

  10. Trefnwz表示:

    Здравствуйте!
    Как купить аттестат 11 класса с официальным упрощенным обучением в Москве
    property25.org/где-купить-диплом-о-высшем-образовани
    Будем рады вам помочь!.

  11. Manruum表示:

    Добрый день!
    Приобрести документ ВУЗа
    ast-diplomy.com/kupit-diplom-rostov-na-donu

  12. Xazrubr表示:

    Привет, друзья!
    Официальная покупка диплома вуза с сокращенной программой в Москве
    arusak-diploms-srednee.ru/kupit-diplom-v-nizhnem-novgorode

  13. Danrrjt表示:

    Привет, друзья!
    Мы изготавливаем дипломы любой профессии.
    cocapal.com/read-blog/823_proverennyj-internet-magazin-s-bolshim-katalogom-diplomov
    Всегда вам поможем!.

  14. *Oh my goodness! an amazing article dude. Thank you However I am experiencing issue with ur rss . Don’t know why Unable to subscribe to it. Is there anyone getting identical rss problem? Anyone who knows kindly respond. Thnkx

  15. Thank you, I have recently been looking for info approximately this topic for a while and yours is the greatest I’ve found out so far. However, what about the conclusion? Are you certain concerning the source?

  16. Nice post. I learn something more challenging on different blogs everyday. It can always be stimulating to read content from different writers and practice a bit of something from their store. I favor to use some with the content material on my blog whether you don’t mind. Natually I give you a link in your net blog. Thanks for sharing.

  17. Amazing! It’s as if you recognize my mind! A person appear to know therefore much relating to this, as if you wrote it in it or something. We believe which you could do with some images they are driving this content house a bit, besides that, this really is informative weblog publish. A excellent read. I will certainly return.

  18. Uazrpxq表示:

    Привет!
    Где заказать диплом специалиста?
    gamereleasetoday.com/купить-диплом-гознак-надежные-решени/

  19. Diplomi_wrEa表示:

    Привет!
    Купить документ университета вы сможете у нас.
    diploms-x.com/kupit-diplom-kandidata-nauk

  20. Wonderful goods from you, man. I’ve understand your stuff previous to and you are just extremely fantastic. I really like what you have acquired here, certainly like what you are saying and the way in which you say it. You make it entertaining and you still take care of to keep it smart. I cant wait to read much more from you. This is really a terrific web site.

  21. Wow, awesome blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is fantastic, as well as the content!

  22. key表示:

    The 10 Scariest Things About Land Rover Key key

  23. Dnrtkwe表示:

    Здравствуйте!
    Заказать документ о получении высшего образования вы сможете в нашей компании в столице.
    diplomasx.com/kupit-diplom-sankt-peterburg
    Успешной учебы!

  24. Ok oui et pas vraiment. Assurément parce que il se peut qu’on rencontre certaines sources qui probablement citent de semblables cote. Non car il ne suffit pas de copier ce qu’on peut lire avec plusieurs site web autres avant de le transposer tant clairement

  25. The digital cigarette uses a battery and a small heating aspect the vaporize the e-liquid. This vapor can then be inhaled and exhaled

  26. Lazrjvu表示:

    Здравствуйте!
    Приобрести диплом ВУЗа.
    licomklicu.ru/read-blog/885

  27. Trefqix表示:

    Добрый день!
    Приобретение диплома ПТУ с сокращенной программой обучения в Москве
    dadiler.com/купить-диплом-советы-и-рекомендации
    Рады помочь!.

  28. I really like your writing style, good information, appreciate it for putting up : D.

  29. Lazrmna表示:

    Привет!
    Мы предлагаем дипломы любой профессии по приятным ценам.
    speedagecourier.com/купить-диплом-гитр-или-любого-вуза-рос

發佈留言

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