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

23,531 Responses

  1. 1win_jwei表示:

    1win партнерка вход 1win партнерка вход .

  2. Diplomi_rhEi表示:

    купил диплом что делать prema-diploms.ru .

  3. dewalt Tools表示:

    What’s The Current Job Market For New Dewalt Tools Professionals?
    dewalt Tools

  4. Greetings! Very useful advice in this particular post! It’s the little changes that produce the biggest changes. Thanks for sharing!

  5. Cazrhqt表示:

    Добрый день!
    Без получения диплома очень нелегко было продвинуться вверх по карьере. Сегодня же этот важный документ не дает каких-либо гарантий, что получится получить высокооплачиваемую работу. Намного более важное значение имеют навыки специалиста, а также его постоянный опыт. По этой причине решение о покупке диплома можно считать рациональным. Приобрести диплом о высшем образовании lxgonline.mn.co/posts/80373941

  6. Deneme bonusu sayesinde hiçbir para kaybetmeden kazandım, herkes denemeli!

  7. Uazrsbg表示:

    Приветствую!
    Для некоторых людей, заказать диплом о высшем образовании – это острая потребность, удачный шанс получить хорошую работу. Но для кого-то – это очевидное желание не терять массу времени на учебу в институте. С какой бы целью вам это не потребовалось, наша фирма готова помочь. Оперативно, профессионально и по доступной цене сделаем диплом любого года выпуска на настоящих бланках со всеми печатями.
    Основная причина, почему многие люди прибегают к покупке документа, – желание занять определенную должность. К примеру, знания позволяют кандидату устроиться на работу, а подтверждения квалификации нет. В случае если для работодателя важно присутствие “корочки”, риск потерять место работы очень высокий.
    Приобрести документ института можно у нас. Мы предлагаем документы об окончании любых университетов Российской Федерации. Вы сможете получить диплом по любой специальности, любого года выпуска, в том числе документы старого образца. Даем 100% гарантию, что при проверке документа работодателем, подозрений не возникнет.
    Обстоятельств, которые вынуждают приобрести диплом ВУЗа очень много. Кому-то срочно нужна работа, а значит, необходимо произвести особое впечатление на начальство в процессе собеседования. Некоторые планируют попасть в престижную компанию, чтобы повысить свой статус и в будущем начать свой бизнес. Чтобы не тратить время, а сразу начать удачную карьеру, используя врожденные способности и полученные знания, можно приобрести диплом прямо в интернете. Вы станете полезным для социума, получите финансовую стабильность в кратчайший срок- аттестат за 9 класс купить

  8. Jasonzitte表示:

    They simplify global healthcare.
    can you buy generic lisinopril without rx
    Some are medicines that help people when doctors prescribe.

  9. Victorprima表示:

    I value the personal connection they forge with patrons.
    cytotec without a prescription
    A harmonious blend of local care and global expertise.

  10. WalterCherm表示:

    Definitive journal of drugs and therapeutics.
    https://lisinoprilpharm24.top/
    Setting global standards in pharmaceutical care.

  11. Her gün slot oyunlarında büyük jackpot kazançları elde ediyorum.

  12. Guide To Double Glazed Window Near Me: The Intermediate
    Guide In Double Glazed Window Near Me double glazed window near me

  13. 佳文网表示:

    I loved your post.Really looking forward to read more. Cool.

  14. 25 Surprising Facts About Pallet Prices where To get pallets​

  15. WalterCherm表示:

    They keep a broad spectrum of rare medications.
    https://cipropharm24.top/
    Leading with compassion on a global scale.

  16. JustinZoX表示:

    Эта статья для ознакомления предлагает читателям общее представление об актуальной теме. Мы стремимся представить ключевые факты и идеи, которые помогут читателям получить представление о предмете и решить, стоит ли углубляться в изучение.
    Подробнее можно узнать тут – https://narko-zakodirovat1.ru/

  17. Having read this I thought it was very enlightening. I appreciate you finding the time and effort to put this information together. I once again find myself spending a significant amount of time both reading and leaving comments. But so what, it was still worthwhile.

  18. 1win_oyma表示:

    1win официальный сайт скачать https://www.cah.forum24.ru/?1-13-0-00001560-000-0-0-1741172791 .

發佈回覆給「mostbet_jmOr」的留言 取消回覆

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