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); //排序後：法国话,京片子,英语,中国,中文
Recently i found your site and so already reading along. I think overall We would leave my first comment. I don’t know very to say except that I’ve enjoyed reading. Nice blog. I would keep visiting this blog really often.
Someone necessarily assist to make seriously posts I might state. That is the very first time I frequented your website page and so far? I amazed with the analysis you made to create this particular publish extraordinary. Excellent process!
Если вы искали где отремонтировать сломаную технику, обратите внимание – профи красноярск
Excellent blog! Do you have any recommendations for aspiring writers? I’m planning to start my own blog soon but I’m a little lost on everything. Would you recommend starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m totally confused .. Any ideas? Thanks!
Paper rolls… very great read you know alot about this subject i see!…
When I originally commented I clicked the -Notify me when new comments are added- checkbox and now each time a comment is added I receive four emails with the same comment. Can there be however you possibly can get rid of me from that service? Thanks!
Good website! I truly love how it is simple on my eyes and the data are well written. I am wondering how I could be notified whenever a new post has been made. I’ve subscribed to your RSS which must do the trick! Have a nice day!
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем: сервис центры бытовой техники москва
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
smite this area and learn more http://trade-city.ua/bitrix/redirect.php?goto=http://nspddfgurestv534.ru
The Most Significant Issue With Programming Car Key And How To Fix It
car key cut and program near me [Jefferson]
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем: сервисные центры по ремонту техники в москве
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
скорая наркологическая помощь в москве скорая наркологическая помощь в москве .
Guide To Best Metal Bunk Beds: The Intermediate Guide The Steps To Best Metal Bunk
Beds best metal bunk beds
I am glad to read this post, it’s an impressive one. I am always searching for quality posts and articles and this is what I found here, I hope you will be adding more in future.
This web page is often a walk-through for all of the details it suited you with this and didn’t know who to ask. Glimpse here, and you’ll definitely discover it.
Профессиональный сервисный центр по ремонту видео техники а именно видеокамер.
Мы предлагаем: ремонт веб-камеры
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
I’d should talk with you here. Which isn’t something I usually do! I love reading an article that should get people to feel. Also, many thanks for allowing me to comment!
Retrieved 29 June 2014.
Don’t be afraid to ask questions when you are buying bactrim para que sirve and various payment options when you buy online.
We started our LO on soy a few weeks ago due to fussiness for regular formula.
Sometimes I question the internet and what is posted? Honestly the internet used to be like a different place, although it seems to be changing for the better. What do you think?
I am not sure where you are getting your information, but good topic. I needs to spend some time learning much more or understanding more. Thanks for excellent information I was looking for this information for my mission.
I was real happy to find this website on bing, just what I was searching for : D as well saved to my bookmarks .
Are You Getting Tired Of ADHD Diagnosis Adults?
10 Inspirational Sources To Revive Your Passion adhd diagnosis private cost (https://Katz-wells.mdwrite.net/responsible-for-a-diagnosis-For-adhd-budget-10-ways-to-waste-your-money/)
If yours is usually regular, do a blood test.
time you happen to be searching the web for a great remedy, abilify and prozac on account it is modestly-priced and produces exceptional
It is typically secured with a buckle or a metal snap, but there are also others that have a loop configuration and a hook.
Is this a job that your body is use to both mentally and physically?
Purchase medications at our online drugstore at fda approval rybelsus pills through this specialist low-cost site
Blood creatinine and urine microalbumin.
I your writing style really enjoying this site.
Good aftie” i am a blogger too” and i can see that you are a nice blogger too.
The Girls You Shouldn’t Take Home From The Bar 유성구오피 (http://www.instapaper.com)
I have to get across my love for your generosity for men and women that absolutely need assistance with in this concern. Your real dedication to passing the solution all around was pretty interesting and have regularly allowed many people like me to achieve their targets. This warm and helpful guideline entails a lot a person like me and extremely more to my office workers. Thanks a lot; from each one of us.
Obviously I like your web site, but you have to take a look at the spelling on quite a few of your posts. Several of them are rife with spelling problems and I find it very bothersome to inform you. Nevertheless I will surely come again again!
Five Qualities That People Search For In Every Patio Door Repair patio Door repair company