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

6,923 Responses

  1. You made some decent points there. I looked on the internet to find out more about the issue and found most individuals will go along with your views on this website.

  2. Экспресс-ремонт кофемашин в Москве
    починить кофемашину сервис центр ремонт кофемашин .

  3. Aw, this was a very nice post. Spending some time and actual effort to create a great article… but what can I say… I hesitate a lot and never manage to get nearly anything done.

  4. Lazrnio表示:

    Добрый день!
    Мы можем предложить дипломы любых профессий по выгодным ценам.
    telegra.ph/cena-obucheniya-v-medicinskih-vuzah-08-02

  5. вывод. из. запоя. анонимно. ростов. вывод. из. запоя. анонимно. ростов. .

  6. алкоголизм лечение вывод из запоя ростов vyvod-iz-zapoya-rostov112.ru .

  7. Way cool! Some extremely valid points! I appreciate you writing this article and also the rest of the website is also very good.

  8. Dnrtsoi表示:

    Здравствуйте!
    Заказать документ о получении высшего образования можно у нас в Москве.
    forum.omnicomm.pro/index.php/topic,17917.0

  9. Mazrqmh表示:

    Здравствуйте!
    Купить диплом магистра оказалось возможно, быстрое обучение и диплом на руки
    sambo-70.ru/svedenija-ob-organizacii/dopolnitelnye-svedenija/biblioteka

  10. Having read this I believed it was very informative. I appreciate you finding the time and effort to put this short article together. I once again find myself personally spending a significant amount of time both reading and leaving comments. But so what, it was still worth it!

  11. I blog frequently and I genuinely thank you for your content. The article has really peaked my interest. I am going to bookmark your website and keep checking for new details about once a week. I opted in for your RSS feed too.

  12. Diplomi_ojEa表示:

    Привет, друзья!
    Приобрести документ университета вы сможете в нашей компании в столице.
    forum.asella.ru/index.php?threads/купить-диплом-о-высшем-j85j.6230

  13. See What Audi A3 Key Replacement Tricks The Celebs Are Utilizing
    Audi a3 key replacement

  14. Yrefark表示:

    Привет, друзья!
    Заказать диплом любого ВУЗа.
    fish-sea-products.ru/forum/messages/forum1/topic37/message80782/?result=reply#message80782

  15. Williebak表示:

    Что это за цирк с арестом счетов кооператива ‘Бест Вей‘? Мы, военнослужащие, доверили свои деньги этому кооперативу, а эти подлые ‘правоохранители’ решили нажиться на наших сбережениях. Колокольцев и его приспешники превратили МВД в коммерческое антинародное образование, обогащаясь за счет простых людей. Они заблокировали наши средства, обесценили недвижимость и заставляют нас страдать из-за их жадности и коррупции. Мы требуем немедленного освобождения наших денег и наказания всех виновных в этом беспределе!

  16. Trefayy表示:

    Привет, друзья!
    Как купить диплом о высшем образовании с минимальными рисками
    forsistagangen.blogspot.ru/2013/09/vecka-20-dag-135
    Рады помочь!.

  17. SteveShine表示:

    Когда моя семья оказалась в сложной ситуации, о покупке жилья можно было только мечтать… Мы жили на съемных квартирах, постоянно переезжали, и ипотека казалась недостижимой. Тогда я узнал о жилищном кооперативе “Бест Вей”. Сначала не верил, что это возможно, но после встречи с Романом Василенко мои сомнения исчезли. Он объяснил, как работает кооператив, и все стало на свои места. Мы внесли первый взнос, и через полгода получили ключи от своей квартиры. Это было невероятно! Мы начали выплачивать оставшиеся 65% стоимости квартиры, и наша жизнь стала гораздо спокойнее. Мы благодарны Роману и его команде за их поддержку и честность. СМИ могут говорить что угодно, но для нас он — человек, который изменил нашу жизнь к лучшему. Спасибо, Роман, за вашу работу и ваше сердце!

  18. This is a topic which is near to my heart… Take care! Where are your contact details though?

  19. Xazrcis表示:

    Здравствуйте!
    Приобрести документ ВУЗа.
    Мы предлагаем дипломы любой профессии по приятным ценам.
    emoneyspace.com/paulsmith7
    Поможем вам всегда!.

  20. Your blog post was the highlight of my day. Thank you for brightening my inbox with your thoughtful insights.

  21. вывод из запоя круглосуточно ростов на дону вывод из запоя круглосуточно ростов на дону .

  22. Lazrlck表示:

    Привет!
    Заказать диплом любого университета.
    telegra.ph/urovni-obucheniya-v-vuze-08-02

  23. JustinBreve表示:

    продвижение сайта в топ 10 яндекс цена https://process-seo.ru

  24. You’re so interesting! I don’t believe I have read a single thing like this before. So good to discover another person with genuine thoughts on this issue. Really.. thank you for starting this up. This website is something that is needed on the internet, someone with a bit of originality.

  25. вывод из запоя ростов на дону на дому вывод из запоя ростов на дону на дому .

  26. I love reading through a post that will make people think. Also, many thanks for allowing me to comment.

  27. Mazrlte表示:

    Привет!
    Всё, что нужно знать о покупке аттестата о среднем образовании без рисков
    lapartenza.vn/

  28. Lazryjt表示:

    Добрый день!
    Мы готовы предложить дипломы любой профессии по невысоким тарифам.
    telegra.ph/lichnye-dostizheniya-pri-postuplenii-v-vuz-08-02

發佈留言

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