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

  1. 20 Trailblazers Setting The Standard In Sports Toto Statistics 안전놀이터

  2. JerryCap表示:

    круглосуточный вывод из запоя нарколог https://alconetmos.ru/

  3. JerryCap表示:

    москва капельница от алкоголя https://alconetmos.ru/

  4. Your style is very unique in comparison to other folks I’ve read stuff from. Thank you for posting when you have the opportunity, Guess I’ll just book mark this web site.

  5. jinos.Com表示:

    See What Bio Fuel Fireplace Tricks The Celebs Are Utilizing bio fuel
    fire (jinos.Com)

  6. This is a topic that is near to my heart… Take care! Exactly where can I find the contact details for questions?

  7. PatrickLef表示:

    farmacia online piГ№ conveniente: BRUFEN 600 bustine prezzo – Farmacie online sicure

  8. Экологичные строительные материалы для дачного строительства
    купить сыпучие материалы купить сыпучие материалы .

  9. WilliamSKESK表示:

    Этот телеграм канал откроет для вас мир чтения, подробнее – https://smartlibrary24.com/. Наш канал создан для того, чтобы удовлетворить любой литературный вкус. Любите ли вы захватывающие тайны, душещипательные романы, нехудожественную литературу или захватывающие приключения – у нас вы найдете все, что нужно. Мы гордимся тем, что предлагаем разнообразный выбор жанров, чтобы каждый нашел что-то для себя

  10. AzzwPaish表示:

    ABORTION PILL – Family Planning Organisation – WORLD Welcome to the Abortion Pill Doctor website associated with the Family Planning association.
    Always follow proper dosage instructions when you tadalafil review forum to fill your pet medications.
    Importantly, if a person responds adversely to one of these medicines, another may prove less problematic.

  11. AemmPaish表示:

    Miles Teller cuddles up to his stunning model girlfriend Keleigh Sperry at Fantastic Four’s NYC premiere Very dapper Lovely in Leather!
    Purchase medications at our online drugstore at tadalafil + dapoxetine 40mg/60mg , will my partner have any negative feelings?
    His stomach hurt and he was throwing up.

  12. Присоединяйтесь к Cryptoboss Casino и покоряйте азартные вершины
    cryptoboss официальное зеркало сайт cryptoboss официальный сайт .

  13. 349338.xyz表示:

    Question: How Much Do You Know About Tiger Multi Fuel Stove?
    349338.xyz

  14. PatrikNom表示:

    Что такое анекдот? Почему мы любим прикольные анекдоты? История. Читайте об этом
    статью

  15. I was suggested this web site via my cousin. I’m not certain whether this submit is written through him as no one else realize such targeted about my problem. You are incredible! Thank you!

  16. It’s in point of fact a nice and helpful piece of info. I’m glad that you simply shared this useful info with us. Please keep us up to date like this. Thanks for sharing.

  17. WilliamSKESK表示:

    Этот телеграм канал откроет для вас мир чтения, подробнее – https://smartlibrary24.com/. Наш канал создан для того, чтобы удовлетворить любой литературный вкус. Любите ли вы захватывающие тайны, душещипательные романы, нехудожественную литературу или захватывающие приключения – у нас вы найдете все, что нужно. Мы гордимся тем, что предлагаем разнообразный выбор жанров, чтобы каждый нашел что-то для себя

  18. gas plumber表示:

    I think this is one of the so much vital information for me. And i am glad reading your article. But want to statement on few common things, The site style is great, the articles is in reality nice . Excellent activity, cheers.

  19. Way cool! Some very valid points! I appreciate you writing this article plus the rest of the site is also very good.

  20. сервисный центре предлагает ремонт телевизоров с выездом на дом – ремонт матрицы телевизора после удара цена

  21. Magnificent goods from you, man. I’ve understand your stuff previous to and you’re just extremely great. I really like what you’ve acquired here, really like what you are saying and the way in which you say it. You make it enjoyable and you still take care of to keep it wise. I can not wait to read much more from you. This is really a tremendous website.

  22. 14 Cartoons About Dolce Gusto Coffee Machine
    Which Will Brighten Your Day 4182051.xyz – https://www.4182051.xyz,

  23. very nice post, i definitely enjoy this amazing site, persist in it

  24. anus sex toy表示:

    5 Clarifications Regarding Men Anal Toys anus sex toy

  25. Kolyaska_xmml表示:

    Купить качественный и удобный вариант
    коляска люлька для новорожденных недорого коляска люлька для новорожденных недорого .

發佈留言

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