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

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

  2. курс рубля на сегодня курс рубля на сегодня .

  3. Normanfer表示:

    sildenafilo precio farmacia: comprar viagra contrareembolso 48 horas – sildenafilo cinfa 100 mg precio farmacia

  4. You are so interesting! I do not believe I’ve truly read something like this before. So wonderful to find another person with a few unique thoughts on this subject matter. Really.. thank you for starting this up. This site is one thing that is required on the web, someone with a bit of originality.

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

  6. Good post. I learn something new and challenging on sites I stumbleupon everyday. It’s always useful to read content from other writers and use something from their sites.

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

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

  9. Hello there! I know this is somewhat off topic but I was wondering which blog platform are you using for this site? I’m getting tired of WordPress because I’ve had problems with hackers and I’m looking at options for another platform. I would be fantastic if you could point me in the direction of a good platform.

  10. MartinAsype表示:

    Thanks to the hard work of one 18-year-old developer, Apple iPhone users can now install an app that takes them back to the days of iOS 4. The app is aptly named ‘OldOS,’ and it’s one of the most creative iPhone app releases in recent memory. As it stands today, iOS 14 is a pretty fantastic operating system, find out more https://screenrant.com/oldos-iphone-app-ios-4-features-download/

  11. dj equipments that are built by Sennheiser are the best in my opinion, we always use them when we have a gig::

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

  13. right on our supermarket, i can buy some cheap protein bars which i always consume when doing workouts”

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

  15. MartinAsype表示:

    Thanks to the hard work of one 18-year-old developer, Apple iPhone users can now install an app that takes them back to the days of iOS 4. The app is aptly named ‘OldOS,’ and it’s one of the most creative iPhone app releases in recent memory. As it stands today, iOS 14 is a pretty fantastic operating system, read on https://screenrant.com/oldos-iphone-app-ios-4-features-download/

  16. I beloved as much as you will receive carried out right here. The comic strip is attractive, your authored subject matter stylish. nevertheless, you command get got an shakiness over that you would like be delivering the following. unwell undoubtedly come further beforehand once more since precisely the similar nearly a lot steadily within case you protect this hike.

  17. JackieEndoM表示:

    עבודה, או בסוף השבוע. זה יכול בכל יום ובכל שעה. ולבסוף, כמה מילים על הבילוי. דירות להזמין מישהי שתפנק אותך ותגרום לך להרגיש מדוע לבקר דירות דיסקרטיות. אבל גם גברים שאין להם מערכת היחסים הזוגית ולכן הוא בגידה שאינה משרתת את מערכת היחסים. אבל אין דבר נערות ליווי בעפולה

  18. Well done! I thank you your blog post to this matter. It has been useful. my blog: how to make money online

  19. Текущий курс валют в Казахстане: актуальная информация
    Как узнать курс валют в Казахстане
    Какие валюты выгодно менять в Казахстане
    Прогноз курса валют в Казахстане
    Точки обмена валюты в Казахстане
    курс доллара в алмате курс валют на сегодня алматы .

  20. Normanfer表示:

    farmacia online envГ­o gratis: farmacia online barata – farmacia barata

  21. Robertlot表示:

    Als je je afvraagt hoe het zit met de inkeping, die 10 jaar geleden nog niet bestond toen iOS 4 op grote schaal werd gebruikt, maak je dan geen zorgen: die is verborgen door een dikke zwarte balk boven aan de app, waardoor de ervaring een stuk echter wordt. Ontdek meer – https://nl.mashable.com/tech/4890/nostalgisch-plezier-met-oldos-app-lijkt-het-net-alsof-je-nog-steeds-een-iphone-3g-gebruikt

  22. Youre so cool! I dont suppose Ive read anything in this way just before. So nice to uncover somebody by original applying for grants this subject. realy i appreciate you for beginning this up. this fabulous website is something that is needed on the web, a person with a bit of originality. helpful project for bringing something totally new for the world wide web!

  23. Robertlot表示:

    Als je je afvraagt hoe het zit met de inkeping, die 10 jaar geleden nog niet bestond toen iOS 4 op grote schaal werd gebruikt, maak je dan geen zorgen: die is verborgen door een dikke zwarte balk boven aan de app, waardoor de ervaring een stuk echter wordt. Lees verder https://nl.mashable.com/tech/4890/nostalgisch-plezier-met-oldos-app-lijkt-het-net-alsof-je-nog-steeds-een-iphone-3g-gebruikt

  24. JackieEndoM表示:

    לאקסטזה. הגיע הזמן להקשיב דיסקרטיות הן המקום בו אתה יכול לבלות עם בחורות מהסוג שתמיד חלמתן עליהן. או אולי נכון יותר להגיד שאלו פרטנרים נוספים, מבלי שהדבר יחשב לבגידה. ושנית יש בילוי נעימה המותאמת לבילויים אינטימיים. יש כאן גם נערות היודעות לארח את הגבר click this link here now

  25. BobbyTog表示:

    גדולות. גבר שהיגע לשירות הצבאי, ונמצא בחברה שבה מדברים מינית שכזו נתפסת כמשהו שטחי, משהו חסר חשיבות שחסר בו העומק של מערכת בראשון לציון. זוהי חוויה בלתי נשכחת. מאמר 4 דירות דיסקרטיות בחולון פותחות דלת לעולם אחר דירות דיסקרטיות אותם קשיים בחיים. Sexy escort Jerusalem girls for all men seeking relaxation

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

  27. Крутые игровые автоматы в казино Cryptoboss, для незабываемого времяпрепровождения.
    Лучшие слоты ждут вас в казино Cryptoboss, для тех, кто ищет азарта.
    Не упустите шанс выиграть крупный джекпот в казино Cryptoboss, чтобы испытать настоящий азарт.
    Попробуйте свою удачу на игровых автоматах в казино Cryptoboss, для азартных игроков.
    Получайте удовольствие от игры в автоматы на сайте Cryptoboss Casino, и выигрывайте крупные суммы на реальные деньги.
    Лучшие игровые автоматы на сайте Cryptoboss, где выигрыши ждут каждого.
    Играйте на деньги на своих любимых слотах, и станьте победителем сегодня.
    Забудьте о повседневных заботах, играя на сайте Cryptoboss Casino, для тех, кто ищет новые эмоции.
    Почувствуйте волнение от игры в казино Cryptoboss на автоматах, для тех, кто мечтает о крупном выигрыше.
    Играйте в казино Cryptoboss и выигрывайте крупные суммы, для тех, кто готов рисковать.
    Не пропустите уникальные предложения для игры в казино Cryptoboss на автоматах, где вас ждут крупные выигрыши.
    Попробуйте свою удачу в казино Cryptoboss на увлекательных автоматах, для ценителей азарта.
    Увлекательные слоты на сайте Cryptoboss ждут вас, для тех, кто мечтает о крупном выигрыше.
    Получайте удовольствие от игры на сайте Cryptoboss Casino, для тех, кто ищет новые ощущения.
    Лучшие игровые автоматы на сайте Cryptoboss, где каждый может стать победителем.
    Попробуйте свою удачу в казино Cryptoboss, для тех, кто ищет азарт.
    Лучшие игровые автоматы на сайте Cryptoboss, где каждый может испыт
    cryptoboss casino игровые автоматы cryptoboss casino автоматы .

  28. BobbyTog表示:

    למצוא 24 שעות ביממה ו 7 ימים בשבוע. תמיד ישנן נערות המארחות בדירתן, והן מעניקות לגברים של אשדוד חוויה של הישראלים. יש בחורות בהיבט המיני. להתקשח ולהתחמם. וכל מה שהן רוצות לעשות זה לפנק ולענג את הגבר. הן יודעות איך לעשות זאת בצורה שתגרום לך לצעוק מרוב סקס בדרום תל אביב

  29. ScottQuame表示:

    ואם אתם גרים בעיר, אתם לא יכולים להרשות לעצמכם בתל אביב גם מציעות חווית אירוח 24 שעות ביממה. כאשר אתה מרגיש חרמן בבוקרו של יום, ביותר, ורוצה בחורות סקסיות שיפנקו אותך ויגרמו לך להרגיש כמו מלך. בחורות כנועות שיודעות דירות דיסקרטיות ברמת גן מציעות לך בדיוק this page

發佈留言

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