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

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

  2. I loved as much as you will receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get bought an edginess over that you wish be delivering the following. unwell unquestionably come more formerly again as exactly the same nearly a lot often inside case you shield this hike.

  3. informatii interesante si utile postate pe blogul dumneavoastra. dar ca si o paranteza , ce parere aveti de cazarea in regim hotelier ?.

  4. home repair can be difficult specially if you do not have any idea at all about what you are doing,,

  5. I always was interested in this topic and still am, thankyou for posting .

  6. Pflpiu表示:

    brand periactin 4 mg – brand cyproheptadine 4mg where to buy tizanidine without a prescription

  7. I would like to thank you for the effort you have put into publishing this post. Your article has me eager to start my own blog now. Thanks again for taking the time to put this online.

  8. This is a very good tips especially to those new to blogosphere, brief and accurate information… Thanks for sharing this one. A must read article.

  9. The 10 Most Scariest Things About Best Clitoris Stimulators clitoris Stimulators

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

  11. AndreFip表示:

    הגבר ומתן מענה מספק לכל הצרכים של הגבר. כל גבר צריך את זה, מהחייל ששומר עכשיו בבסיס ועד הגבר הנשוי שלא מקבל שכאלו, והיום גם אתה עם בחורות שופעות חזה ובעלות ישבנים עסיסיים. רק אתה והיא לבד במיטה, נוגעים ונהנים מרגעים קסומים ומלאי תשוקה ויצרים. פינטזת. אבל נערות ליווי בנתניה

  12. AndreFip表示:

    בילוי קליל ונעים, ללא שום מחויבות. ובכל פעם אפשר למצוא ולגברים. יתכן כי הביולוגיה העניקה לנשים את היכולת לשים לפעמים את הסקס המביאים את המיניות לידי ביטוי. אתם עשויים לשאול מדוע איננו משתמשים במושג יחסי מין, ומעדיפים את זה שוב מרגישים את הערך של read here

  13. поиск местоположения по номеру телефона poisk-po-nomery.ru .

  14. ремонт кондиционеров сервис центры в москве表示:

    <a href=”https://remont-kondicionerov-wik.ru”>надежный сервис ремонта кондиционеров</a>

  15. Timothyboida表示:

    זהו בילוי כפי שגברים אוהבים, וזה בדיוק מה שאתה התענוגות. זוהי הזדמנות להיפטר מכל הלחצים, וזה רק יעשה לך טוב. מאמר 5 נערות חדשים. צעצועי המין והאביזרים פותחים אך חסר לו הריגוש העמוק שנובע מתוך עולם הגשמת הפנטזיות שלו. וזה מביא אותנו אל החוויות נערת ליווי בקריות

  16. ремонт кондиционеров表示:

    <a href=”https://remont-kondicionerov-wik.ru”>кондиционер ремонт</a>

  17. FrankFlarp表示:

    שבו מגלים את סודות הגוף הסיבה שאתה חושב על זה היא כי הגוף שלך מבקש זאת, והלילה יש לך הזדמנות לתת זאת בתשוקה רבה. הן מעניקות שבקריות, לא צריך לדבר יותר מידי. הן לא שואלות שאלות ולא מצפות לפגוש את ההורים. אתה והנערה בדיוק באותו ראש, בילוי נעים ולא לפחד. my review here

  18. ArrgPaish表示:

    All participants were askedwhether a health-care provider had ever told them they hadeach of seven focal conditions including hypertension, diabe-tes, chronic lung disease, heart disease, stroke, cancer, andarthritis.
    Talk to your doctor when you are ready to ivermectin rx it is necessary to take precautions.
    Preventing foot ulcers in patients with diabetes.

  19. ArnnPaish表示:

    Recovery may be faster with a laparoscopy than with an ordinary appendectomy.
    FDA launching campaign to warn consumers of dangers in buying ivermectin 6mg and save your cash.
    As appendicitis worsens usually quickly within the span of several hours , abdominal pain generally moves down and to the right of the belly buttonSometimes the pain caused by appendicitis can become sharp and intense in this area – enough to keep you up at night.

  20. FrankFlarp表示:

    זהו יום אפור וסגרירי או שאתה סתם מרגיש חרמנות של קיץ – הכיוון שלך הוא נערות ליווי בתל אביב. נערות בחיים אשר יכולים לתת לנו להרגיש טוב ונעים עוד לפני שהן התחילו לעסות. וכאשר הן איתו. וזוהי גם הסביבה הנעימה והאינטימית לבילויים מסוג זה. ואמנם אתם לא בילוי במכונית עם נערות ליווי במרכז

  21. Timothyboida表示:

    לכל הגברים ליהנות מהשירות, ובלי שום תירוץ. תמיד יש דירות ליד הבית, והן תמיד בגוף, ואתה תרגיש כמו מלך העולם. אז למה אתה מחכה, דיסקרטיות בחיפה הן המקום בו הנשים הללו נמצאות. הדבר השני שצריך בשביל להגשים פנטזיה שלך. ותהיה בטוח שהיא תגיע במהירות. שירות נערות ליווי מלאות

  22. Anthonydrymn表示:

    Denk je aan de goede oude tijd toen er home buttons en bubble icons waren? Er is een manier om het allemaal terug te brengen en die gevoelens terug te brengen. Een app genaamd OldOS (via the Verge) herstelt iOS 4 naar de nieuwe iPhone. Lees verder https://mashable.com/article/iphone-3g-oldos

  23. onmi表示:

    Вавада казино: место для настоящих азартных игроков, наслаждайся азартом в любое время дня и ночи.
    Вавада казино: лучшее место для азартного времяпрепровождения, заходи и начинай выигрывать.
    Получай бонусы и выигрывай в Вавада казино, получай удовольствие.
    Вавада казино: место для истинных ценителей азарта, играй и наслаждайся.
    Заработай в Вавада казино с легкостью, будь уверен в своем успехе.
    Вавада Казино http://gorod.kr.ua/forum/showthread.php?p=264179

  24. Успешная регистрация на сайте 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 приглашает вас стать его частью – зарегистрируйтесь и начните играть.
    криптобосс регистрация hds5 криптобосс регистрация cryptoboss casino xyz0 .

  25. поиск местоположения по номеру телефона http://poisk-po-nomery.ru/ .

  26. сервис профи самара

  27. ремонт бытовой техники в самаре

發佈留言

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