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

  1. Попробуйте свои силы в казино от Cryptoboss, играйте и выигрывайте вместе с Cryptoboss, уникальный опыт в мире криптовалютного азарта, попробуйте удачу в казино Cryptoboss, Cryptoboss casino – ваш путь к успеху, играйте на крипто-максимуме вместе с Cryptoboss, ипотека доверия с Cryptoboss casino, участвуйте в захватывающих играх в Cryptoboss casino, удивительные возможности в казино от Cryptoboss, Cryptoboss casino – ваш путь к криптовалютному успеху, революция в криптовалютных играх с Cryptoboss casino, большие выигрыши ждут вас в Cryptoboss casino, играйте и побеждайте с Cryptoboss casino, следуйте за лидером с Cryptoboss casino, Cryptoboss casino – ваше казино удачи, присоединяйтесь к лидерам в мире криптовалютных игр с Cryptoboss casino.
    криптобосс сайт cryptoboss online .

  2. The 10 Scariest Things About Leather Recliners For Sale leather recliners for sale

  3. Nice, beneficial piece of writing. We appreciate you this high-quality subject matter, I’m guessing you’ll on a regular basis get more web log, due to the fact Document i’m fascinated by this unique niche. May possibly right now search for this short article describes. Thank you catalog!

  4. Sink leaking表示:

    Excellent post. I was checking continuously this blog and I am impressed.

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

  6. Хочу поделиться опытом покупки в одном интернет-магазине сантехники. Решил обновить ванную комнату и искал место, где можно найти широкий выбор раковин и ванн. Этот магазин приятно удивил своим ассортиментом и сервисом. Там есть всё: от классических чугунных ванн до современных акриловых моделей.

    Если вам нужна купить раковину недорого , то это точно туда. Цены конкурентные, а качество товаров подтверждено сертификатами. Консультанты помогли с выбором, ответили на все вопросы. Доставка пришла вовремя, и установка прошла без проблем. Остался очень доволен покупкой и сервисом.

  7. Electric Mobility Scooters The Process Isn’t As Hard As You Think
    personal mobility

  8. Guide To Best Rated Bunk Beds: The Intermediate
    Guide The Steps To Best Rated Bunk Beds best rated bunk Beds

  9. Если у вас сломался телефон, советую этот сервисный центр. Я сам там чинил свой смартфон и остался очень доволен. Отличное обслуживание и разумные цены. Подробнее можно узнать здесь: сервис по ремонт телефонов.

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

  11. Trudy表示:

    A Comprehensive Guide To Depression Treatment Advancements.
    Ultimate Guide To Depression Treatment Advancements
    moderate depression treatment (Trudy)

  12. Rhonda表示:

    A Step-By Step Guide To Selecting The Right Coffee Bean cafe coffee
    beans (Rhonda)

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

  14. helpful site表示:

    An outstanding share! I have just forwarded this onto a co-worker who has been doing a little research on this. And he in fact ordered me breakfast because I discovered it for him… lol. So let me reword this…. Thank YOU for the meal!! But yeah, thanx for spending some time to talk about this subject here on your blog.

  15. JosephGar表示:

    эскорт услуга в москве женские эскорт услуги девушки москва

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

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

  17. AndnHesia表示:

    Some airlines prefer to err on the side of caution and offer suggestions to passengers on how to reduce the risk of DVT.
    Some fake websites claim to sell pharmacy2u tramadol since it’s a successful treatment
    Tobacco smoking is a major cause of lung cancer.

  18. AtfnHesia表示:

    If I need chemotherapy after surgery, how soon after my surgery would I start?
    Get rid of ailments now with neurontin pharmacy assistance prices and regular pharmacy prices?
    Hyperglycemia may follow hypoglycemia either because too much sugar was ingested or because hypoglycemia caused a surge in counter-regulatory hormones glucagon, epinephrine , cortisol, growth hormone.

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

  20. Недавно нашёл отличный интернет-магазин, где можно приобрести раковины и ванны для ванной комнаты. Они предлагают огромный выбор сантехники и аксессуаров, подходящих под любой интерьер и бюджет. Ассортимент действительно впечатляет: различные модели раковин (накладные, встроенные, подвесные) и ванн (акриловые, чугунные, гидромассажные).
    Особенно если вы ищете: раковины недорого, что мне было очень нужно. Цены адекватные, качество товаров на высоте. Плюс, они предлагают профессиональные консультации, быструю доставку и услуги по установке. В общем, если кто-то ищет качественную сантехнику по хорошим ценам, рекомендую обратить внимание на этот магазин.

  21. JoshuaDen表示:

    The man turning jet planes into cool houses
    анальный секс можно
    Wasilla, south central Alaska. Home to bears, lakes, mountains and a flight school that’s fast becoming a private aviation wonderland.

    At FLY8MA Pilot Lodge, you can opt for a scenic flight tour with glacier views, take the controls for a flying lesson, or go all in and get your pilot training.

    When night falls over the broad vistas of the US state they call the Last Frontier, you can then climb the steps to two unique accommodation experiences: a converted McDonnell Douglas DC-6 airplane and the newest arrival, a McDonnell Douglas DC-9 – still with its DHL livery.

    The fast-developing site is an ongoing project by FLY8MA founder Jon Kotwicki, who previously owned a flight school in Florida, before working as a commercial pilot and eventually ending up in Alaska.

    Flying for the airlines “pays good money and everything, but it’s a very boring job,” he says. “Driving Uber is more interesting because you could talk to your passengers.”

    Having fallen in love with the south central region on a vacation spent hiking, fishing and spotting bears and grizzlies, he chose it as a spot where he and his team – and his trusty Pomeranian dog Foxtrot – could “buy a lot of property and perhaps develop our own airport and run our own show.”

  22. linetogel表示:

    Greetings! Very helpful advice in this particular post! It’s the little changes that make the biggest changes. Thanks a lot for sharing!

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

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

  25. aptechka.online表示:

    Aptechka Online – это уникальный интернет-ресурс, предоставляющий сравнение о медикаментах, таких как Актовегин, и многих других. На сайте Аптечка Онлайн пользователи могут ознакомиться с подробной информацией о таких средствах, как Урсодез, побочных эффектах и узнать, что лучше для профилактики.
    Аптечка Онлайн также предоставляет читателям возможность ознакомиться с отзывами о различных препаратах, таких как Адаптол. Эти мнения помогают определиться, какое средство будет наиболее эффективным в конкретном случае. Кроме того, на ресурсе доступно сравнение заменителей, что облегчает выбор альтернативных вариантов.
    Благодаря удобной структуре на сайте Аптечка Онлайн, пользователи могут быстро найти нужную информацию, будь то подробная инструкция или противопоказания. Это делает ресурс незаменимым помощником для тех, кто заботится о своем здоровье.
    Aptechka Online предлагает подробные инструкции по применению препаратов, таких как Ксефокам, что помогает пользователям лучше понять, как использовать средства для профилактики различных состояний. На сайте также можно найти актуальные данные о противопоказаниях и возможных реакциях, что важно для безопасного применения.
    Дополнительно, Aptechka Online предлагает рекомендации по сравнению аналогов, таких как Аллохол. Это помогает пользователям принимать информированные решения и находить более доступные варианты лекарственных препаратов, не теряя при этом в эффективности.

  26. Профессиональный сервисный центр по ремонту фототехники в Москве.
    Мы предлагаем: надежный сервис ремонта фотовспышек
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
    Подробнее на сайте сервисного центра remont-vspyshek-realm.ru

  27. Everything is very open with a very clear clarification of the challenges. It was definitely informative. Your site is extremely helpful. Thanks for sharing!

發佈留言

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