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); //排序後：法国话,京片子,英语,中国,中文
Лучший эвакуатор в Москве, быстрая доставка|Только лучшие эвакуаторы в Москве, 24/7|Эвакуатор в Москве: ваш надежный спаситель|Специализированный эвакуатор в Москве|Эвакуатор в Москве для легковых автомобилей|Эвакуатор Москва: быстро и без лишних хлопот|Безопасная эвакуация авто в Москве|Эвакуатор для грузовых автомобилей в Москве|Эвакуатор в Москве: решение проблем с автомобилем|Экстренная эвакуация автомобилей: быстро и качественно|Эвакуация автомобилей в Москве: безопасно и оперативно|Быстрый эвакуатор в Москве|Экстренная эвакуация автомобилей в Москве|Эвакуатор Москва: помощь на дорогах|Эвакуатор Москва: профессиональная помощь на дорогах|Эвакуатор Москва: ваша безопасность на первом месте|Эвакуация мотоциклов в Москве: быстро и качественно
эвакуатор дешево https://ewacuator-moscow.ru/ .
Hi, I do believe this is an excellent website. I stumbledupon it 😉 I’m going to come back once again since i have book-marked it. Money and freedom is the greatest way to change, may you be rich and continue to help others.
Добрый день!
Диплом магистра
network-6063768.mn.co/posts/62661786
After going over a number of the blog posts on your web page, I seriously appreciate your way of blogging. I book-marked it to my bookmark webpage list and will be checking back in the near future. Take a look at my website too and tell me your opinion.
Привет, друзья!
Мы изготавливаем дипломы любых профессий по доступным тарифам.
rushkas-diplomxx.ru/kupit-diplom-voronezh
Having read this I believed it was rather enlightening. I appreciate you finding the time and effort to put this information together. I once again find myself personally spending a significant amount of time both reading and leaving comments. But so what, it was still worthwhile!
Продолжительность эксплуатации натяжных потолков
стелі натяжні ціни стелі натяжні ціни .
Are Best American-Style Fridge Freezer The Most Effective Thing That Ever Was?
Zack Foxworth [https://www.zackfoxworth.top/]
Fashion Courses Online… […]here are some links to sites that we link to because we think they are worth visiting[…]…
How To Outsmart Your Boss On Used 3 Wheel Electric Scooter
For Adults three wheel electric mobility scooter – Hong –
Лучшие шкафы купе на заказ в Москве, Выберите уникальный шкаф купе идеально подходящий для вашего интерьера в Москве
шкаф купе на заказ москва https://shkafy-kupe-na-zakaz77.ru/ .
Привет, друзья!
Полезные советы по безопасной покупке диплома о высшем образовании
rushkadiplomik.ru
Great looking web site. Precisely what theme are you presently making use of?
Spot on with this write-up, I really believe that this site needs a great deal more attention. I’ll probably be returning to see more, thanks for the advice.
Your comment on that topic was worth reading. I agree to your point on this.
The only way to address and correct this inequity, at least from a North American perspective (the Chinese have huge problems of their own), is to get people living within their means. We need to become less of a no-down-payment, no-interest, no payments until kingdom come culture to one that pays according to what it can afford, best made in cash or at least nearer to my grandfather’s idea of saving up for something you dearly want and don’t get it until you have earned and saved the money.
I just added this blog site to my rss reader, great stuff. Can not get enough!
Five Killer Quora Answers On Does A New Ignition Switch Require
A New Key Does a new ignition switch Require A new key
Nice post. I understand some thing more challenging on different blogs everyday. It will always be stimulating you just read content off their writers and employ a little something from their website. I’d choose to use some with all the content on my small blog whether you don’t mind. Natually I’ll offer you a link with your web weblog. Thank you for sharing.
Glass Repairing Tools To Streamline Your Daily LifeThe
One Glass Repairing Trick That Should Be Used By Everyone Learn glass repairing (https://www.mapleprimes.com/)
Здравствуйте!
Купить документ ВУЗа можно в нашей компании в Москве.
rushkadiplomikx.ru
After looking over a handful of the blog articles on your web page, I really appreciate your technique of blogging. I added it to my bookmark site list and will be checking back in the near future. Please visit my web site too and tell me what you think.
Уникальный шкаф купе на заказ: ваша мечта станет реальностью
шкаф купе на заказ москва https://shkaf-kupe-nazakaz177.ru/ .
I used to be able to find good info from your blog posts.
Здравствуйте!
Полезные советы по покупке диплома о высшем образовании без риска
arusak-diploms-srednee.ru/kupit-diplom-v-krasnodare
Greetings! Very useful advice in this particular post! It is the little changes that will make the biggest changes. Thanks a lot for sharing!
Best Linkbuilding Software Tools To Ease Your Daily
Lifethe One Best Linkbuilding Software Trick That Everybody Should Learn best linkbuilding software
Hello can I use some of the insight from this entry if I link back to you?
Ten Truck Accident Lawsuits-Related Stumbling Blocks You Should Not Share On Twitter
Truck Accident Lawyer
Hey! I know this is kinda off topic but I’d figured I’d ask. Would you be interested in trading links or maybe guest writing a blog post or vice-versa? My blog addresses a lot of the same topics as yours and I believe we could greatly benefit from each other. If you happen to be interested feel free to shoot me an email. I look forward to hearing from you! Excellent blog by the way!