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

  1. This is the appropriate weblog for wishes to be made aware of this topic. You already know a great deal its nearly not easy to argue along (not that I really would want…HaHa). You certainly put a different spin with a topic thats been revealed for years. Excellent stuff, just great!

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

  3. Along with almost everything which seems to be developing inside this particular area, your viewpoints are actually somewhat radical. Having said that, I appologize, because I can not subscribe to your entire suggestion, all be it radical none the less. It appears to me that your commentary are not completely justified and in reality you are generally your self not even completely confident of your argument. In any event I did take pleasure in reading it.

  4. plumbers表示:

    Youre so cool! I dont suppose Ive read anything in this way just before. So nice to get somebody with a few original thoughts on this subject. realy appreciation for beginning this up. this web site is something that is needed on the net, a person with some originality. helpful problem for bringing a new challenge towards web!

  5. Недавно разбил экран своего телефона и обратился в этот сервисный центр. Ребята быстро и качественно починили устройство, теперь работает как новый. Очень рекомендую обратиться к ним за помощью. Вот ссылка на их сайт: ближайший сервис по ремонту телефонов.

  6. Thanks so much for sharing this great info! I am looking forward to see more posts!

  7. Сломался телефон, думал покупать новый, но решил попробовать отремонтировать. Обратился в этот сервисный центр и не пожалел. Профессионалы своего дела быстро восстановили мой телефон. Рекомендую посетить их сайт: вызов мастера по ремонту телефона.

  8. Anthonydrymn表示:

    Denk je aan de goede oude tijd toen er home buttons en bubble icons waren? Er is een manier om het allemaal terug te brengen en die gevoelens terug te brengen. Een app genaamd OldOS (via the Verge) herstelt iOS 4 naar de nieuwe iPhone. Lees verder https://mashable.com/article/iphone-3g-oldos

  9. RobertAbuff表示:

    lucky jet регистрация lucky jet на деньги

  10. Can I simply say what relief to seek out someone that in fact knows what theyre discussing on the net. You definitely realize how to bring a difficulty to light and work out it crucial. The best way to ought to check this out and appreciate this side on the story. I cant believe youre no more common since you also definitely provide the gift.

  11. Good info. Lucky me I found your website by accident (stumbleupon). I’ve book marked it for later!

  12. When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get three e-mails with the same comment. Is there any way you can remove people from that service? Many thanks!

  13. Друзья, если планируете обновить ванную комнату, советую обратить внимание на один интернет-магазин раковин и ванн. У них действительно большой ассортимент товаров от ведущих производителей. Можно найти всё: от простых моделей до эксклюзивных дизайнерских решений.
    Я искал раковина в ванную комнату купить, и они предложили несколько вариантов по хорошей цене. Качество продукции на высоком уровне, всё сертифицировано. Порадовало и то, что они предлагают профессиональные консультации и услуги по установке. Доставка была быстрой, всё пришло в целости и сохранности. Отличный магазин с хорошим сервисом!

  14. Если кто ищет место, где можно выгодно купить раковины и ванны, рекомендую один интернет-магазин, который недавно открыл для себя. Они предлагают большой выбор сантехники и аксессуаров для ванной комнаты. Ассортимент включает различные модели, так что можно подобрать под любой стиль и размер помещения.

    Мне нужно было умывальник , и они предложили несколько отличных вариантов. Цены приятно удивили, а качество товаров на высшем уровне. Также понравилось, что они предлагают услуги профессиональной установки. Доставка была быстрой, и всё прошло гладко. Теперь моя ванная комната выглядит просто великолепно!

  15. Cryptoboss Casino – ваш надежный партнер в мире азарта
    cryptoboss casino официальный сайт криптобосс официальный сайт зеркало .

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

  17. It’s difficult to find knowledgeable people on this topic, however, you seem like you know what you’re talking about! Thanks

  18. Teach A Child To Our Planet With A Wooden Toy Bank
    청년 전세 대출

  19. 20 Insightful Quotes On Symptoms Of Adhd In Adults Female Impulsive Adhd Symptoms

  20. BrianOpite表示:

    Bienvenue sur notre blog, votre lieu ultime pour les informations sur les stars africaines du monde des mediums et des emissions de tele-realite https://mediaeventhub.africa/uche-ogbodo-le-visage-audacieux-du-divertissement.html ! Des tendances recentes dans l’industrie du loisir africain aux commerages les plus sensationnels sur les stars, nous vous transmettons les infos de toutes les anecdotes palpitantes a travers le Afrique. Cela inclut les alliances musicales innovantes, de sequences excitantes dans les emissions de tele-realite, ou de itineraires de vie motivants de vos stars preferees, nous tracons tout. La scene du show business en Afrique deborde de talents, et notre blog est la pour vous rapprocher des grands noms qui redefinissent l’industrie.

    Les emissions de tele-realite africaines ont domine le monde, exposant la multiplicite culturelle, la innovation et l’veracite uniques du continent. Des emissions comme « Big Brother Naija », « Les Vraies Femmes de Lagos » et « Tentations Afrique du Sud » ne cessent de fasciner des foules massives, eveillant des conversations et federant des fans bien en dehors de l’Afrique. Nous explorons dans les situations complexes, les rapports et les instants memorables qui font de ces programmes des incontournables a la tele. Notre blog ne se contente pas de rapporter sur stars, mais eclaire l’impact culturel de ces shows, montrant le rayonnement de la mode populaire africaine a l’echelle mondiale.

    Notre blog s’interesse aussi a les personnes du monde mediatique et les talents emergents qui font sensation en Afrique. Des artistes performants aux figures influentes, en passant par les influenceurs sur les reseaux sociaux, nous saluons les realisations de ceux qui reinventent le show business sur le terrain. Cela comprend des recompenses gagnees dans les films de Nollywood, des apparitions marquantes dans des series internationales ou des actes courageux dans des videos musicales, nous vous presentons des entretiens uniques et des anecdotes au-dela de la renommee. Vous trouverez des profils de personnalites importantes comme Davido, qui ont non seulement gagne les spectateurs du continent, mais aussi atteint une reputation globale.

    Gardez le contact avec nous pour les dernieres nouvelles et nouveautes en primeur sur vos personnalites preferees d’Afrique. Notre blog est un hub pour les fous de la culture populaire qui desirent suivre avec les polemiques de stars, les nouvelles emissions et les revolutions sociales qui remodelent l’industrie. Que vous soyez un fan passionne de la mode culturelle africaine ou simplement curieux des actualites du monde des stars, notre blog vous assure de vous garder au courant, rendre joyeux et stimule par le monde vibrant des plateformes mediatiques et shows de realites televisees en Afrique.

  21. BrianOpite表示:

    Bienvenue sur notre blog, votre espace ultime pour les actualites sur les stars africaines du monde des plateformes mediatiques et des emissions de tele-realite https://mediaeventhub.africa/ ! Des mouvements recents dans l’industrie du show business africain aux potins les plus epices sur les celebrites, nous vous tenons au courant de toutes les histoires captivantes a travers le territoire. Par exemple, des collaborations musicales inedites, de instants intenses dans les emissions de tele-realite, ou de trajets individuels inspirants de vos stars preferees, nous surveillons tout. La scene du spectacle en Afrique regorge de talents, et notre blog est la pour vous approcher des figures qui influencent l’industrie.

    Les emissions de tele-realite africaines ont conquis le monde, exposant la multiplicite culturelle, la ingeniosite et l’authenticite uniques du sol africain. Des emissions comme « Frere Naija », « Les Epouses Reelles de Lagos » et « Temptation Island South Africa » suscitent l’interet de des publics massives, eveillant des echanges et drainant des fans bien a l’exterieur de l’Afrique. Nous explorons dans les histoires, les rapports et les instants memorables qui font de ces spectacles des essentiels a la tele. Notre blog ne se restreint pas a ecrire a propos des stars, mais eclaire l’influence culturelle de ces series, montrant l’influence croissante de la pop culture africaine a l’echelle globale.

    Notre blog met egalement en lumiere les stars des medias et les talents emergents qui font parler d’eux en Afrique. Des comediens brillants aux figures influentes, en incluant les influenceurs sur les plateformes sociales, nous applaudissons les realisations de ceux qui reinventent le divertissement sur le territoire. Cela comprend des performances primees dans les cinema de Nollywood, des participations remarquables dans des series internationales ou des prises de position fortes dans des videos musicales, nous vous fournissons des echanges inedits et des anecdotes qui se cachent derriere la renommee. Vous trouverez des portraits de figures influentes comme Lupita Nyong’o, qui ont non seulement capte les audiences africaines, mais aussi gagne une reconnaissance mondiale.

    Ne nous perdez pas de vue pour les nouvelles fraiches et nouveautes en primeur sur vos idoles du continent. Notre blog est un point de rencontre pour les fous de la culture populaire qui souhaitent ne rien manquer avec les scandales des celebrites, les nouvelles emissions et les revolutions sociales qui remodelent l’industrie. Qu’il s’agisse d’un un suiveur devoue de la culture populaire africaine ou un observateur des actualites du monde des stars, notre blog vous assure de vous donner les infos, rendre joyeux et eveille par le milieu en ebullition des canaux et spectacles de television-realite en Afrique.

  22. Georgeawank表示:

    эскорт услуга вакансии в москве эскорт услуги в москве для мужчин

  23. Loving the info on this internet site, you have done great job on the articles.

  24. ремонт кондиционеров表示:

    <a href=”https://remont-kondicionerov-wik.ru”>ремонт кондиционеров в москве</a>

  25. There are a couple of fascinating points on time in this post but I don’t know if all of them center to heart. There may be some validity but I’m going to take hold opinion until I investigate it further. Excellent post , thanks so we want a lot more! Put into FeedBurner as well

  26. drain plumber表示:

    There couple of interesting points at some point in this article but I don’t determine if I see they all center to heart. You can find some validity but I most certainly will take hold opinion until I check into it further. Excellent write-up , thanks so we want more! Included with FeedBurner likewise

  27. Сломался телефон, думал покупать новый, но решил попробовать отремонтировать. Обратился в этот сервисный центр и не пожалел. Профессионалы своего дела быстро восстановили мой телефон. Рекомендую посетить их сайт: ремонт телефонов рядом.

  28. contact lens are not only for fashion but it can also protect your eyes from dust and UV radiation.,

發佈留言

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