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

13,263 Responses

  1. After this, a fully functional model was revealed at the 2005 North American International Auto Show.

  2. shower column表示:

    Fantastic post.Really thank you! Will read on…

  3. рейтинг игровых процессоров https://topcpu.ru .

  4. Made from 1976 until 1986, Jeep’s CJ-7 was one in every of the most popular four-wheel drive off-road SUVs of the period.

  5. AndreDib表示:

    best canadian pharmacy https://canadianmdpharm.online/# online canadian pharmacy
    indian pharmacy

  6. Forbes, Bruce David (1 October 2008).

  7. рейтинги процессоров для пк http://www.topcpu.ru .

  8. Лучшие советы по выбору металлической входной двери, соответствует всем требованиям безопасности.
    Лучшие магазины с широким выбором входных металлических дверей.
    Что учесть при выборе входной металлической двери.
    5 основных причин купить металлическую входную дверь.
    дверь металлическая заказать двери входные металлические .

    Как выбрать между дверью одного бренда и дверью другого.

  9. 及び 読点表示:

    It is thought that properties will always value with time, which is why when a financier sees a property for sale, they rapidly think about buying the property as a financial investment.

  10. рейтинги производительности процессоров рейтинги производительности процессоров .

  11. Brandonnot表示:

    Indian Cert Pharm: Indian Cert Pharm – Indian pharmacy international shipping

  12. The Olds’ household business built some of the first gasoline powered engines in the nation.

  13. CurtisBam表示:

    indian pharmacy: Online medicine – Indian Cert Pharm

  14. What The Heck What Exactly Is Under Counter Fridge – Silver?
    Cheap refridgerators

  15. Заголовок: Попробуй Фортуну: Запускай на Бабки Всети в Превосходном Игорном доме!

    Введение:

    Вы стремитесь захватывающих впечатлений и случая заработать приз, ни оставляя из жилья? Так пользователю определенно зайдет играть на деньги в онлайн клубе! Передовые технологии дают возможность упиваться азартными развлечениями в любое секунду и в произвольном месте. Отбросьте о прогулках в людные дома – мир риска теперь у игрока под ладонью. Присоединяйтесь к миллионам людей, которые ранее оценили уют и ассортимент винтернете клуба.

    Преимущества игры в онлайн казино:

    Играть онлайн – это уютно: Вы можете комменцировать крутить на финансы в любое удобное часики, ни оставляя комфортного место. Больше ни нужно терять время на дорогу и придерживаться строгий костюм. Безграничный ассортимент забав: Всети казино предлагают гигантский ассортимент забав на всякий вкус – от обычных автоматов до захватывающих игровых забав с правдивыми крупье. Вы всегда найдете найдете кое-что увлекательное для себе. Крутить на бабки – это волнение и шанс выигрыша: Настоящие вложения сделают игру ещё еще волнующей. Приключение и адреналин – вот что делает игорный дом таким прелестным. Премии и акции: Онлайне игорный дом наслаждают своих клиентов крутыми бонусами за аккаунт, переводы и активность. Применяйте таковые, чтобы повысить ваши вероятности на приз. Безопасность и конфиденциальность: Инновационные всети казино используют лучшие технологии защиты, чтобы сберечь собственные информацию и транзакции. Вы могли бы пробовать на бабки, не волнуясь о защите. Наличие 24/7: Игорный дом винтернете трудится постоянно, следовательно игрок могли бы пробовать в удобное наиболее удобное для игрока секунду.

    Как начать играть на деньги онлайн:

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

    Почему стоит играть на деньги именно у нас?

    Наша компания предоставляем:

    Наиболее гигантский набор игр от лучших производителей. Оперативные и приятные способы заполнения и получения финансов. Постоянную помощь помощи, готовую поддерживать в любой мыслимой проблеме. Щедрые премии и события для неопытных и постоянных гостей. Передовую метод защиты и защиту данных ваших сведений.

  16. сравнение производительности процессоров topcpu.ru .

  17. AndreDib表示:

    real canadian pharmacy https://canadianmdpharm.online/# canadian pharmacy no rx needed
    Online medicine home delivery

  18. рейтинги процессоров для пк http://www.topcpu.ru/ .

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

  20. The place does “normal” play deviate from what you did, and most significantly, why?

  21. go right here表示:

    After checking out a number of the blog articles on your web page, I seriously appreciate your technique of writing a blog. I saved it to my bookmark site list and will be checking back soon. Please check out my web site as well and let me know what you think.

  22. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали ремонт iphone 13 pro рядом, можете посмотреть на сайте: ремонт iphone 13 pro рядом
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

發佈留言

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