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

  1. интернет магазин саженцы интернет магазин саженцы .

  2. лучшие капперы с бесплатными прогнозами лучшие капперы с бесплатными прогнозами .

  3. Cazrgwd表示:

    Добрый день!
    Приобрести диплом о высшем образовании
    купить диплом в салавате

  4. sky88表示:

    This is a topic that is near to my heart… Take care! Exactly where are your contact details though?

  5. 서면오피表示:

    Over The Doorway Towel Racks – The Dummies Guide
    서면오피

  6. наслаждайтесь победой!
    1win casino – ваш путь к успеху в азартных играх, ожидайте только лучшего!
    Откройте для себя мир азартных развлечений в 1win casino, выигрывайте крупные суммы и наслаждайтесь успехом!
    1win casino – ваш путь к богатству и успеху, играйте и побеждайте!
    Ощутите волнение и адреналин в играх 1win casino, играйте и выигрывайте с лучшими!
    1win casino – ваш путь к большим деньгам и успеху, выигрывайте и наслаждайтесь победой!
    Откройте для себя захватывающий мир азарта в 1win casino, играйте и радуйтесь каждой победе!
    1win casino – ваш ключ к миру азартных развлечений, наслаждайтесь своими победами вместе с 1win casino!
    Присоединяйтесь к азартному миру 1win casino, ждите только самых ярких побед!
    1win casino – ваш выбор для азартных игр, играйте и побеждайте с 1win casino!
    Ощутите волнение и радость в играх 1win casino, не упустите свой шанс на крупный выигрыш!
    1win casino – ваш портал в мир азартных развлечений, играйте и побеждайте с 1win casino!
    Откройте для себя захватывающий мир азарта в 1win casino, играйте и радуйтесь каждой победе!
    1win casino – ваш выбор номер один для азартных игр, выигрывайте и наслаждайтесь победой!
    Откройте для себя новые возможности в 1win casino, выигрывайте крупные суммы и наслаждайтесь успехом!

    1win зеркало 1win регистрация .

  7. Lottery And Casino Ebook – Critical Overview 프라그마틱 무료슬롯

  8. The Most Hilarious Complaints We’ve Heard About Car Key Programmer program car keys (writeablog.net)

  9. саженцы с доставкой на дом https://rodnoisad.ru .

  10. DanielPum表示:

    Я познакомился с Романом Василенко на одном из его бизнес-тренингов. Никогда не забуду, как его слова и подход к делу перевернули мое представление о бизнесе и финансовой грамотности. Роман – это человек, который живет своим делом и помогает другим достигать успеха. Его способность ясно и доступно объяснять сложные вещи просто поразительна. Он не просто руководитель, он настоящий наставник и вдохновитель. Участие в его тренингах помогло мне не только улучшить мои финансовые знания, но и существенно продвинуться в карьере. Роман делится своим опытом, учит на своих ошибках и успехах, и это бесценно.

  11. Uazrxva表示:

    Привет!
    Купить диплом о высшем образовании.
    telegra.ph/kupit-diplom-sssr-starogo-obrazca-08-13

  12. Lazrgng表示:

    Привет!
    Мы изготавливаем дипломы психологов, юристов, экономистов и прочих профессий по выгодным ценам.
    forum.men.ru/forum/viewtopic.php?t=10442&start=0&postdays=0&postorder=asc&highlight=

  13. заказ саженцев через интернет с доставкой проверенные rodnoisad.ru .

  14. лучшие капперы в телеграмме лучшие капперы в телеграмме .

  15. Randythils表示:

    новый двигатель hyundai solaris 1.6 хендай солярис 2024 1.6

  16. Checking out the their site really does receptive the most up-to-date hold in Federal drug administration round the nutritional also with nutritious supplements. It is proper knowing the five most suitable usual supplements which can help appearing your presence. Health

  17. Sahabet表示:

    Sahabet Casino’da yeni oyuncular, en buyuk hos geldin bonuslar?n? alarak oyuna kat?labilir. Kazand?ran slotlar Sahabet’te kazananlar?n? bekliyor. Bu f?rsat? kac?rmay?n ve ilk depozitoda buyuk avantajlar kazan?n. Sahabet, 2024’un en karl? kumarhanesi olarak dikkat cekiyor.

    Gidin ve casino depozitonuzda +%500 kazan?n – Sahabet Sahabet .

  18. Attractive component of content. I just stumbled upon your weblog and in accession capital to say that I get in fact enjoyed account your weblog posts. Anyway I will be subscribing in your augment and even I fulfillment you get right of entry to persistently fast.

  19. онлайн казино беларусь онлайн казино беларусь .

  20. I’m impressed, I must say. Genuinely rarely can i encounter a blog that’s both educative and entertaining, and without a doubt, you’ve hit the nail to the head. Your idea is outstanding; the pain is an issue that there are not enough individuals are speaking intelligently about. We are delighted that we stumbled across this inside my try to find some thing about it.

  21. Aw, i thought this was an incredibly good post. In idea I would like to put in writing similar to this additionally – spending time and actual effort to generate a excellent article… but exactly what can I say… I procrastinate alot through no means manage to go done.

  22. I concur! completely with what you said. Good stuff. Keep going, guys..

發佈留言

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