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

  1. Davidmab表示:

    The Italian football championship https://italian-championship.serie-a-ar.com known as Serie A, has seen an impressive revival in recent years.

  2. DonaldIsogy表示:

    The road to the Premier League https://english-championship.premier-league-ar.com begins long before a team gets promoted to the English Premier League for the first time

  3. iptv表示:

    Good write-up. I certainly love this website. Keep it up!

  4. GeorgeGailt表示:

    The golf https://arabic.golfclub-ar.com industry in the Arab world is growing rapidly, attracting players from all over the world.

  5. Lazrkty表示:

    Привет, друзья!
    Мы можем предложить дипломы психологов, юристов, экономистов и любых других профессий по приятным ценам.
    comedyforme.ru/vash-diplom-garantiya-kachestva-i-nadezhnosti

  6. Cazrpmq表示:

    Здравствуйте!
    Мы готовы предложить документы ВУЗов, которые находятся в любом регионе РФ. Вы сможете заказать диплом за любой год, включая сюда документы старого образца. Дипломы и аттестаты печатаются на “правильной” бумаге высшего качества. Это позволяет делать государственные дипломы, не отличимые от оригинала. Документы заверяются всеми обязательными печатями и подписями.
    bondhusova.com/blogs/61136/%D0%9A%D0%B0%D0%BA-%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE-%D0%BD%D0%B5%D0%B4%D0%BE%D1%80%D0%BE%D0%B3%D0%BE-%D0%B7%D0%B0%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D1%8C-%D0%B4%D0%B8%D0%BF%D0%BB%D0%BE%D0%BC-%D0%B2-%D0%BE%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B5

  7. Uazrvlk表示:

    Добрый день!
    Приобрести диплом университета.
    c90226sl.beget.tech/2024/07/09/kupit-diplom-opyt-i-professionalizm/

  8. iptv表示:

    I was very happy to discover this website. I need to to thank you for your time just for this wonderful read!! I definitely enjoyed every little bit of it and I have you saved to fav to see new information on your blog.

  9. iptv表示:

    This blog was… how do you say it? Relevant!! Finally I have found something which helped me. Thanks a lot.

  10. Sazrond表示:

    Добрый день!
    Официальная покупка диплома вуза с сокращенной программой обучения в Москве
    cod4.flybb.ru/viewtopic.php?f=60&t=655&sid=94b62751a76127472ede4c2162f410da
    Всегда вам поможем!

  11. cse.google.ms表示:

    Google Serp Update And The Way To Stay Along With 구글상위노출 회사 (cse.google.ms)

  12. Sazrmhy表示:

    Здравствуйте!
    Мы можем предложить дипломы любых профессий по доступным тарифам. Стоимость будет зависеть от выбранной специальности, года выпуска и университета. Стараемся поддерживать для покупателей адекватную ценовую политику. Важно, чтобы документы были доступны для большинства наших граждан.
    bookmarkshut.com/story17544315/купить-аттестат

  13. Mazrqgq表示:

    Добрый день!
    Купить документ университета вы можете в нашей компании. Мы оказываем услуги по производству и продаже документов об окончании любых университетов Российской Федерации. Вы сможете получить необходимый диплом по любым специальностям, любого года выпуска, включая документы образца СССР. Гарантируем, что при проверке документов работодателем, никаких подозрений не появится.
    Мы изготавливаем дипломы психологов, юристов, экономистов и любых других профессий по доступным тарифам. Стоимость будет зависеть от той или иной специальности, года выпуска и университета. Стараемся поддерживать для покупателей адекватную политику тарифов. Для нас важно, чтобы дипломы были доступны для большого количества наших граждан.
    baetezhylefy.timeforchangecounselling.com/kak-mozno-budet-nedorogo-priobresti-diplom-v-internet-magazine
    Рады помочь!

  14. Lazrgol表示:

    Здравствуйте!
    Заказать диплом о высшем образовании.
    telegra.ph/Bolshoj-katalog-dokumentov-v-izvestnom-internet-magazine-07-04

  15. Devin表示:

    You’ll Never Guess This Amazon Under Desk Treadmill’s Benefits amazon under desk treadmill (Devin)

  16. iptv表示:

    Good info. Lucky me I found your blog by accident (stumbleupon). I have saved it for later.

  17. Dnrtfwt表示:

    Привет!
    Купить документ о получении высшего образования вы сможете в нашей компании в Москве.
    ast-diploms.com/kupit-diplom-magistra
    Успешной учебы!

  18. iptv表示:

    Hi there! I just would like to offer you a huge thumbs up for the excellent information you have here on this post. I’ll be coming back to your web site for more soon.

  19. Jeffreyovemi表示:

    Manny Pacquiao https://filipino-boxer.manny-pacquiao-ar.com is one of the most prominent boxers in the history of the sport.

  20. Diplomi_ecEa表示:

    Привет, друзья!
    Купить документ института вы можете в нашей компании в Москве.
    diploms-x.com/kupit-diplom-novosibirsk 

  21. HerbertMerge表示:

    Muhammad Ali https://american-boxer.muhammad-ali-ar.com is perhaps one of the most famous and greatest athletes in the history of boxing.

  22. KeithDup表示:

    Mike Tyson https://american-boxer.mike-tyson-ar.com one of the most famous and influential boxers in history, was born on June 30, 1966 in Brooklyn, New York.

  23. Pay Attention: Watch Out For How 10kg Washing Machines Is Taking Over And How To Stop It http://www.023456789.xyz

  24. Keyword Elite Software Review 백링크 확인

  25. Hello there! I could have sworn I’ve visited this blog before but after looking at some of the posts I realized it’s new to me. Regardless, I’m definitely delighted I discovered it and I’ll be bookmarking it and checking back regularly!

  26. I needed to thank you for this great read!! I definitely enjoyed every bit of it. I have you saved as a favorite to look at new things you post…

  27. AnthonyALUBY表示:

    https://tezfiles.cc/
    Tezfiles Premium account owners are given infinite download speeds to let go b exonerate them access their files in their cloud сторидж entirely quickly.

  28. Lazrnrh表示:

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

  29. See What Replacement Sash Windows Tricks The Celebs Are Making Use Of replacement sash windows

發佈留言

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