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

  1. I just wanted to type a simple note to thank you for those wonderful pointers you are writing at this website. My considerable internet investigation has finally been honored with really good insight to share with my companions. I would mention that we readers actually are quite fortunate to exist in a fantastic network with very many lovely individuals with valuable solutions. I feel somewhat privileged to have encountered your web site and look forward to so many more thrilling times reading here. Thanks a lot once again for all the details.

  2. грунт для пересадки растений https://dachnik18.ru/ .

  3. sunwin表示:

    I was excited to uncover this website. I want to to thank you for your time for this particularly wonderful read!! I definitely liked every part of it and I have you bookmarked to see new stuff in your website.

  4. Xxdfkx表示:

    purchase mestinon – buy mestinon for sale azathioprine price

  5. Se stai cercando un’esperienza di gioco emozionante e sicura, Nine Casino e la scelta giusta per te. Con un’interfaccia user-friendly e un login semplice, Nine Casino offre un’ampia gamma di giochi che soddisferanno tutti i gusti. Le nine casino recensioni sono estremamente positive, evidenziando la sua affidabilita e sicurezza. Molti giocatori apprezzano le nine casino prelievo, che sono rapide e sicure.

    Uno dei punti di forza di ninecasino e il suo generoso nine casino bonus benvenuto, che permette ai nuovi giocatori di iniziare con un vantaggio. Inoltre, puoi ottenere free spins e altri premi grazie ai bonus senza deposito. E anche disponibile un no deposit bonus per coloro che desiderano provare senza rischiare i propri soldi.

    Scarica l’app di Nine Casino oggi stesso e scopri l’emozione del gioco online direttamente dal tuo dispositivo mobile. Il download dell’app di Nine Casino e semplice e veloce, permettendoti di giocare ovunque ti trovi. Molti si chiedono, “Nine Casino e sicuro?” La risposta e si: Nine Casino e completamente legale in Italia e garantisce un ambiente di gioco sicuro e regolamentato. Se vuoi saperne di piu, leggi la nostra nine casino recensione per scoprire tutti i vantaggi di giocare su questa piattaforma incredibile.
    ninecasino recensioni https://nine-casino-italia.com/ .

  6. TimothySaw表示:

    Ламинат – это популярное покрытие для пола, которое сочетает в себе прочность, долговечность и стильный внешний вид. Он идеально подходит для любого помещения, будь то кухня, гостиная или спальня. Ламинат легко укладывается и не требует особого ухода, что делает его отличным выбором для занятых людей. Благодаря разнообразию цветов и текстур, вы сможете подобрать ламинат, который идеально дополнит интерьер вашего дома. Не стоит забывать и о том, что ламинат – это экологически чистый материал, который не вызывает аллергии и не выделяет вредных веществ. Приобретая напольные покрытия в нашем магазине вы обновите свой дом с помощью качественного ламината! https://kvarcvinil1.ru/

  7. sunwin表示:

    Good post. I learn something totally new and challenging on blogs I stumbleupon every day. It will always be interesting to read through content from other authors and use something from other websites.

  8. WilliamDeemo表示:

    Ламинат легко укладывается и не требует особого ухода, что делает его отличным выбором для тех, кто ценит практичность и красоту. Благодаря своей прочности и долговечности, кварцвиниловый ламинат будет радовать вас и вашу семью на протяжении многих лет, сохраняя свой первоначальный вид и качество. https://kvarcvinil5.ru/

  9. sunwin表示:

    Hello, I do believe your web site could possibly be having web browser compatibility problems. When I take a look at your site in Safari, it looks fine but when opening in I.E., it has some overlapping issues. I just wanted to give you a quick heads up! Besides that, fantastic blog!

  10. sunwin表示:

    Good post. I learn something new and challenging on websites I stumbleupon every day. It will always be useful to read content from other authors and use something from their sites.

  11. sunwin表示:

    Pretty! This has been an incredibly wonderful article. Thanks for supplying this info.

  12. Lazrnqn表示:

    Привет!
    Мы изготавливаем дипломы любой профессии по приятным ценам.
    synfig.org/issues/thebuggenie/synfig/issues/7925

  13. грунт для цветущих растений http://dachnik18.ru/ .

  14. сайты прогнозов на спорт rejting-kapperov14.ru .

  15. Se stai cercando un’esperienza di gioco emozionante e sicura, ninecasino e la scelta giusta per te. Con un’interfaccia user-friendly e un login semplice, Nine Casino offre un’ampia gamma di giochi che soddisferanno tutti i gusti. Le recensioni ninecasino sono estremamente positive, evidenziando la sua affidabilita e sicurezza. Molti giocatori apprezzano le opzioni di prelievo di Nine Casino, che sono rapide e sicure.

    Uno dei punti di forza di Nine Casino e il suo generoso bonus di benvenuto, che permette ai nuovi giocatori di iniziare con un vantaggio. Inoltre, puoi ottenere free spins e altri premi grazie ai nine casino bonus senza deposito. E anche disponibile un nine casino no deposit bonus per coloro che desiderano provare senza rischiare i propri soldi.

    Scarica l’nine casino app oggi stesso e scopri l’emozione del gioco online direttamente dal tuo dispositivo mobile. Il nine casino app download e semplice e veloce, permettendoti di giocare ovunque ti trovi. Molti si chiedono, “Nine Casino e sicuro?” La risposta e si: ninecasino e completamente legale in Italia e garantisce un ambiente di gioco sicuro e regolamentato. Se vuoi saperne di piu, leggi la nostra recensione di Nine Casino per scoprire tutti i vantaggi di giocare su questa piattaforma incredibile.
    nine casino https://casinonine-it.com/ .

  16. CharlieGed表示:

    Мелбет – это букмекерская контора, которая дает возможность преобразовать хобби в доход. Контора гарантирует высокие коэффициенты и своевременные выплаты с игрового счета. Для того, чтобы стать клиентом конторы нужно пройти простую регистрацию. Здесь разнообразные виды спорта, широкий выбор событий и типов ставок. Вы можете отслеживать свою статистику по завершенным матчам за любой период времени. Доступ к счету можно получить с ПК, смартфона или планшета. В службе поддержки собраны профессионалы, которые могут быстро решить любой вопрос. Предлагается промокод для мелбет большой выбор способов ввода средств на игровой счет.

  17. You’re the best, I was doing a google search and your site came up for foreclosures in Oviedo, FL but anyway, I have thoroughly enjoyed reading it, keep it up!

  18. Five Killer Quora Answers On Does A New Ignition Switch Require A New
    Key does a new ignition switch require a new key; https://moneyasia2024visitorview.coconnex.com/node/740387,

  19. Fantastic blog, Simply wanted in order to remark will not necessarily hook up to the actual really simply syndication supply, you might want set up the best wordpress plugin for that in order to workthat.

  20. I really like your writing style, great information, thankyou for posting : D.

  21. Easily, the content is really the best topic with this registry related issue. I remain in your findings and can excitedly look forward to your following revisions. Merely stating thanks won’t only become sufficient, for the fantasti c lucidity in your composing. I will immediately get the rss feed to remain informed associated with a improvements.

  22. Brilliant post and useful information. I think this is what I read somewhere but I dont know with your experience

  23. купить универсальный грунт для цветов http://dachnik18.ru .

  24. I have enjoyed perusing your website and going through various articles. – Gulvafslibning | Kurt Gulvmand is a well written article about a very captivating subject. I cannot wait for your planned updates.

  25. 오피表示:

    Your passion for this subject is contagious.오피

  26. sky88表示:

    Spot on with this write-up, I actually believe that this website needs far more attention. I’ll probably be returning to read more, thanks for the info.

  27. nine casino表示:

    Se stai cercando un’esperienza di gioco emozionante e sicura, Nine Casino e la scelta giusta per te. Con un’interfaccia user-friendly e un login semplice, ninecasino offre un’ampia gamma di giochi che soddisferanno tutti i gusti. Le nine casino recensioni sono estremamente positive, evidenziando la sua affidabilita e sicurezza. Molti giocatori apprezzano le opzioni di prelievo di Nine Casino, che sono rapide e sicure.

    Uno dei punti di forza di ninecasino e il suo generoso bonus di benvenuto, che permette ai nuovi giocatori di iniziare con un vantaggio. Inoltre, puoi ottenere free spins e altri premi grazie ai nine casino bonus senza deposito. E anche disponibile un nine casino no deposit bonus per coloro che desiderano provare senza rischiare i propri soldi.

    Scarica l’app di Nine Casino oggi stesso e scopri l’emozione del gioco online direttamente dal tuo dispositivo mobile. Il download dell’app di Nine Casino e semplice e veloce, permettendoti di giocare ovunque ti trovi. Molti si chiedono, “Nine Casino e sicuro?” La risposta e si: Nine Casino e completamente legale in Italia e garantisce un ambiente di gioco sicuro e regolamentato. Se vuoi saperne di piu, leggi la nostra recensione di Nine Casino per scoprire tutti i vantaggi di giocare su questa piattaforma incredibile.
    nine casino recensione https://casinonine-bonus.com/ .

  28. Sazrozz表示:

    Добрый день!
    Заказать документ института
    picasso-pablo.ru/articles/11082020

發佈留言

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