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...

8,919 Responses

  1. Heather表示:

    You’ll Never Be Able To Figure Out This
    Kids Bunk Bed’s Secrets kids bunk (Heather)

  2. What’s The Job Market For Accident Lawyer Near Me Professionals Like?
    accident lawyer near me

  3. 15 Pinterest Boards That Are The Best Of All Time About Mesothelioma
    Asbestos Lawyer Mesothelioma Lawsuits

  4. Mirta表示:

    10 Things That Everyone Doesn’t Get Right About
    The Word “Tan Leather Chesterfield” leather two seater chesterfield
    [Mirta]

  5. EdwardFar表示:

    Domick.ru, – это место, где вы найдете все, что нужно для поиска идеального жилья или коммерческого помещения, узнайте больше: продажа квартир макеевка днр. У нас есть широкий выбор объектов недвижимости, и мы всегда готовы помочь вам найти то, что соответствует вашим потребностям.

  6. Платежный модуль геткурс промокод platezhnyj-modul-getkurs-promokod.ru .

  7. Informate sobre los logros y premios de Ronaldinho en PSG | Explora la conexion de Ronaldinho con los jovenes futbolistas | Informate sobre las estadisticas de Ronaldinho en Transfermarkt | Conoce el paso de Ronaldinho por los mejores clubes de Europa | Informate sobre los retos superados por Ronaldinho | Informate sobre los premios y logros de Ronaldinho | Descubre el impacto de Ronaldinho en el equipo brasileno | Conoce como Ronaldinho inspiro a millones con su juego | Conoce la carrera de Ronaldinho en Barcelona y Milan, Ronaldinho PSG [url=https://ronaldinho-es.org]PSG Ronaldinho[/url].

  8. Сервисный центр предлагает ремонт oppo neo 3 в петербурге ремонт oppo neo 3 в петербурге

  9. Trefuhj表示:

    Как приобрести диплом техникума с минимальными рисками

    semicolonproject.net/forum/viewtopic.php?t=181473

  10. Sazrtwp表示:

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

    aubameyangclub.com/read-blog/4422

  11. 10 Tips For Quickly Getting SEO Services London Uk Content agency london

  12. 10 Things Everyone Gets Wrong About The Word “Wooden Treehouse”
    tree House Bunkbed

  13. Eduardosot表示:

    Центр садовода – все для сада и огорода
    лунный календарь садоводов и огородников
    «Центр Садовода» – это более 40 магазинов, расположенных в Оренбурге, Оренбургской области, Самаре и Башкортостане. А также Садовые Центры и Питомник растений на площади более 10 га. Ассортимент насчитывает более 10 000 товаров для сада, дома и посадочного материала. В нашем каталоге вы найдете всё, что нужно садоводу.

    «Центр Садовода» – это исключительное отношение к качеству продаваемой продукции.

    Заказ, сделанный в нашем интернет-магазине, вы можете забрать в ближайшем к Вам пункте выдачи товара (магазин “Центр Садовода”), либо оформить адресную доставку. Возможна отправка семян Почтой России в любой регион РФ.

  14. Think You’re The Perfect Candidate For Foldaway Treadmill With Incline?
    Take This Quiz does peloton treadmill have incline

  15. mostbetkbSi表示:

    Мостбет предлагает широкие возможности для ставок на спорт | Обновлённый интерфейс и удобная навигация в Мостбет | Мостбет – это качество и надёжность для всех игроков | С Мостбет вы всегда сможете найти рабочее зеркало | Мостбет – ваш выбор для ставок и развлечений | Найдите выгодные ставки на спорт в Казахстане с Мостбет | Всё для ставок и азартных игр – это Мостбет | Ставьте на спорт и киберспорт с Мостбет в Казахстане | Ваши лучшие ставки с Мостбет Казахстан, ставки на спорт в Казахстане [url=https://mostbetkzcasino.kz]Mostbet Казахстан[/url].

  16. mostbetxsSi表示:

    Ставки на спорт с выгодными условиями только на Мостбет | Все лучшие ставки и игры только на Мостбет | Игровые автоматы, покер и многое другое на Мостбет | Регистрация на Мостбет занимает всего пару минут | Легкий доступ к ставкам на сайте и приложении Мостбет | Быстрая регистрация и приятные бонусы на Мостбет | Регистрируйтесь и забирайте свой бонус на Мостбет | Мостбет – это ваш путь к крупным выигрышам | Всё для азартных игр и ставок – Мостбет, Mostbet зеркало для входа [url=http://mostbetkzcasino.kz/]Mostbet зеркало[/url].

  17. Diplomi_jfkl表示:

    купить диплом с занесением в реестр цена server-diploms.ru .

  18. kids' bed表示:

    10 Facts About Bunk Bed For Kids That Can Instantly Put You In The Best Mood kids’ bed

  19. 10 Things Everyone Hates About Ethanol Fire bioethanol fires uk (Promarket.in.Ua)

  20. 14 Questions You Might Be Refused To Ask Car Keys Cut Motorcycle Key Cutting Near Me

  21. Martinnuh表示:

    Устройство колодцев на чистую воду — это основной процесс в организации личной системы водной системы загородного жилища. Этот метод включает подготовку территории, исследование почвы и гидрогеологическое обследование местности, чтобы обнаружить лучший участок для размещения скважины. Глубина водозабора зависит от структуры почвы, что зависит от её разновидность: верховодка, песчаная скважина или артезианская – https://techno-voda.ru/preimushhestva-i-primenenie-membrannyh-filtrov-v/ . Качественно выполненная система забора воды обеспечивает питьевую и постоянную добычу воды в при любых условиях, исключая шанс исчезновения водного ресурса и попадания примесей. Новые методы позволяют автоматизировать использование скважины, упрощая её внедрение для повседневной жизни.

    После установки источника необходимо спроектировать подачу воды, чтобы она была качественной и практичной. Проектирование заключается в размещение насосного агрегата, монтаж системы фильтрации и проведение водопровода. Также требуется рассчитать автоматическое управление, которая будет контролировать напор и потребление ресурса. Изоляция от холода и постоянная эксплуатация в холодное время года также остаются необходимыми. С профессиональным подходом к сверлению и подключению дом обеспечит загородный дом комфортной системой, гарантируя комфорт комфортной и удобной.

  22. Margene表示:

    10 Reasons That People Are Hateful To Replace Window Handles Replace Window Handles
    upvc windows handles (Margene)

  23. Martinnuh表示:

    Сверление скважин на источник воды — это важнейший шаг в организации самостоятельного обеспечения водной системы загородного дома. Этот этап предполагает предварительное обследование, геологическое изучение и гидрогеологическое обследование территории, чтобы выбрать подходящее расположение для бурильных работ. Глубина водозабора зависит от грунтовых особенностей, что определяет её разновидность: мелкий источник, скважина на песок или глубинная – https://prom-info01.ru/osobennosti-i-primenenie-servoprivoda-siemens-7/ . Хорошо оборудованная система забора воды обеспечивает питьевую и непрерывную добычу воды в всех сезонах, исключая вероятность исчезновения водного ресурса и появления примесей. Инновационные решения позволяют настроить автоматический режим подачу воды, облегчая её внедрение для семейного потребления.

    Когда скважина готова необходимо обустроить систему водоснабжения, чтобы она прослужила максимально эффективной и устойчивой. Организация включает монтаж насосов, монтаж системы фильтрации и проведение трубопровода. Также важно рассчитать автоматическое управление, которая будет контролировать поток воды и потребление ресурса. Защита скважины от замерзания и стабильность функционирования в зиму также имеют значение. С квалифицированной помощью к бурению и подключению вы создадите частный участок полноценным водоснабжением, делая жизнь за городом комфортной и удобной.

  24. Sazrmpd表示:

    Узнайте, как приобрести диплом о высшем образовании без рисков
    mirfinrealty.ru/kupit-diplom-byistryiy-put-k-uspehu-v-karere

  25. Howdy! I simply wish to give you a huge thumbs up for the excellent info you have got here on this post. I will be returning to your website for more soon.

發佈留言

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