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

  1. Уникальный бездепозитный бонус в Cryptoboss Casino, не упустите возможность!
    Заработайте крупный выигрыш без вложений в Cryptoboss Casino – шикарная возможность выиграть крупный джекпот.
    Уникальные возможности для игры без вложений в Cryptoboss Casino – лучший способ испытать удачу.
    Эксклюзивный бездепозитный бонус в Cryptoboss Casino – заработайте крупный выигрыш без вложений.
    Cryptoboss Casino радует бездепозитными бонусами для всех – это шанс испытать свою удачу без риска.
    Бездепозитный бонус в Cryptoboss Casino – это реальность – возможно, это ваш шанс выиграть крупный джекпот.
    Используйте уникальное предложение от Cryptoboss Casino для новичков – шикарная возможность заработать без вложений.
    Cryptoboss Casino предлагает бездепозитный бонус для всех – шикарные призы и невероятные выигрыши ждут вас.
    Начните играть бесплатно в Cryptoboss Casino с бездепозитным бонусом – возможность заработать крупный выигрыш бесплатно.
    cryptoboss бонус cryptoboss casino бездепозитный бонус за регистрацию .

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

  3. BEDPAGE表示:

    I blog often and I seriously appreciate your information. This great article has truly peaked my interest. I am going to take a note of your blog and keep checking for new details about once per week. I opted in for your Feed too.

  4. Edisonanazy表示:

    farmacie online affidabili: Cialis generico 20 mg 8 compresse prezzo – comprare farmaci online all’estero

  5. Many thanks for creating the effort to talk about this, I feel strongly about this and love learning a great deal more on this matter. If feasible, as you gain expertise, would you mind updating your weblog with a great deal more details? It’s extremely helpful for me.

  6. BEDPAGE表示:

    Great info. Lucky me I found your site by accident (stumbleupon). I’ve saved it for later!

  7. Используйте промокод в cryptoboss casino и получите уникальные бонусы|Уникальный шанс с промокодом на cryptoboss casino
    Секретный промокод от cryptoboss casino|Используйте промокод в cryptoboss casino и увеличьте свои шансы на победу
    Эксклюзивная акция для игроков cryptoboss casino|Играйте в cryptoboss casino с бонусным кодом
    Специальное предложение от cryptoboss casino с промокодом|Играйте в cryptoboss casino с эксклюзивным промокодом
    cryptoboss промокод hds5 cryptoboss промокоды cryptoboss ru casino .

    Успех в cryptoboss casino с промокодом
    Воспользуйтесь промокодом в cryptoboss casino для дополнительных выигрышей
    Играйте в cryptoboss casino с дополнительными бонусами от промокодов|Получите уникальное предложение с cryptoboss casino промокодами
    cryptoboss casino – ваш ключ к успеху с промокодом|cryptoboss casino промокод – ваш путь к большим выигрышам|cryptoboss casino промокод – ваш путь к успеху|Уникальное предложение от cryptoboss casino с промокодом|Увеличьте свои шансы на победу с cryptoboss casino промокодом|Бонусы и привилегии с cryptoboss casino промокодом|Играйте в cryptoboss casino с уникальным промокодом и выиграйте больше|cryptoboss casino промокод – ваш шанс на успех|Специальные бонусы с cryptoboss casino промокодом|cryptoboss casino промокоды – ваш путь к успеху|Действуйте прямо сейчас с cryptoboss casino промокодом|Используйте промокод в cryptoboss casino для больших выигрышей|Играйте в cryptoboss casino с дополнительными бонусами по промокоду|Успейте активировать cryptoboss casino промокод для дополнительных выигрышей|cryptoboss casino – играйте с выгодой с промокодами|cryptoboss casino – ваш ключ к успеху с промокодами|Получите привилегии с cryptoboss casino промокодом|Эксклюзивный cryptoboss casino промокод – ваш путь к выигрышу

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

  9. Normanfer表示:

    farmacia online barcelona: precio cialis en farmacia con receta – farmacia online envГ­o gratis

  10. 사상오피表示:

    Best Bars In Shoreditch, London, For Pre-Drinks 사상오피

  11. Не упустите шанс, переходите на зеркало Cryptoboss Casino сейчас, прокачивайтесь без проблем!
    Самое актуальное зеркало Cryptoboss Casino всегда под рукой, бесперебойный доступ гарантированы.
    Самое популярное зеркало Cryptoboss Casino ждет вас прямо сейчас, не упустите другие варианты!
    Узнавайте самую актуальную информацию на зеркале Cryptoboss Casino!, играйте и выигрывайте!
    Самое надежное зеркало Cryptoboss Casino только у нас, зарабатывайте крупные суммы без лишних хлопот!
    актуальное зеркало криптобосс криптобосс зеркало рабочее .

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

  13. Normanfer表示:

    farmacia online madrid: tadalafilo – farmacia online espaГ±a envГ­o internacional

  14. Eventuellement je peux vous transférer les adresses pour plus de picto à propos de cet idée. Joignez moi directement…

  15. Ultimately, a problem that I’m passionate about. I have looked for data of this caliber for the previous various hours. Your site is greatly appreciated.

  16. I’ve recently started a site, and the information you offer on this website has helped me greatly. Thank you for all of your time & work.

  17. a plumber表示:

    i have a passion on anything that is automotive related. i love to attend car shows too.

  18. JohnGed表示:

    4rabet promo code inr: The current promo code available today, offering bonuses like free bets, deposit matches, or special rewards on the 4rabet platform.

  19. I am incessantly thought about this, thanks for putting up.

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

  21. PatrikNom表示:

    Как улучшить настроение подруге с помощью смешных картинок и мемов https://anekdotymemy.wordpress.com/2024/09/16/podnat-nastroenie/

  22. Thank you for an additional crucial report. Where else could everyone get that form of information in this kind of a total way of writing? I’ve a presentation incoming week, and I am on the lookout for these info.

  23. rsmi表示:

    Вавада казино: место для настоящих азартных игроков, заходи и играй в любое время дня и ночи.
    Наслаждайся азартными играми в Вавада казино, получай максимум азарта.
    Играй в любимые слоты в Вавада казино, получай удовольствие.
    Вавада казино: место для истинных ценителей азарта, зарабатывай с удовольствием.
    Получи эксклюзивные бонусы в Вавада казино, развлекайся и выигрывай.
    VaVaDa CaSiNo https://startupteknoloji.com/post/detail/walkino-buyumeye-devam-ediyor/

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

  25. Normanfer表示:

    farmacias online seguras en espaГ±a: comprar cialis online seguro – farmacia online madrid

  26. Играйте в Cryptoboss Casino и выигрывайте больше всех
    криптобосс официальный сайт криптобосс официальный сайт .

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

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

發佈留言

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