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

  1. I must express my gratitude for your kindness supporting men who must have help on your concern. Your special commitment to passing the solution across ended up being wonderfully advantageous and have continually helped many people much like me to get to their aims. Your personal helpful help implies a great deal a person like me and much more to my office workers. Best wishes; from all of us.

  2. выписать семена почтой выписать семена почтой .

  3. i can see that most mobile phones today are equipped with cameras and stuffs**

  4. MatthewSouse表示:

    Напольное покрытие “паркетная доска” – это классический и изысканный выбор для любой современной или традиционной интерьерной композиции. Паркетная доска представляют собой натуральную древесину высокого качества, которая может быть обработана лаком или масло-воск, чтобы создать уникальный и привлекательный внешний вид, что создаёт визуальный интерес и глубину в помещении. Кроме того, паркетная доска является долговечной и стабильной альтернативой другим типам напольных покрытий, таким как массивная доска или штучный паркет. Она также хорошо сохраняет тепло и звукоизоляцию, что делает её идеальным выбором для комфортного жилья. https://kvarcvinil3.ru/

  5. This website is usually a walk-through for all of the details it suited you concerning this and didn’t know who to question. Glimpse here, and you’ll definitely discover it.

  6. GregoryEvell表示:

    При выборе напольного покрытия для вашего дома или офиса важно обратить внимание на качество, долговечность и дизайн. Магазин напольных покрытий – это место, где вы можете найти широкий ассортимент различных материалов, от ламината и паркета до ковров и виниловых плиток. https://ламинат1.рф/

  7. very good post, i definitely love this site, keep on it

  8. Получите шанс выиграть большие деньги в онлайн казино, заработайте крупный выигрыш в интернет казино, Выберите лучшее онлайн казино и выигрывайте крупные суммы, Онлайн казино с возможностью выигрыша реальных денег, Играйте в лучшие азартные игры с реальным шансом на выигрыш, выигрывайте деньги в интернет казино с лицензией, Обзаведитесь богатством в онлайн казино, Играйте в казино на деньги с максимальными шансами на победу, зарабатывайте деньги, играя в казино онлайн, Играйте в азартные игры с реальными ставками в онлайн казино, Онлайн казино с возможностью сорвать джекпот, Присоединяйтесь к игрокам, которые уже зарабатывают в онлайн казино, Играйте в онлайн казино и станьте обладателем крупного выигрыша, разбогатейте в онлайн казино с реальными деньгами, играйте в казино онлайн и выигрывайте деньги без риска, Азартные игры с возможностью легкого заработка, играйте в азартные игры с реальными ставками и получайте крупные выигрыши.
    online casino на деньги online casino .

  9. There is noticeably a lot of money to understand this. I assume you’ve made certain nice points in features also.

  10. купить семена россия рф https://semenaplus74.ru/ .

  11. Aw, this was a very nice post. In idea I wish to put in writing like this additionally ? taking time and precise effort to make a very good article? but what can I say? I procrastinate alot and not at all appear to get something done.

  12. Fyqxbo表示:

    rumalaya for sale online – buy generic rumalaya online elavil us

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

  14. DavidGed表示:

    Промокод 1xBet на сегодня и бесплатно. Промокоды 1хбет 2024 требуется использовать те, которые предоставят игрокам самые лучшие бонусы. Каждый из них позволяет увеличить первый депозит в 2 раза, максимальная сумма увеличения – 100 долларов. Большое количество промокодов — одна из причин того, что на сайте регистрируется огромное количество новых игроков каждый день. На данный момент их количество превышает пятьсот тысяч уникальных пользователей каждый день. Действующие промокоды позволяют увеличить размер приветственных баллов до 32 500 рублей. Для этого нужно лишь активировать при регистрации имеющийся код, скопировав его в соответствующее поле. Букмекерская контора 1ХБет является одной из самых влиятельных на рынке игорного бизнеса в России и не нуждается в особом представлении. Впрочем, букмекер продолжает держать статус одного из самых щедрых и предлагает своим клиентам воспользоваться промокодами для халявы, – более подробно в этом материале https://www.jkfitness.com/wp-content/pags/1xbet___promo_code_for_registration.html.

  15. качественные семена купить в интернет магазине https://semenaplus74.ru/ .

  16. 에볼루션表示:

    Great post. I will be facing many of these issues as well..

  17. I’d should consult you here. Which isn’t some thing I usually do! I quite like reading a post that will make people believe. Also, thank you for allowing me to comment!

  18. рейтинг лучших капперов http://rejting-kapperov14.ru/ .

  19. Eanrigq表示:

    Привет, друзья!
    Мы предлагаем дипломы любых профессий по выгодным ценам.
    tudiencongnghe.com/author/binguyenth

  20. You must continue your writing.. Great post. A rise in A lot more Amazing.

  21. Cazrfwe表示:

    Диплом вуза купить официально с упрощенным обучением в Москве

    sbmk.org/css/pgs/kupit_diplom_universiteta__gde_nayti_i_na_chto_obratit_vnimanie

  22. Continually, when people manage employment seeks they can deal with employment paying around my topic also known as job opportunities in my specific geographic area. There is nothing other in that. In addition, across frustrating economical occasions when women and men is required to be modest additional potent by getting a task search engine. In the event you look at it, the important reason that people young and old want to know a activity associated with neighborhood is about efficiency. Whatever easy to have emplyment in the vicinity of house hold the way it drops the hassles, duress, and / or expense on carrying. Another reason why that men attempt occupations hiring into my field is really because seriously is invaluable staying near home in the event that numerous vital internal send out appears. Nevertheless this is to speak about certainly nothing of their advantages engaging in case you have school children.

  23. Hi, I do believe this is an excellent site. I stumbledupon it 😉 I may revisit yet again since i have bookmarked it. Money and freedom is the best way to change, may you be rich and continue to help others.

  24. Free PORN Download. Free XXX links. Clips, Movies, Magazines, Galleries, DVDs and much more.

  25. Se stai cercando un’esperienza di gioco emozionante e sicura, ninecasino e la scelta giusta per te. Con un’interfaccia user-friendly e un accesso facile, ninecasino offre un’ampia gamma di giochi che soddisferanno tutti i gusti. Le recensioni di Nine Casino 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 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’app di Nine Casino 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: 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 bonus https://nine-casino-italy.com/ .

  26. Good post. I learn something new and challenging on blogs I stumbleupon on a daily basis. It’s always interesting to read articles from other writers and practice a little something from other web sites.

  27. oh well, chris rock is damn funny. i like his corny jokes and stuffs“

發佈留言

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