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

8,827 Responses

  1. Lankier men with longer limbs relative to their torso lift less weight than stockier men. Lank and stocky man have the same distance lever between tendon and joint where your muscle s force generates your torque, but lankier men have a longer limb where the external weight s force is generating its

  2. Thank you for another excellent article. Exactly where else could anybody get that kind of data in this kind of a perfect way of writing? I have a presentation subsequent week, and I am to the appear for such information and facts.

  3. Thomasknith表示:

    Life is Good — почему произошёл технический СКАМ проекта
    жесткое порно
    Компания «Life Is Good» позиционировала себя как финансово-консалтинговый проект. Она привлекала денежные активы от клиентов, формируя из них инвестиционные вклады, которые приносят пассивный доход от 20% годовых в валюте.

    Официальный сайт компании — lifeisgood.company. Ценной информации на нем очень мало. В разделе «О компании» вместо рассказа о том, чем занимается компания, — общие фразы про финансовую независимость и благополучие клиентов, а также шесть рекламных роликов с известными людьми.
    Данная компания создана в 2014 году. Зарегистрирована в государстве-офшоре Белиз, что находится в Центральной Америке. Соответственно, выданный там сертификат не имеет на территории России никакой юридической силы. Лицензия ЦБ РФ отсутствует.

    Руководитель компании — Роман Василенко, обладатель многочисленных фотошопных регалий, количеству которых позавидовал бы даже Александр Невский (уот так уот), ветеран МЛМ движения в РФ, ну практически святой человек.

    С 1990 года по 1999 год служил в Вооруженных силах РФ.

    После службы работал в инвестиционной компании Save-Invest (Si), зарегистрированной в Швейцарии, которая обещала инвестиционные продукты со сверх доходностью. В 2000х годах газета Коммерсантъ выпустила статью о расследовании сотрудников ФСБ на предмет ведения мошеннической деятельности в РФ.

    В 2012 году руководитель Оренбургского управления Татьяна Горынина, обманувшая своих клиентов на 50 млн. получила 6 лет тюрьмы за мошенничество.

    Далее работал в инвестиционной компании “Life Division”, которая до сих пор продолжает свою работу.

    Также Роман активно ведёт блог в инстаграмме и на ютуб, темы всё те же — успешный успех, освободись от рабства, нужно только захотеть и т.д.

    Участники делали ежемесячные взносы в счет стоимости будущей квартиры. Значительная часть средств шла организаторам компании, а все остальное делились между вышестоящими пайщиками.
    Наступила стадия «критического дна», т.е. взносов от новичков поступало меньше, чем необходимо выплачивать более «старым» клиентам, основатели компании приостановили свою деятельность, а суммы, которые многие годы вносили пайщики, им просто не вернули.

    Life Is Good позиционировала себя как европейская компания, но привлекала в основном Россиян. Кстати, официальный сайт Life is Good переведен сразу на 9 языков. Непонятно для чего это сделано, ведь компания работает только в России, Казахстане и Киргизии. Наверное, поэтому над переводом на английский язык здесь не стали заморачиваться. С первого взгляда видны грубые грамматические ошибки.

    Компания работала в сотрудничестве с еще тремя: Best Way, Hermes Management и Vista.

    Гарантий сохранности денег не давала ни «Лайф-из-гуд», ни «Гермес-менеджмент». Но при этом «Лайф-из-гуд» все же предлагала страхование вложенных денег по оригинальной схеме.

  4. There a few interesting points on time on this page but I don’t determine if these center to heart. You can find some validity but I most certainly will take hold opinion until I look into it further. Great article , thanks so we want more! Included with FeedBurner too

  5. I think other web site proprietors should take this website as an model, very clean and magnificent user friendly style and design, as well as the content. You’re an expert in this topic!

  6. Hey there! Nice stuff, please keep us posted when you post again something like that!

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

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

  9. why do people call Lebron James “King James”. Because Kings rule & have thrones, Lebron hasn’t even won a title, who is Lebron ruling over ?|IAmBobbyDrake|

  10. Heya this is kinda of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding knowledge so I wanted to get guidance from someone with experience. Any help would be greatly appreciated!

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

  12. Friday Night Lights is a great tv series, i love the game and i love the story::

  13. 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, 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 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 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: 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 recensioni https://nine-casino-italy.com/ .

  14. ScottWrews表示:

    Клининговая компания уборка после смерти человека http://klining-posle-smerti-msk.ru/

  15. выведение из запоя на дому петербург http://www.vyvod-iz-zapoya-v-sankt-peterburge.ru .

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

  17. We’re a group of volunteers and opening a new scheme in our community. Your website offered us with valuable info to work on. You’ve done an impressive job and our entire community will be grateful to you.

  18. When I originally commented I clicked the -Notify me when new comments are added- checkbox and already if a comment is added I get four emails with the exact same comment. Possibly there is by any means you are able to remove me from that service? Thanks!

  19. It’s rare knowledgeable folks with this topic, however, you sound like do you know what you’re speaking about! Thanks

  20. Lazropy表示:

    Привет, друзья!
    Мы изготавливаем дипломы любой профессии по доступным тарифам.
    tok-ok-dv.ru/index.php?subaction=userinfo&user=ygyruku

  21. My husband and i ended up being so relieved when Louis could finish off his investigation using the precious recommendations he gained while using the web pages. It’s not at all simplistic just to continually be releasing guidance that many the others could have been trying to sell. We really take into account we’ve got the website owner to appreciate for this. Most of the explanations you have made, the easy web site navigation, the relationships you can assist to create – it is all excellent, and it’s really letting our son and the family imagine that the situation is entertaining, and that’s exceedingly indispensable. Thanks for all the pieces!

  22. you employ a fantastic weblog here! want to earn some invite posts on my blog?

  23. When I originally commented I clicked the -Notify me when new comments are added- checkbox now each time a comment is added I am four emails using the same comment. Perhaps there is any way you are able to eliminate me from that service? Thanks!

  24. What a lovely blog page. I will definitely be back again. Please keep writing!

  25. Hi there! I simply want to give a huge thumbs up for the good data you could have right here on this post. I will likely be coming again to your weblog for more soon.

發佈留言

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