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

1,812 Responses

  1. sSdfffobelors表示:

    Здравствуйте!

    Бывали ли у вас случаи, когда приходилось писать дипломную работу в крайне сжатые сроки? Это действительно требует большой ответственности и напряженного труда, но важно не унывать и продолжать активно участвовать в учебном процессе, как я и делаю.
    Для тех, кто умеет эффективно находить и использовать информацию в интернете, это может существенно облегчить процесс согласования и написания дипломной работы. Больше не нужно тратить время на посещение библиотек или организацию встреч с научным руководителем. Здесь, на этом ресурсе, предоставлены надежные данные для заказа и написания дипломных и курсовых работ с гарантией качества и доставкой по всей России. Можете ознакомиться с предложениями на , это проверено!
    https://kharkov-balka.com/showthread.php?p=151543#post151543
    купить аттестат
    купить диплом магистра
    купить диплом Гознак
    купить диплом нового образца
    купить диплом о высшем образовании

    Желаю каждому пятерошных) отметок!

  2. sSdfffobelors表示:

    Приветики!

    Бывало ли у вас такое, что приходилось писать дипломную работу в крайне сжатые сроки? Это действительно требует огромной ответственности и напряженных усилий, но важно не опускать руки и продолжать активно заниматься учебными процессами, как я.
    Для тех, кто умеет быстро находить и анализировать информацию в сети, это действительно помогает в процессе согласования и написания дипломной работы. Больше не нужно тратить время на посещение библиотек или устраивать встречи с дипломным руководителем. Здесь, на этом ресурсе, предоставлены надежные данные для заказа и написания дипломных и курсовых работ с гарантией качества и доставкой по всей России. Можете ознакомиться с предложениями на сайте , это проверено!
    http://forum.activeworlds.ru/member.php?535-worksale
    купить диплом специалиста
    купить диплом нового образца
    купить диплом университета
    где купить диплом
    купить диплом Вуза

    Желаю любому пятерошных) оценок!

  3. Esufao表示:

    buy glyburide no prescription – order glucotrol 5mg generic dapagliflozin cheap

  4. sSdfffobelors表示:

    Приветики!

    Бывало ли у вас такое, что приходилось писать дипломную работу в очень ограниченные сроки? Это действительно требует большой ответственности и тяжелого труда, но важно не сдаваться и продолжать активно заниматься учебными процессами, так же, как и я.
    Для тех, кто умеет эффективно использовать интернет для поиска и анализа информации, это действительно облегчает процесс согласования и написания дипломной работы. Не нужно тратить время на посещение библиотек или организацию встреч с дипломным руководителем. Здесь представлены надежные данные для заказа и написания дипломных и курсовых работ с гарантией качества и доставкой по всей России. Можете ознакомиться с предложениями по ссылке , это проверенный способ!
    https://fuss.forumkz.ru/viewtopic.php?id=2632#p4094
    купить аттестат
    купить аттестат школы
    купить диплом специалиста
    купить диплом колледжа
    где купить диплом

    Желаю всем положительных оценок!

  5. sSdfffobelors表示:

    Здравствуйте!

    Было ли у вас когда-нибудь такое, что приходилось писать дипломную работу в сжатые сроки? Это действительно требует огромной ответственности и напряженных усилий, но важно не сдаваться и продолжать активно заниматься учебными процессами, чем я и занимаюсь.
    Для тех, кто умеет искать и анализировать информацию в интернете, это действительно помогает в процессе согласования и написания дипломной работы. Не нужно тратить время на посещение библиотек или организацию встреч с дипломным руководителем. Здесь представлены надежные данные для заказа и написания дипломных и курсовых работ с гарантией качества и доставкой по России. Можете ознакомиться с предложениями по ссылке , проверено!
    http://profbuh.forumkz.ru/viewtopic.php?id=7371#p11808
    купить диплом в Москве
    купить диплом о среднем образовании
    купить диплом Вуза
    где купить диплом
    купить диплом колледжа

    Желаю каждому положительных отметок!

  6. sSdfffobelors表示:

    Добрый день всем!

    Бывали ли у вас случаи, когда приходилось писать дипломную работу в крайне сжатые сроки? Это действительно требует большой ответственности и напряженного труда, но важно не унывать и продолжать активно участвовать в учебном процессе, как я и делаю.
    Для тех, кто умеет эффективно находить и использовать информацию в интернете, это может существенно облегчить процесс согласования и написания дипломной работы. Больше не нужно тратить время на посещение библиотек или организацию встреч с научным руководителем. Здесь, на этом ресурсе, предоставлены надежные данные для заказа и написания дипломных и курсовых работ с гарантией качества и доставкой по всей России. Можете ознакомиться с предложениями на , это проверено!
    http://rulezrp.listbb.ru/viewtopic.php?f=2&t=453
    где купить диплом
    купить диплом специалиста
    купить аттестат
    купить диплом бакалавра
    купить диплом магистра

    Желаю любому прекрасных отметок!

  7. sSdfffobelors表示:

    Доброго всем дня!

    Было ли у вас когда-нибудь такое, что приходилось писать дипломную работу в сжатые сроки? Это действительно требует огромной ответственности и напряженных усилий, но важно не сдаваться и продолжать активно заниматься учебными процессами, чем я и занимаюсь.
    Для тех, кто умеет искать и анализировать информацию в интернете, это действительно помогает в процессе согласования и написания дипломной работы. Не нужно тратить время на посещение библиотек или организацию встреч с дипломным руководителем. Здесь представлены надежные данные для заказа и написания дипломных и курсовых работ с гарантией качества и доставкой по России. Можете ознакомиться с предложениями по ссылке , проверено!
    https://app.feedblitz.com/f/f.fbz?track=http%3A%2F%2Foriginality-diplomy.com
    купить диплом ссср
    купить диплом бакалавра
    купить диплом в Москве
    купить диплом колледжа
    купить диплом университета

    Желаю любому пятерошных) отметок!

  8. sSdfffobelors表示:

    Приветики!

    Были ли у вас случаи, когда приходилось писать дипломную работу в крайне ограниченные сроки? Это действительно требует большой ответственности и трудоемкости, но важно не отступать и продолжать активно участвовать в учебном процессе, как я.
    Для тех, кто умеет эффективно находить и использовать информацию в сети, это действительно помогает в процессе согласования и написания дипломной работы. Больше не нужно тратить время на посещение библиотек или организацию встреч с научным руководителем. Здесь, на этом ресурсе, предоставлены надежные данные для заказа и написания дипломных и курсовых работ с гарантией качества и доставкой по всей России. Можете ознакомиться с предложениями тут , это проверенный источник!
    https://kvixi.com/blogs/1107/ѕокупка-академических-дипломов
    купить диплом колледжа
    купить диплом магистра
    купить диплом в Москве
    купить диплом о высшем образовании
    купить диплом университета

    Желаю любому нужных оценок!

  9. Suopoq表示:

    methylprednisolone 8mg oral – buy generic azelastine 10ml buy astelin nasal spray for sale

  10. sSdfffobelors表示:

    Приветики!

    Было ли у вас когда-нибудь так, что приходилось писать дипломную работу в очень сжатые сроки? Это действительно требует огромной ответственности и может быть очень тяжело, но важно не опускать руки и продолжать активно заниматься учебными процессами, как я.
    Для тех, кто умеет быстро находить и использовать информацию в интернете, это действительно облегчает процесс согласования и написания дипломной работы. Больше не нужно тратить время на посещение библиотек или устраивать встречи с научным руководителем. Здесь, на этом ресурсе, предоставлены надежные данные для заказа и написания дипломных и курсовых работ с гарантией качества и доставкой по всей России. Можете ознакомиться с предложениями на сайте , это проверено!
    http://alohomora.mybb.ru/viewtopic.php?id=549#p10324
    купить аттестат школы
    купить диплом о среднем образовании
    купить диплом ссср
    где купить диплом
    купить диплом института

    Желаю каждому пятерошных) отметок!

  11. Ejipii表示:

    clarinex 5mg canada – flixotide nasal sprays ventolin canada

  12. Timsothyabela表示:

    Привет всем!
    У нас вы можете купить диплом Гознак по специальной цене с доставкой в любой регион России без предоплаты!
    http://saksx-attestats.ru/
    Закажите диплом института или техникума по доступной цене с гарантированной доставкой в любой уголок России без предоплаты!
    Наша компания предлагает конфиденциально выбрать и заказать диплом любого Вуза России

  13. Ulwhef表示:

    stromectol tablets for humans – order cefaclor 250mg without prescription order cefaclor pills

  14. Imgtxb表示:

    ventolin 4mg ca – order albuterol generic order theophylline 400 mg online

  15. Jacobelors表示:

    Доброго всем дня!

    Было ли у вас когда-нибудь такое, что приходилось писать дипломную работу в сжатые сроки? Это действительно требует огромной ответственности и напряженных усилий, но важно не сдаваться и продолжать активно заниматься учебными процессами, чем я и занимаюсь.
    Для тех, кто умеет искать и анализировать информацию в интернете, это действительно помогает в процессе согласования и написания дипломной работы. Не нужно тратить время на посещение библиотек или организацию встреч с дипломным руководителем. Здесь представлены надежные данные для заказа и написания дипломных и курсовых работ с гарантией качества и доставкой по России. Можете ознакомиться с предложениями по ссылке , проверено!
    https://landik-diploms-srednee24.com/
    купить диплом техникума
    купить диплом о высшем образовании
    купить аттестат
    купить диплом цена
    где купить диплом

    Желаю любому нужных отметок!

  16. Twblkp表示:

    purchase zithromax pill – metronidazole price cost ciprofloxacin 500 mg

  17. vpn code 2024表示:

    I am curious to find out what blog system you have been using?
    I’m experiencing some minor security problems with
    my latest blog and I would like to find something more risk-free.
    Do you have any recommendations?

    my site; vpn code 2024

  18. Gtyife表示:

    purchase cleocin for sale – cefixime pill buy chloromycetin without a prescription

發佈留言

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