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

  1. Some really select blog posts on this website , saved to bookmarks .

  2. very nice post, i surely love this site, carry on it

  3. I am frequently to blogging and i also genuinely appreciate your posts. The article has truly peaks my interest. My goal is to bookmark your site and maintain checking choosing details.

  4. PH POP CASINO表示:

    I’m excited to discover this site. I wanted to thank you for your time for this fantastic read!! I definitely really liked every part of it and i also have you saved to fav to check out new information on your site.

  5. This is really helpful. Thanks for sharing this information. Special thanks to the people who came up with cheatsheets.

  6. Uazrwno表示:

    Привет,друзья!
    Заказать диплом ВУЗа .
    telegra.ph/diplom-vypusknika-detskogo-sada-kupit-08-13-10

  7. It is very rare these days to find sites that provide info someone is looking for. I am glad to see that your blog share valued information that can help to many scaners. thank and keep writing!

  8. fantastic post. Ne’er knew this, appreciate it for letting me know.

  9. Online Casino表示:

    I blog frequently and I really appreciate your information. This 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 subscribed to your Feed as well.

  10. Meet You The Steve Jobs Of The Fiat 500 Key Fob Industry Key for fiat 500

  11. DavidLog表示:

    дубликат номера автомобиля https://gos-dublikaty150.ru/

  12. 20 Trailblazers Lead The Way In 3 Wheel Lightweight Mobility Scooters 3 wheeled Electric scooters

  13. lex casino表示:

    Официальный сайт популярного казино Lex Casino, где ждут захватывающие игры и крупные выигрыши.
    На сайте Lex Casino собраны самые популярные игры от ведущих провайдеров, здесь каждый найдет что-то по душе.
    Успех и удача ждут вас на сайте Lex Casino, присоединяйтесь к нашей победной команде.
    Ощутите атмосферу азарта и адреналина на сайте Lex Casino, ждем вас за столами лучших азартных игр.
    бонусы lex casino lex casino играть .

  14. 5 Killer Quora Answers On Treadmill Near Me treadmill near
    me (web011.dmonster.kr)

  15. капельницы от запоя на дому http://kapelnica-ot-zapoya-kolomna.ru/ .

  16. заказать семена почтой с бесплатной доставкой semenaplus74.ru .

  17. MatthewSouse表示:

    Напольное покрытие “паркетная доска” – это классический и изысканный выбор для любой современной или традиционной интерьерной композиции. Паркетная доска представляют собой натуральную древесину высокого качества, которая может быть обработана лаком или масло-воск, чтобы создать уникальный и привлекательный внешний вид, что создаёт визуальный интерес и глубину в помещении. Кроме того, паркетная доска является долговечной и стабильной альтернативой другим типам напольных покрытий, таким как массивная доска или штучный паркет. Она также хорошо сохраняет тепло и звукоизоляцию, что делает её идеальным выбором для комфортного жилья. https://kvarcvinil3.ru/

  18. Sazrqgh表示:

    Официальное получение диплома техникума с упрощенным обучением в Москве
    b96052v5.beget.tech/2024/08/23/nuzhno-priobresti-diplom-zahodite-v-luchshiy-magazin

  19. dsred.com表示:

    A Look At The Myths And Facts Behind Car Key Reprogramming
    car keys reprogramming – dsred.com,

  20. Car Keys Programming Tips From The Top In The Business Key programming

  21. GregoryEvell表示:

    В магазине напольных покрытий вы можете получить консультация специалиста: обратитесь к продавцу-консультанту в магазине, чтобы получить профессиональную помощь в выборе напольного покрытия. Он поможет определиться с необходимым количеством материала, подскажет о способах укладки и уходе ламината, кварцвинила и паркетной доски. https://ламинат1.рф/

  22. Лучший выбор для азартных игроков | Получите шанс выиграть крупный джекпот на Casino Kometa com | Испытайте свою удачу прямо сейчас | Увеличьте свои шансы на победу с Casino Kometa com | Погрузитесь в мир азарта в любое удобное для вас время | Играйте с уверенностью в своей безопасности на Casino Kometa com | Играйте в любимые игры и открывайте новые возможности на Casino Kometa com | Попробуйте разнообразные игры и наслаждайтесь азартом вместе с нами | Обращайтесь за помощью и наслаждайтесь игрой без забот | Удобные способы оплаты для вашего комфорта | Выводите средства без задержек с Casino Kometa com | Получите эксклюзивные бонусы и подарки на Casino Kometa com | Воспользуйтесь уникальными предложениями и бонусами | Попробуйте свежие игры и удивитесь новым возможностям | Играйте в лучшие игры и открывайте новые горизонты азарта
    kometa casino kometa casino скачать .

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

  24. интернет семена почтой интернет семена почтой .

發佈留言

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