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

  1. This sort of thing needs to happen! Really its a must to take a look past everything and get upset. Now this will let you take the next steps to becoming successful.

  2. CharlieCop表示:

    вывод из запоя цены https://zapoynetu.ru/

  3. The following the five information you should do remember so you can manage to produce your particular successful world-wide-web. survey reviews

  4. The following mail generally seems to get a number of page views. Make a decision advertise it? It’s offers a good creative ignore during elements. Reckon making a single thing precise or maybe a higher giving home elevators is a vital idea.

  5. Sink leaking表示:

    Aw, this was an incredibly nice post. In concept I have to set up writing like this additionally – spending time and actual effort to have a very good article… but what things can I say… I procrastinate alot and by no means often get something completed.

  6. This is very interesting! Great information and it is also very well written. I will bookmark and comeback soon.

  7. When I originally commented I clicked the -Notify me when new surveys are added- checkbox and from now on when a comment is added I receive four emails with the same comment. Is there by any means you are able to remove me from that service? Thanks!

  8. Jamestek表示:

    how to write abstract for a research paper pay for essay paper cheap academic paper writing service

  9. Coffee Machines From Bean To Cup Tools To Improve Your Everyday
    Lifethe Only Coffee Machines From Bean To Cup Trick Every Person Should Be Able To coffee machines From bean to cup

  10. скорая наркологическая помощь на дому в москве http://skoraya-narkologicheskaya-pomoshch16.ru .

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

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

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

  14. Saved as a favorite, I like your web site.

  15. заработок в интернете 2024 без вложений заработок в интернете 2024 без вложений .

  16. When visiting blogs, i always look for a very nice content like yours “ 

  17. Good day! Do you know if they make any plugins to assist with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success. If you know of any please share. Many thanks!

  18. Sink repair表示:

    Rattling clear site, regards for this post.

  19. Can I simply say what a relief to discover an individual who really knows what they are discussing online. You actually realize how to bring a problem to light and make it important. A lot more people ought to read this and understand this side of the story. I was surprised you are not more popular since you most certainly possess the gift.

  20. RobertGed表示:

    Apres le paiement, le актуальный промокод на 1xbet devient disponible et peut etre active par le joueur a tout moment. Il y a beaucoup d’offres dans la vitrine des codes promotionnels. Dans la plupart des cas, ils couvrent la section du casino, mais souvent dans la vitrine sont publies des codes interessants pour la Conclusion a des conditions preferentielles des Paris Express, pour obtenir un cashback pour les Paris perdus. La vitrine est mise a jour assez souvent.

  21. наркологическая помощь москва skoraya-narkologicheskaya-pomoshch15.ru .

  22. Re En ce qui me concerne les avis de ce gentilce court debrieffing necessiteraient de nouvelles avis… Votre approche est bonne quoique je ne defend pas les divers avis plus haut! il faudrait apporter des valeurs pour etre plus rigoureux! Au plaisir de vous relire

  23. Following study a few of the weblog posts on your internet site now, and I really like your way of blogging. I bookmarked it to my bookmark web site list and will probably be checking back soon. Pls check out my web internet site at the same time and let me know what you think.

  24. JamesEMULK表示:

    Уcтановкa натяжныx пoтолков энный сложнoсти? PАБОTАEM ПO BCEЙ Невьянск, Новоуральск. Европейcкоe качeство.лучшиe мaтериaлы. БEЗ ЗАПАXA. Выeзд специалистa зaмерщика бecплатно!!

    Натяжные потолки Кировград

  25. 15 Best Double Dildo Use Bloggers You Must Follow Best double dildo

發佈留言

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